vue+Ant Design进度条滑块与input联动效果实现

 需求:滑块进度与输入框为一致,默认值为80,最小不能小于30,最大为100

 子组件:

父组件使用

  

      

          相似度(≥)
       
       

           
        
   
 

补充知识

ant-design-vue 动态添加input行及动态校验

这里涉及到动态input表单校验 我仅给自己记录一下

   
       
           
       
       
           
       
       
           
       
       
           
       
       删除
   

添加 删除的方法

// 动态删除添加输入行
        removeRows(item) {
            let index = this.form.information.indexOf(item);
            if (index !== -1) {
                this.form.information.splice(index, 1);
            }
        },
        addRows() {
            this.form.information.push({
                name: '',
                address: '',
                storeManagerName: '',
                storeManagerPhone: '',
                key: Date.now(),
            });
        },

手机号或者其他单独的表单校验写在methods里

// 动态添加行 店长手机号验证
        testMobilephone: function (str) {
            const regex = /^1[3456789]\d{9}$/
            if (!regex.test(str)) {
            return false
            } else {
            return true
            }
        },
        mobilephoneValidate (rule, value, callback) {
        // 主要就是添加一个对undefined和空串的判断
        if (typeof (value) === 'undefined' || value === '') {
            callback()
            } else {
                if (!this.testMobilephone(value)) {
                callback(new Error('请输入正确手机格式'))
                }
                callback()
            }
        },

这里information数组 在data里写上一组空对象 是为了保证有一组input行显示出来 不写input行则会隐藏掉

到此这篇关于vue+Ant Design进度条滑块与input联动的文章就介绍到这了,更多相关vue+Ant Design进度条滑块内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！