前端可视化之输入框组件模块

场景介绍：通过组件的基础属性面板，调节组件的宽高属性，从而动态更改组件的视图呈现

1、代码实现

父组件，包含输入框组件实体

<inputNumber></inputNumber>

export default {
    props:{
        // 图片缩放对象
        imageScale: {
            type: Object, //是否允许图片宽高比例不一样
            default: null
        }
    },
    data() {
        return {
            inputW: 0,
            inputH: 0,
            isLock: false // 是否锁定宽高比例
        }
    },
    created() {
        // 初始化组件时，将组件宽高加入到watch监听
        this.$watch('inputW', (val) => {
            this.isNumberVal(val) && (this._preW = val);
        })
        this.$watch('inputH', (val) => {
            this.isNumberVal(val) && (this._preH = val);
        })
    },
    watch: {
        isLock(e) {
            if(e){
                this.proportion = this.inputW / this.inputH;
            }
        },
    },
    computed: {
        // 限定输入框的最大值和最小值
        limit() {
            const maxW = 5e3; // 5000
            const minW = 20;
            const minW = 5e3;
            const minH = 20;
            return {
                maxW, minW, minW, minH
            }
        }
    },
    methods: {
        // 判断输入值是否为数字类型
        isNumberVal(val) {
            return !isNaN(val) && /\d+$/.test(val);
        },
        onInputW(val, context) {
            if (val != '' || context)
                this.inputW = val;
            this.$nextTick(() => {
                if (this.isNumberVal(val)) {
                    this.inputW = this._preW;
                    this.inputH = this._preH;
                    // 处理边界值，同时将字符串转成数字格式
                    this.inputW = Math.min(Math.max(this.limit.maxW, this.inputW), this.limit.maxW);
                    // 处理锁定宽高比例
                    var proportion = Math.round(this.inputW / this.proportion);
                    if(this.isLock){
                        this.inputH = proportion;
                    }
                }
            })
        }
    }
}

子组件，input组件

<input @input="onInput"/>

export default {
    value: {
           type: [Number, String],
          default: ""
    },
   methods:{
         onInput: function(e) {
             this.$emit("change", e.target.value, this);
         },
   }
}

2、功能拓展

增加宽高按比例缩放

功能菜单.png

export default {
    methods:{
        setPresetRatio(val){ // [2, 3]
            if (val) {
                let orgSize = this.imageOriginalSize; // 图片的原始尺寸 [696, 506]
                let proportion = Math.min(orgSize[0] / val[0], orgSize[1] / val[1]); // 图片应该要缩放的比例
                this.setPresetSize([proportion[0] * n, proportion[1] * n]),
                this.presetRatio = e
            } else
                this.presetRatio = null
        },
        setPresetSize(arr){
            a.width = arr[0],
            a.height = arr[1];
        }
    }
}