首页>内容

Vue使用ly-tab

小坏蛋 / 07-12 / 评论 / 阅读 / 赞

作者有点忙，还没写简介

文章描述：

ly-tab是Vue一款插件，功能模块应用于菜的选项，使开发更简单、快捷

安装

1. 项目根目录执行命令

npm install ly-tab -S

全局

main.js

// ly-tab插件
import LyTab from 'ly-tab';

Vue.use(LyTab);

局部

应用

home.vue

template

<ly-tabs v-model="value">
    <ly-tab-item name="1" title="选项卡1" />
    <ly-tab-item name="2" title="选项卡2" />
</ly-tabs>

script

data() {
    return  {
        value: '1'
    }
}

效果：

自定义

模板

<ly-tabs v-model="selectedId">
    <ly-tab-item :name="index" :title="item.label" v-for="(item,index) in items" :key="index" />
</ly-tabs>

script

data() {
	return  {
		selectedId:1,
		items:[
			{label:'首页'},
			{label:'推荐'},
			{label:'前端'},
			{label:'IOS'},
			{label:'设计'},
			{label:'产品'},
			{label:'人工智能'},
		],
		options:{
			activeColor:'#1d98bd'
		}
	}
}

样式 scoped

.ly-tabs{
	position: fixed;
	top: 60px;
	left: 0;
}

改成自己想要的样式

模板

<ly-tabs v-model="selectedId" :activeColor="options.activeColor">
    <ly-tab-item :name="index" :title="item.label" v-for="(item,index) in items" :key="index" />
</ly-tabs>

script

options:{
    activeColor:'#b0352f'
}

样式

::v-deep .ly-tabs{
	box-shadow: none;
	border-bottom: none;
}

发布时间：2022/07/12

ly-tab

Vue使用ly-tab

相关阅读

发表评论

最近发表