提供一个v-smartModel,快速取对象中的值

142 阅读1分钟

在使用vue时,在选择日期范围时v-model绑定的值返回的是一个数组,为此还需要拆分出来再传给后端,感觉麻烦,闲来无事写点东西玩玩,去除多余代码,目前刚写出来,仅供参考

<el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>

优化后如下即可:

<el-date-picker
  :value="[searchForm.startTime, searchForm.endTime]"
  v-smartModel:0="searchForm.startTime"
  v-smartModel:1="searchForm.endTime"
  :smartModelDefault:0="searchForm.startTime"
  :smartModelDefault:1="searchForm.endTime"
  type="daterange"
  format="yyyy-MM-dd"
  value-format="yyyy-MM-dd"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
/>

data() {
    return {
        searchForm: {
            startTime: "",
            endTime: "",
        }
    }
}

源码

Vue.directive("smartModel", {
    bind(el, binding, vnode) {
      const { expression, arg } = binding
      const initValue = vnode.componentInstance.$attrs['smartModelDefault:'+arg]
      const getDefaultValue = ()=>{
        return initValue
      }
      if(!el.$$listener) {
        el.$$listener = []
      }
      const fn = function(e) {
        if(e && typeof e === "object" && e.hasOwnProperty(arg)) {
          _.set(vnode.context, expression, e[arg])
        } else {
          _.set(vnode.context, expression, getDefaultValue())
        }
      }
      el.$$listener[el.$$listener.length] = fn
      vnode.componentInstance.$on("input", fn)
    },
    unbind(el, binding, vnode) {
      if(el.$$listener) {
        el.$$listener.forEach(v=>{
          vnode.componentInstance.$off("input", v)
        })
        el.$$listener= null
      }
    }
  })