在使用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
}
}
})