zoukankan      html  css  js  c++  java
  • Vue 单文件元件 — vTabs

    简书原文

    这是我做了第二个单文件元件
    第一个在这里vCheckBox

    这次这个叫vTabs,用于操作标签页
    演示DEMO
    演示DEMO2 - 子组件模式及别名
    演示DEMO3 - 极简模式

    示例:

    html

    <div id="tabs2"></div>
    <div id="tab-1">1</div>
    <div id="tab-2">2</div>
    <div id="tab-3">3</div>
    

    js

    var tabs2 = new vTabs({
        el: "#tabs2",
        data: {
            tabs: [
                { text: "html", el: "#tab-1" },
                { text: "javascript", el: "#tab-2" },
                { text: "其他", disabled: true, el: "#tab-3" }
            ]
        }
    });
    

    设计思路

    设计部分几乎和vCheckBox一毛一样:

    1. 提供template供后期拓展
    2. 处理props保证在子组件时的可用
    3. 所有样式内联,保证单文件可用
    4. 提供事件支持(目前仅实现了changed事件stateChangedtabAddedtabRemoved尚不可用)

    唯一比较特别的地方就是可以使用极简模式

    watch: {
      tabs: function(value) {
        if (value == null) {
          this.tabs = [];
          return;
        }
        if (value.constructor !== Array) {
          this.tabs = [value];
          return;
        }
        var id = this.tabFields.id,
        el = this.tabFields.el,
        text = this.tabFields.text,
        disabled = this.tabFields.disabled;
    
        function set(obj, name, value) {
          if (typeof name === "string") Vue.set(obj, name, value);
          return obj;
        }
    
        for (var i = 0; i < value.length; i++) {
          var val = value[i];
          if (typeof val !== "object") {
            val = set({},
            text, val);
          }
          if (!val.hasOwnProperty(id)) {
            set(val, id, Math.random().toString());
          }
          if (!val.hasOwnProperty(disabled)) {
            set(val, disabled, false);
          }
          if (val.hasOwnProperty(el) && typeof val[el] === "string") {
            set(val, el, document.querySelector(val[el]));
          }
          value[i] = val;
        }
        if (value.length === 0) {
          if (this.selectedIndex !== -1) {
            this.selectedIndex = -1;
          }
        } else if (this.selectedIndex < 0 || this.selectedIndex >= value.length) {
          this.selectedIndex = 0;
        }
      },
    

    观察(watch)tabs的变化,如果只是string就作为text使用,其他属性如果不存在即补全。
    由于初始化data时并不会触发watch,所以在created中尝试触发watch

    created: function() {
      this.tabs = [].concat(this.tabs);
    },
    

    源码

    GitHub

    说明文档过两天有时间再补,顺便吧那3个事件一起实现了,最近睡眠验证不足,睡觉了。。。

  • 相关阅读:
    LeetCode Missing Number (简单题)
    LeetCode Valid Anagram (简单题)
    LeetCode Single Number III (xor)
    LeetCode Best Time to Buy and Sell Stock II (简单题)
    LeetCode Move Zeroes (简单题)
    LeetCode Add Digits (规律题)
    DependencyProperty深入浅出
    SQL Server存储机制二
    WPF自定义RoutedEvent事件示例代码
    ViewModel命令ICommand对象定义
  • 原文地址:https://www.cnblogs.com/blqw/p/6751627.html
Copyright © 2011-2022 走看看