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

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

子组件:

<template>
  <div class="progress-box">
    <div
      ref="slider"
      class="slider"
    >
      <div
        class="process"
        :style="{ width }"
      ></div>
      <div
        ref="trunk"
        class="thunk"
        :style="{ left }"
      >
        <div class="block"></div>
      </div>
    </div>
    <div>
      <a-input-number
        v-model="per"
        class="input-num"
        :min="inputMin"
        :max="inputMax"
        @change="handleChangeNum"
      />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    sliderMin: { // 最小值
      type: Number,
      default: 0
    },
    sliderMax: { // 进度条最大值
      type: Number,
      default: 0
    },
    value: { // 对当前值进行双向绑定实时显示拖拽进度
      type: Number,
      default: 0
    },
    inputMin: {
      type: Number,
      default: 0
    },
    inputMax: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {
      slider: null, // 滚动条DOM元素
      thunk: null, // 拖拽DOM元素
      per: Math.max(this.sliderMin, this.value) // 当前值
    }
  },
  computed: {
    // 设置一个百分比,提供计算slider进度宽度和trunk的left值
    scale() { // 百分比
      return this.per / this.sliderMax
    },
    width() {
      if (this.slider) { // 设置进度激活的宽度
        return (this.slider.offsetWidth * this.scale) + 'px'
      } else {
        return 0 + 'px'
      }
    },
    left() { // trunk left = slider进度width + trunk宽度/2
      if (this.slider) { // 设置圆点所在的位置
        return (this.slider.offsetWidth * this.scale) - this.thunk.offsetWidth / 2 + 'px'
      } else {
        return 0 + 'px'
      }
    }
  },
  // 渲染到页面的时候
  mounted() {
    this.slider = this.$refs.slider
    this.thunk = this.$refs.trunk
    const _this = this
    this.thunk.onmousedown = function(e) {
      const width = parseInt(_this.width)
      const disX = e.clientX
      document.onmousemove = function(e) {
        // 拖拽的时候获取的新width
        const newWidth = (e.clientX - disX + width)
        // 拖拽的时候得到新的百分比
        const scale = newWidth / _this.slider.offsetWidth
        _this.per = Math.ceil((_this.sliderMax) * scale)// 对一个数进行上取整把小数转为整数(0.3=>30)
        _this.per = Math.max(_this.per, _this.sliderMin)
        _this.per = Math.min(_this.per, _this.sliderMax)
        _this.$emit('input', _this.per)
      }
      document.onmouseup = function() {
        document.onmousemove = document.onmouseup = null
      }
      return false
    }
  },
  methods: {
    handleChangeNum(e) {
      this.per = e
    }
  }
}
</script>
<style lang="scss" scoped>
.progress-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.clear:after {
  content: '';
  display: block;
  clear: both;
}
.slider {
  user-select: none;
  position: relative;
  width: calc(100% - 104px);
  height: 4px;
  background: #f5f5f5;
  border-radius: 5px;
  cursor: pointer;
  .process {
    position: absolute;
    left: 0;
    top: 0;
    width: 112px;
    height: 6px;
    border-radius: 5px;
    background: #3296fa;
  }
  .thunk {
    position: absolute;
    left: 100px;
    top: -5px;
    width: 14px;
    height: 14px;
  }
  .block {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #3296fa;
    background: rgba(255, 255, 255, 1);
    transition: 0.2s all;
  }
}
</style>

父组件使用

  <div class="xk-control-item">
      <div class="xk-item-title">
          <span>相似度(≥)</span>
       </div>
       <div class="xk-item-value">
           <c-progress
            v-model="per"
            :sliderMin="30"
            :sliderMax="100"
            :inputMin='30'
              />
        </div>
   </div>

<script>
import CProgress from '@/components/CProgress'
export default {
  name: 'VisitorTrack',
  components: {
    CProgress
  },
  data() {
    return {
    }
  },
  computed: {
    per: {
      get() {
        return 80
      },
      set(val) {
        // console.log(val)
      }
    }
  },
  watch: {

  },
  methods: {

  }

}
</script>

补充知识

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

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

<!-- 动态添加行 -->
   <a-form-model-item
       :wrapper-col="newWrapper"
       style="padding-left:63px;padding-right:40px;"
       v-for="(item, index) in form.information"
       :key="item.key"
       >
       <a-form-model-item class="fl" :prop="'information.' + index + '.name'"
       :rules="{
           required: true,
           message: '店铺名不能为空',
           trigger: ['blur','change'],
       }">
           <a-input
               v-model.trim="form.information[index].name"
               placeholder="请输入店铺名称"
               style="margin-right: 1%"
           />
       </a-form-model-item>
       <a-form-model-item class="fl" :prop="'information.' + index + '.address'"
       :rules="{
           required: true,
           message: '店铺地址不能为空',
           trigger: ['blur','change'],
       }">
           <a-input
               v-model.trim="form.information[index].address"
               placeholder="请输入店铺地址"
               style="margin-right: 1%"
           />
       </a-form-model-item>
       <a-form-model-item class="fl" :prop="'information.' + index + '.storeManagerName'"
       :rules="{
           required: true,
           message: '店长姓名不能为空',
           trigger: ['blur','change'],
       }">
           <a-input
               v-model.trim="form.information[index].storeManagerName"
               placeholder="请输入店长姓名"
               style="margin-right: 1%"
           />
       </a-form-model-item>
       <a-form-model-item class="fl" style="margin-right: 3%;" :prop="'information.' + index + '.storeManagerPhone'"
       :rules="[{required: true,message: '店长手机不能为空',trigger: ['blur','change']},
               {validator: mobilephoneValidate,trigger: ['blur','change'] }]"
       >
           <a-input
               v-model.trim="form.information[index].storeManagerPhone"
               placeholder="请输入店长手机号"
           />
       </a-form-model-item>
       <a
       v-if="form.information.length > 1"
       :disabled="form.information.length === 1"
       @click="removeRows(item)"
       >删除</a>
   </a-form-model-item>

添加 删除的方法

// 动态删除添加输入行
        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进度条滑块内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 基于vue3+antDesign2+echarts 实现雷达图效果

    目录 右上角时间选择器的实现 五角雷达图的绘制及数据渲染 右上角时间选择器的实现 修改ant组件样式 根据原型图,该选择器为月份时间选择器,使用a-month-picker,但原始的月份选择器样式与设计图不符,需要进行修改,修改有分为两部分:1.选择框:2.额外弹出的日历 选择框样式修改 修改ant组件时应避免全局修改,如使用less语法,对ant组件的修改应在该页面的class下 <style lang="less" > @vw: 19.2vw; @vh: 10.8vh;

  • ant-design-vue 快速避坑指南(推荐)

    ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库,它其实是Ant Design的Vue实现,组件的风格与Ant Design保持同步,组件的html结构和css样式也保持一致. 用下来发现它的确称得上为数不多的完整的VUE组件库与开发方案集成项目. 本文主要目的是总结一些开发过程中比较耗时间去查找,文档中没有具体说明的常见问题,同时希望能给新上手此框架的同学提供一些参考作用. 1.Table对接后台返回数据 针对Table数据格式与后他接口返回数据格

  • ant-design-vue 实现表格内部字段验证功能

    表格内 column 可输入的需求还是很常见的,尤其有一些业务场景就是表单内部有一个表格,然后表格的某些列是个进行输入的,就像下面这样 下单数量 内容不能为空 下单数量 必须输入正整数 翻阅 ant-design-vue 官网并没有发现说表单内表格字段验证的方案,但是有一个 自行处理表单数据 的介绍 那我们是不是可以参考这个方案去实现咱自己的业务需求呢,下面就开始说一下实现方案 <a-table :columns="columns" bordered :rowKey="

  • Ant Design Vue 走马灯实现单页多张图片轮播效果

    最近的项目有个需求是,这种单页多图一次滚动一张图片的轮播效果,项目组件库是antd 然而用了antd的走马灯是这样子的 我们可以看到官网给的api是没有这种功能,百度上也多是在css上动刀,那样也就毕竟繁琐了,我们是什么?我们是程序猿啊,程序猿就该有程序猿的样子,怎么能写繁琐的东西呢,那还怎么为公司项目提高效率!!!(我哪敢说是为了摸鱼啊) 为了追求摸鱼的真谛我仔细查阅了文档https://github.com/vueComponent/ant-design-vue/blob/master/co

  • ant-design-vue中tree增删改的操作方法

    1. 使用背景 新项目中使用了ant-design-vue组件库.该组件库完全根基数据双向绑定的模式实现.只有表单组件提供少量的方法.所以,在使用ant-design-vue时,一定要从改变数据的角度去切换UI显示效果.然而,在树形控件a-tree的使用上,单从数据驱动上去考虑,感体验效果实在不好. 2. 当前痛点 通过阅读官方帮助文档,针对树形控件数据绑定.需要将数据构造成一个包含children,title,key属性的大对象.这样一个对象,要么通过后端构造好这样的json对象,要么就是后端

  • antdesign-vue结合sortablejs实现两个table相互拖拽排序功能

    实现效果 本来想在网上看看有没有基于antdesign做的,然后发现是真的少啊!废话不多说,先上图: sortablejs介绍 首先先来认识一下这个插件: sortablejs 大家可以去细读一下它的api文档: 这边我就着重介绍一下我用到的api. 1.group可以传入对象,参数值为name,pull,put, name:如果是要两个列表下进行拖动的话,name的值必须为一样: pull:pull用来定义从这个列表容器移动出去的设置,true/false/'clone'/function t

  • ant-design-vue中的select选择器,对输入值的进行筛选操作

    今天在设计一个标签(采用的是Select 选择器中的标签那一个)时,从后台返回了数据,但是在输入值时,没有对回显的值进行过滤匹配,通过查看官方文档,解决了这个问题. 记在这里方便以后查看. <a-form-item label='标签' v-bind="formItemLayout"> <a-select mode="tags" :allowClear="true" :filterOption="filterOptio

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

    需求:滑块进度与输入框为一致,默认值为80,最小不能小于30,最大为100 子组件: <template> <div class="progress-box"> <div ref="slider" class="slider" > <div class="process" :style="{ width }" ></div> <div ref

  • vue ant design 封装弹窗表单的使用

    目录 vue ant design 封装弹窗表单 使用ant-design-vue的Form表单 使用脚手架新建项目 安装并导入ant-design-vue,使用Form组件 启动应用,测试验证 vue ant design 封装弹窗表单 <template> <div id="formForm"> <a-modal :visible="true" :title='title' @ok="handleOk('ok')"

  • Vue实现带进度条的文件拖动上传功能

    1. 基本界面 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1

  • vue柱状进度条图像的完美实现方案

    前言 本文是对bar进度条实现的2种方案进行分享,第一种是很简单,纯css的实现,第二种是echart的实现. css的实现 css实现很简单.代码如下: <template> <div class="haoroomflex"> <div v-for="(item,index) in barData" :key="index" class="onebar"> <div class=&q

  • Vue使用NProgress进度条的方法

    本文实例为大家分享了Vue使用NProgress进度条的具体代码,供大家参考,具体内容如下 1.安装 npm i -S nprogress 2.在router.js中使用 import Vue from 'vue' import Router from 'vue-router' import NProgress from 'nprogress' import 'nprogress/nprogress.css' Vue.use(Router) const router = new Router({

  • Vue实现圆环进度条的示例

    数据展示,一直是各行各业乐此不疲的需求,具体到前端开发行业,则是各种各种图表数据展示,各种表格数据展示,烦不胜烦(繁不胜繁)! 前几天刚做了折线图.柱状图.饼状图之类的图表数据展示效果,今天又碰到了类似圆环进度条的展示效果.天天跟数据打交道,天天跟接口打交道,项目做了不少,菜逼还是菜逼,都是泪啊! 其实说白了,是自己对canvas不熟,对CSS3不熟,所以就找了一个现成的轮子: <template> <div class="content" ref="box

  • vue圆环百分比进度条组件功能的实现

    有需要的人可以参考一下,如果试用过,发现问题,欢迎留言告知,不胜感激. 功能介绍: 1.若页面无刷新,且第一次传值小于第二次传值或者圆环初始化时执行的是递增动画 2.若页面无刷新,且第一次传值大于第二次传值则为执行递减动画 3.中间展示的百分比数字有缓动动画(速度同圆环进度动画一直) 4.动画完成时会触发动画完成回调 5.外部传值为圆环进度百分比(整数),圆环动画速度(整数) 效果如图所示: <template> <div class="percentloop">

  • vue+echarts实现进度条式柱状图

    本文实例为大家分享了vue+echarts实现进度条式柱状图的具体代码,供大家参考,具体内容如下 效果图如下 代码: <template> <div class="content-page"> <div class="tab-content"> <div id="myChart1"></div> </div> </div> </template> &l

  • vue实现动态进度条效果

    本文实例为大家分享了vue实现动态进度条效果的具体代码,供大家参考,具体内容如下 演示效果: 结构 progress/index.js const controller = { init: require('./controllers/html'), speed: require('./controllers/speed') } exports.init = controller.init exports.speed = controller.speed progress/controllers

  • vue视频时间进度条组件使用方法详解

    本文实例为大家分享了vue视频时间进度条组件的使用方法,供大家参考,具体内容如下 有些视频是以视频流的形式进行渲染的,没有视频滚动条,所以就写了24h的时间组件 实现思路: 1.24h的时间刻度线总宽度为12960px2.点击24h线的某一点,获取这一点离左侧原点的距离(使用dom元素layerX和offsetLeft综合判断)3.计算点击时线段的占比比率4.每天的时间是86400000毫秒5.占比比率乘以86400000就是获取的你点击的时间 代码如下: <template>   <d

随机推荐