vue

附件

0.附件压缩包

1.vue-2.7.0.js

1.index.html

查看代码 
<! DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>标签页组件</title>
	<script src="./vue.js"></script>
	<script src="./pane.js"></script>
	<script src="./tabs.js"></script>
	<style>
	[v-cloak]{
		display:none;
	}
	.tabs{
		font-size:14px;
		color:#434b59;
	}
	.tabs-bar:after{
		content:"";
		display:block;
		width:100%;
		height:lpx;
		background-color:pink;
		margin-top:-lpx;
	}
	.tabs-tab{
		display:inline-block;
		padding:4px 16px;
		margin-right:6px;
		border:lpx solid pink;
		position:relative;
	}
	.tabs-tab-active{
		color:#3399ff;
		border-top:1px solid #3399ff;
		border-bottom:lpx solid #ffffff;
	}
	.tabs-tab-active:before{
		content:"";
		display:block;
		height:1px;
		top:0;
		left:0;
		right:0;
	}
	.tabs-content{
		padding:8px 0;
	}
	</style>
</head>
<body>
<div id="app"v-cloak>
	<tabs v-model="activeKey">
		<pane label="标签一"name="1">标签一的内容</pane>
		<pane label="标签二"name="2">标签二的内容</pane>
		<pane label="标签三"name="3">标签三的内容</pane>
		<pane label="标签四"name="4">标签四的内容</pane>
	</tabs>
	</div>
<script>
var vm=new Vue({
	el:"#app",
	data:{
		activeKey:'1',
	}
})
</script>
</body>
</html>

》》tabs.js

查看代码 
Vue.component('tabs',{
	template:`
	<div class="tabs">
		<div class="tabs-bar">
		<div :class="tabCls(item)" v-for="(item,index) in navList" @click="handleChange(index)">
			{{item.label}}
		</div>
	</div>
	<div class="tabs-content">
		<! --这里的slot 用来嵌套pane-->
		<slot></slot>
		</div>
	</div>`,
	props:{
		value:{
			type:[String,Number]
		}
	},
	data:function (){
    return{
        navList:[],
        currentValue:this.value
		}
	},
	methods:{
		getTabs(){
			return this.$children.filter((item) =>{
				return item.$options.name==='pane'
			})
		},
		updateNav() {
			this.navList=[]
			this.getTabs().forEach((pane,index)=>{
				this.navList.push({
					label:pane.label,
					name:pane.name||index
				})
				if (!pane.name){
					pane.name=index
				}
				if (index===0){
					if(!this.currentValue){
						this.currentValue=pane.name | lindex
					}
				}
			})
			this.updateStatus()
		},
		updateStatus(){
			var tabs=this.getTabs()
			tabs.forEach((tab) =>{
				return tab.show=tab.name===this.currentValue
			})
		},
		tabCls:function(item){
			return ['tabs-tab',{'tabs-tab-active' :item.name===this.currentValue}]
		},
		handleChange:function(index){
			var nav=this.navList[index]
			this.currentValue=nav.name
			this.$emit('input',nav.name)
			this.$emit('on-click',nav.name)
		}
	},
	watch:{
		value:function (val){
			this.currentValue=val
		},
		currentValue:function(){
			this.updateStatus()
		}
    }
})

》pane.js

查看代码 
Vue.component('pane',{
	name:'pane',
	template:'<div class="pane"v-show="show"><slot></slot></div>',
	data:function (){
		return{
			show:true
		}
	},
	props:{
		name:{
			type:String
		},
		label:{
			type:String,
			default:''
		}
	},
	methods:{
		updateNav(){
			this.$parent.updateNav()
		}
	},
	watch:{
		label:function(){
			this.updateNav()
		}
	},
	mounted(){
		this.updateNav()
	}
})

 

posted @ 2024-06-18 00:47  CYHMS  阅读(22)  评论(0)    收藏  举报