快捷導(dǎo)航

vue選項卡組件的實現(xiàn)方法

更新時間：2022年03月01日 12:02:36 作者：GlimmerL

這篇文章主要為大家詳細(xì)介紹了vue選項卡組件的實現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue選項卡組件的實現(xiàn)代碼，供大家參考，具體內(nèi)容如下

主要功能：點擊不同的選項，顯示不同的內(nèi)容

html

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title></title>
?? ??? ?<link rel="stylesheet" type="text/css" href="css/style.css" />
?? ??? ?<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
?? ??? ?<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
?? ??? ?<script type="text/javascript">
?? ??? ??? ?$(document).ready(function(){
?? ??? ??? ??? ?var app=new Vue({
?? ??? ??? ??? ??? ?el: "#app",
?? ??? ??? ??? ??? ?data: {
?? ??? ??? ??? ??? ??? ?activeKey: '1'//被選擇的選項
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?});
?? ??? ??? ?});
?? ??? ?</script>
?? ?</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>
?? ??? ??? ?</tabs>
?? ??? ?</div>
?? ??? ?<script src="js/pane.js" type="text/javascript" charset="utf-8"></script>
?? ??? ?<script src="js/tabs.js" type="text/javascript" charset="utf-8"></script>
?? ?</body>
</html>

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(){
?? ??? ??? ?this.updateNav();
?? ??? ?}
?? ?},
?? ?mounted() {
?? ??? ?this.updateNav();
?? ?}
})

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></slot> \
?? ??? ??? ?</div> \
?? ??? ?</div>',
?? ?props: {
?? ??? ?value: {
?? ??? ??? ?type: [String,Number]
?? ??? ?}
?? ?},
?? ?data: function(){
?? ??? ?return {
?? ??? ??? ?currentValue: this.value,
?? ??? ??? ?navList: []
?? ??? ?}
?? ?},
?? ?methods: {
?? ??? ?tabCls: function(item){
?? ??? ??? ?return [
?? ??? ??? ??? ?'tabs-tab',
?? ??? ??? ??? ?{
?? ??? ??? ??? ??? ?'tabs-tab-active': item.name===this.currentValue
?? ??? ??? ??? ?}
?? ??? ??? ?]
?? ??? ?},
?? ??? ?//遍歷所有為pane的子元素
?? ??? ?getTabs(){
?? ??? ??? ?return this.$children.filter(function(item){
?? ??? ??? ??? ?return item.$options.name==='pane';
?? ??? ??? ?});
?? ??? ?},
?? ??? ?//將pane子元素中l(wèi)abel name放進navList數(shù)組
?? ??? ?updateNav() {
?? ??? ??? ?this.navList=[];
?? ??? ??? ?var _this=this;
?? ??? ??? ?this.getTabs().forEach(function(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 || index;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ?});
?? ??? ??? ?this.updateStatus();
?? ??? ?},
?? ??? ?updateStatus(){
?? ??? ??? ?var tabs=this.getTabs();
?? ??? ??? ?var _this=this;
?? ??? ??? ?//顯示當(dāng)前正在選中的
?? ??? ??? ?tabs.forEach(function(tab){
?? ??? ??? ??? ?return tab.show=tab.name===_this.currentValue;
?? ??? ??? ?})
?? ??? ?},
?? ??? ?handleChange: function(index){
?? ??? ??? ?var nav =this.navList[index];
?? ??? ??? ?var name=nav.name;
?? ??? ??? ?this.currentValue=name;
?? ??? ??? ?this.$emit('input',name);
?? ??? ??? ?this.$emit('on-click',name);
?? ??? ?}
?? ?},
?? ?watch: {
?? ??? ?value: function(val){
?? ??? ??? ?this.currentValue=val;
?? ??? ?},
?? ??? ?currentValue: function (){
?? ??? ??? ?this.updateStatus();
?? ??? ?}
?? ?}
?? ?
})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: