nimble-ui/src/Mixins/attrSync/attrSync.js

基础vue ui库

import { callFn, toPascal } from 'nimble-lib';

/**
 * 实现双向绑定的mixin
 *
 * @param {String} attrName 属性名称
 * @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 attrSync(attrName, options) {
    options = options || {};
    attrName = (attrName || '') + '';
    let props = {};
    props[attrName] = options.value || {};
    let _myName = 'my' + toPascal(attrName);
    // .replace(/^[a-zA-Z]/g, ($1) => $1.toUpperCase());
    return {
        props: props,
        data() {
            let _that = this;
            let data = {};
            data[_myName] = callFn(options.myValueInit || _that[attrName], [_that[attrName]], _that);

            // 加上后tabbar不能触发变更
            // if (_that.$options.propsData[attrName] === undefined && data[_myName] !== undefined) {
            //     _that.$emit('update:' + attrName, data[_myName]);
            // }
            return data;
        },
        watch: {
            /**
             * 监听mValue的变化
             * @param {any} nowVal mValue变化后的值
             * @param {any} oldVal mValue变化前的值
             */
            [attrName](nowVal, oldVal) {
                let _that = this;
                let res = callFn(options.mValueChange, [nowVal, oldVal], _that);
                if (res !== false) {
                    _that[_myName] = nowVal;
                }
            },
            /**
             * 监听myValue的变化
             * @param {any} nowVal 变化后数据
             * @param {any} oldVal 变化前的值
             */
            [_myName] (nowVal, oldVal) {
                let _that = this;
                let res = callFn(options.myValueChange, [nowVal, oldVal], _that);
                if (res !== false) {
                    _that.$emit('update:' + attrName, nowVal);
                }
            }
        }
    };
}