vue如何实现选项卡组件

2023-06-29 07:06:39 623人浏览安东尼

摘要

这篇文章主要为大家展示了“Vue如何实现选项卡组件”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue如何实现选项卡组件”这篇文章吧。具体内容如下主要功能：点击不同的选项，显示不同的内容html

这篇文章主要为大家展示了“Vue如何实现选项卡组件”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue如何实现选项卡组件”这篇文章吧。

具体内容如下

主要功能：点击不同的选项，显示不同的内容

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子元素中label name放进navList数组        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;            //显示当前正在选中的            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();        }    }    })

以上是“vue如何实现选项卡组件”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！

--结束END--

本文标题: vue如何实现选项卡组件

本文链接: https://lsjlt.com/news/323702.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341