sailfish-uibase

七鱼基础组件包

七鱼基础组件包, 基本思想以插件的方式开发。

插件规范

Vue的插件应当有一个公开方法 install。

    MyPlugin.install = function (Vue, options) {
      // 1. add global method or property
      Vue.myGlobalMethod = ...
      // 2. add a global asset
      Vue.directive('my-directive', {})
      // 3. add an instance method
      Vue.prototype.$myMethod = ...
    }

插件列表

指令规范

所有的钩子函数将被复制到实际的指令对象中，钩子内 this 指向这个指令对象。

    Vue.directive('my-directive', {
      bind: function () {
        // 准备工作
        // 例如，添加事件处理器或只需要运行一次的高耗任务
      },
      update: function (newValue, oldValue) {
        // 值更新时的工作
        // 也会以初始值为参数调用一次
      },
      unbind: function () {
        // 清理工作
        // 例如，删除 bind() 添加的事件监听器
      }
    })

过滤器规范

过滤器接收两个参数：过滤器 ID 和过滤器函数。

    <!-- 任意参数 -->
    <span v-text="message | wrap 'before' 'after'"></span>

    <!-- 动态参数 -->
    <input v-model="userInput">
    <span>{{msg | concat userInput}}</span>

    // 传入任意数量的参数
    Vue.filter('wrap', function (value, begin, end) {
      return begin + value + end
    });

    // 双向过滤器
    Vue.filter('currencyDisplay', {
      // model -> view
      // 在更新 `<input>` 元素之前格式化值
      read: function(val) {
        return '$'+val.toFixed(2)
      },
      // view -> model
      // 在写回数据之前格式化值
      write: function(val, oldVal) {
        var number = +val.replace(/[^\d.]/g, '')
        return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
      }
    })

    // 动态参数
    Vue.filter('concat', function (value, input) {
      // `input` === `this.userInput`
      return value + input
    })