Vuejs 组件化开发tab组件实例

#麻辣小龙虾#

已于 2023-04-18 10:13:30 修改

阅读量1.8k

点赞数

分类专栏： vue Vuejs 文章标签：前端

于 2017-05-15 00:13:01 首次发布

本文链接：https://blog.csdn.net/CodingNoob/article/details/72084831

版权

Vuejs 同时被 2 个专栏收录

26 篇文章 4 订阅

订阅专栏

vue

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="css/index.css">
    <script type="text/javascript" src="../lib/vue.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-1.11.3.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #tabPanel .itemname {
            height: 40px;
            width: 180px;
            margin-bottom: 10px;
        }
        
        #tabPanel .itemcontent {
            height: 40px;
            width: 180px;
        }
        
        #tabPanel .addbtn {
            margin: 10px 0 0 95px;
            width: 185px;
            height: 40px;
        }
        
        #tabPanel .active {
            background: #eee;
        }
        
        #tabPanel {
            height: 340px;
            width: 500px;
            margin: 100px auto;
        }
        
        #tabPanel .tab {
            height: 40px;
            background: #ccc;
            margin-top: 10px;
        }
        
        #tabPanel .tab ul li {
            list-style: none;
            float: left;
            width: 80px;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }
        
        #tabPanel .content {
            height: 300px;
            width: 500px;
            background: #eee;
        }
    </style>
</head>

<body>
    
    <div id="tabItem">
        <my-tab></my-tab>
        <my-tab></my-tab>
    </div>

    <!--组件模板-->
    <script type="text/template" id="tab">
        <div id="tabPanel">
            <label>添加滑块名称：<input type="text" v-model="tabItem" class="itemname"></label><br>
            <label>添加滑块内容：<input type="text" v-model="tabContent" class="itemcontent"></label><br>
            <input type="button" value="添加选项" @click="addItem()" class="addbtn">
            <div class="tab">
                <ul>
                    <li v-for="(value, index) in tabs" v-bind:class="{active: index == num }" @mouseover="toggle(index)" @dblclick="del(index)">{{value}}</li>
                </ul>
            </div>
            <div class="content">
                <div class="box" v-for="(value, index) in tabContents" v-show="index == num" contenteditable="true" @blur="editContent(index,value)">{{value+index}}</div>
            </div>
        </div>
    </script>
    <!--组件模板-->
</body>

</html>
<script>
    var vue = new Vue({
        el: "#tabItem",
        data: {

        },
        components: {
            'my-tab': {
                template: '#tab',
                data: function() {
                    return {
                        tabs: ["第一项", "第二项"],
                        tabContents: ["第一项内容", "第二项内容"],
                        num: 0,
                        tabItem: "",
                        tabContent: ""
                    }
                },
                methods: {
                    //切换滑块
                    toggle: function(index) {
                        this.num = index;
                    },
                    //添加滑块
                    addItem: function() {
                        if (this.tabItem == "" || this.tabContent == "") {
                            alert("填写完整的名称和内容");
                        } else {
                            this.tabs.push(this.tabItem);
                            this.tabContents.push(this.tabContent);
                        }
                    },
                    //双击删除滑块
                    del: function(index) {
                        this.tabs.splice(index, 1);
                        this.tabContents.splice(index, 1)
                    },
                    //编辑选项内容
                    editContent: function(index, value) {
                        this.tabContents[index] = value;
                        console.log(this.tabContents);
                    }
                }
            }
        }
    });
</script>