基於vue封裝選項卡元件

阿新 • • 發佈：2019-01-19

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>選項卡</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="app" v-cloak>
            <!-- @input接收子元件傳來的name -->
            <tabs v-model="value" @input="tabData">
                <pane label="標籤一" name="1">
                    標籤一的內容
                </pane>
                <pane label="標籤二" name="2">
                    標籤二的內容
                </pane>
                <pane label="標籤三" name="3">
                    標籤三的內容
                </pane>
            </tabs>
        </div>
        <script type="text/javascript" src="vue.js"></script>
        <script type="text/javascript" src="pane.js"></script>
        <script type="text/javascript" src="tabs.js"></script>
        <script type="text/javascript">
            var app = new Vue({
                el:"#app",
                data:{
                    // 初始顯示第幾個
                    value:"3"
                },
                methods:{
                    tabData:function(item){
                        console.log(item);
                    }
                }
            })
        </script>
    </body>
    </html>

2.我們需要兩個元件，tabs元件和pane元件，pane元件巢狀在tabs元件裡面，pane元件中slot內放業務邏輯程式碼（程式碼裡面都有詳細的註釋，這裡就不在一一解釋）
首先看下pane元件內容：

 Vue.component('pane',{
          name:"pane",
          template:'\
                <div class="pane" v-show="show">\
                <slot></slot>\
                </div>',
          props:{
                // 用來標識點選的哪個標籤
                name:{
                      type:String
                },
                // 標籤的標題內容
                label:{
                      type:String,
                      default:""
                }
          },
          data:function(){
                // show控制顯示哪個內容
                return {
                      show:true
                }
          },
          methods:{
                // this.$parent訪問父元件中的方法，注意在業務程式碼中儘量不要使用$parent來操作父鏈，這種方法試用於標籤這樣獨立的元件
                updateNav(){
                      this.$parent.updateNave();
                }
          },
          watch:{
                // 監聽label，label變化時，呼叫updateNav
                label(){
                      this.updateNav();
                }
          },
          mounted(){
                // mounted生命週期鉤子同樣呼叫updateNav
                this.updateNav();
          }
    })
tabs元件的內容：
Vue.component('tabs',{
    template:'\
        <div class="tabs">\
            <div class="tabs-bar">\
             <!--標題頁的標題 v-for遍歷, :class 動態繫結class-->\
                <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:{
            //接收父元件的value
            type:[String]
        }
    },
    data:function(){
        return {
            //儲存父元件的value到currentValue變數中，以便在本地維護
            currentValue:this.value,
            //將pane的標題儲存到陣列中
            navList:[]
        }
    },
    methods:{
        tabCls:function(item){
            //為當前選中的tab加一個tabs-tab-active class
            return [
                'tabs-tab',
                {
                    'tabs-tab-active':item.name === this.currentValue
                }
            ];
        },
        getTabs:function(){
            //使用$children遍歷子元件，得到所有的pane元件
            return this.$children.filter(function(item){
                return item.$options.name === 'pane';
            });
        },
        //更新tabs
        updateNave:function(){
            this.navList = [];
            // foreach裡面的回撥裡的this不再是tabs元件本身，所以設定_this=this
            var _this= this;
            this.getTabs().forEach(function(pane,index){
                _this.navList.push({
                    label:pane.label,
                    name:pane.name || index
                });
                //如果沒有設定name，預設設定為索引值
                if(!pane.name) pane.name = index;
                //設定第一個pane為當前顯示的tab
                if(index === 0){
                    if(!_this.currentValue){
                        _this.currentValue = pane.name || index;
                    }
                }
            });
            this.updateStatus();     
        },
        updateStatus:function(){
            var tabs = this.getTabs();
            var _this = this;
            //顯示當前選中的tab對應的pane元件，隱藏沒有選中的
            tabs.forEach(function(tab){
                return tab.show = tab.name ===_this.currentValue;
            });
        },
         //點選tab標題觸發
        handleChange:function(index){
            var nav = this.navList[index];
            var name = nav.name;
             //改變當前選中的tab，觸發watch
            this.currentValue = name;
            //實現子元件與父元件通訊
            this.$emit('input',name);
        }
    },
    watch:{
        // 監聽value變化
        value:function(val){
            this.currentValue = val;
        },
        // 監聽currentValue變化，更新對應的pane元件
        currentValue:function(){
            this.updateStatus();
        }
    }
})

有什麼不明白的，歡迎評論，我會解答，或是來拍磚，我們一起學習。

基於vue封裝選項卡元件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>選項卡&l

vue tab選項卡

border ear cti cdn none box line use port <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

Vue 封裝的loading元件

vue 封裝麵包屑元件

我看過一篇關於程式設計師寫部落格的文章，他說很多的程式設計師過了兩年寫了很多的程式碼，但是回想起來自己具體做了哪些技術點，遇到坑幾乎沒有印象，所以說文字是記錄的最好方式，好記性不如爛筆頭，可以方便自己以後檢視，在寫的過程中也會再加深一遍印象，對於我這個技術小白來說寫部落格是為了讓我對某一個知識點加深

vue-waterfall2 基於Vue.js 瀑布流元件

vue-waterfall2 1.寬度自適應,資料繫結 2.自定義程度高 3.使用極為簡便,適用於PC/移動端 4.提供resize(強制重新整理佈局)/mix(擾亂佈局) API，一般情況下不需要用到 5.後期將持續更新，提供animation（過渡動畫） Demo demo

vue實現選項卡切換效果

效果如下：說明：這裡我使用的原理是利用vue中的v-show/顯示隱藏指令，當為true的時候顯示，為false的時候隱藏 1html程式碼： <head> <meta charset="UTF-8"> <base target="_blan

抽屜元件（vue/wx）-基於vue編寫類似elementUi元件，基於小程式語法寫ivew元件

抽屜元件（vue/wx）（vue與微信兩種實現方式）基於vue編寫類似elementUi元件基於小程式語法寫ivew元件基於vue語法寫元件（涉及：父子元件傳值props，子父元件方法傳遞：this.$emit）基於微信語法寫元件（涉及：父

【簡單好用，支援PC/移動端】 vue-waterfall2 基於Vue.js 瀑布流元件

[email protected] 1.寬度自適應,資料繫結特性 2.自定義程度高 3.使用極為簡便,適用於PC/移動端 4.提供Event:loadmore (pc端滑動到底部觸發，移動

[js高手之路]Vue2.0基於vue-cli+webpack父子元件通訊教程

在git命令列下，執行以下命令完成環境的搭建： 1，npm install --global vue-cli 安裝vue命令列工具 2，vue init webpack vue-demo 使用vue命令生成一個webpack專案，專案名稱為vue-demo 3，c

[js高手之路]Vue2.0基於vue-cli+webpack同級元件之間的通訊教程

我們接著上文繼續，本文我們講解兄弟元件的通訊，專案結構還是跟上文一樣. 在src/assets目錄下建立檔案EventHandler.js，該檔案的作用在於給同級元件之間傳遞事件 EventHandler.js程式碼: 1 import Vue from 'Vue'; 2 export defau

vue.js 選項卡切換對img設定不同的圖片

<img id="img_shared" :src="shared" style="margin-left: 25px;" > 給img標籤設定src 引入兩張圖片選項卡切換的時候設定不同的圖片 import shared_nor from '..

基於easyui tabs選項卡的擴充套件外掛--tabs單擊事件

/** * easyui tbas元件擴充套件單擊事件 */ $.extend($.fn.tabs.methods, { /** * 繫結單擊事件 * @param {

Vue入門（一）-Vue實現選項卡效果

鑑於程式碼有些年代，且當時實現方式很不好，遭到了眾多噴子的人身攻擊，此文章終結，不必浪費大家時間了。---------------------------------------------------

初學Vue筆記——選項卡切換功能

　　在沒有學習Vue之前，想要做一個Tabs切換功能，首先想到的當然是通過DOM操作改變元素的class。然而Vue操作的是資料，雖然在方法中可以隨心所欲得寫原生js程式碼來操作DOM，但這會非常彆扭。初學者使用Vue的時候一定要切換一下思維。 <style>

Vue封裝樹形選單元件

csdn終於更新完成了哈，ok，步入正題像這種樹形結構的核心思想就是：遞迴思想，知道使用遞迴，其實這個例子函式的封裝也就很簡單嘍實現步驟：設定的props： data 資料結構

基於Vue搭建自己的元件庫（1）

本專案演示地址：https://husilang.github.io/zm-ui 專案參考文章：從零開始搭建Vue元件庫 VV-UI 專案的初衷是學習怎麼封裝一個基於Vue的UI元件庫，順便記錄每個步驟，以及在此過程中遇到的難點及體會。下面是我個人的一個專案搭建流程，希望能幫助大家。 ①腳手架初始化專案使

基於vue element 封裝上傳元件

基於vue element封裝的上傳元件使用方法： 1.首先引入該元件 2.註冊元件 3.頁面使用 4.回撥函式（如需其他回撥自行封裝因為我暫時沒用到其他的哈哈哈） <template>

初探 amaze-vue（基於vue.js封裝的Amaze UI 元件庫）

Amaze UI 是以移動優先（Mobile first）為理念，面向 HTML5 開發的國產優秀元件庫。因官方未提供vue.js版本，而且民間一直對vue.js版本的 Amaze UI 元件庫呼聲很高，今天特來分享一個完整版的基於Amaze UI 封裝

基於Ant Design Vue封裝一個表單控制元件

# 開原始碼 [https://github.com/naturefwvue/nf-vue3-ant](https://github.com/naturefwvue/nf-vue3-ant) > 有缺點本來是寫在最後的，但是博文寫的似乎有點太長了，估計大家沒時間往下看，於是就把有缺點寫在前面了，不喜歡可以先

實現vue-router來完成選項卡切換

spa utf bar -- 出口 ont view 通過 asc <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>vue-route

基於vue封裝選項卡元件

相關推薦