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

最近接到这样一个需求滑块进度与输入框为一致,默认值为80,最小不能小于30,最大为100，怎么实现这个联动效果呢，下面小编给大家分享下基于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行则会隐藏掉

里插入图片描述