nimble-ui
Version:
79 lines (77 loc) • 2.47 kB
JavaScript
import { callFn } from 'nimble-lib';
/**
* 实现双向绑定的mixin
*
* @param {Object} options 选项
* @param {Function} options.myValueInit 初始化时候的值
* @param {Function} options.mValueChange mValue变化时的回调，返回false表示不执行自动赋myValue值
* @param {Function} options.myValueChange myValue变化时的回调，返回false表示不执行自动emit值
* @export
* @returns {Object}
*/
export default function vModel(options) {
options = options || {};
let attrName = 'mValue';
let _myName = 'myValue';
return {
model: {
prop: attrName,
event: 'valueChange'
},
props: {
/**
* 当前的值
*/
mValue: options.value || {}
},
data() {
let _that = this;
let data = {
myValue: callFn(options.myValueInit || _that.mValue, [_that.mValue], _that)
};
if (_that.$options.propsData[attrName] === undefined && data[_myName] !== undefined) {
_that._valueChange();
}
return data;
},
watch: {
/**
* 监听mValue的变化
* @param {any} nowVal mValue变化后的值
* @param {any} oldVal mValue变化前的值
*/
mValue (nowVal, oldVal) {
let _that = this;
let res = callFn(options.mValueChange, [nowVal, oldVal], _that);
if (res !== false) {
_that.myValue = nowVal;
}
},
/**
* 监听myValue的变化
* @param {any} nowVal 变化后数据
* @param {any} oldVal 变化前的值
*/
myValue (nowVal, oldVal) {
let _that = this;
let res = callFn(options.myValueChange, [nowVal, oldVal], _that);
if (res !== false) {
_that._valueChange();
}
}
},
methods: {
/**
* 提交值变化的时候的事件
* @param {Event} evt 事件对像
*/
_valueChange (evt) {
let _that = this;
if (evt === undefined) {
evt = _that.myValue;
}
_that.$emit('valueChange', evt);
}
}
};
}