vue 拖拽进度条滑动组件横向竖向滑动插件

原创

已于 2022-05-11 10:01:11 修改 · 6.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2019-07-14 09:32:28 首次发布

本文介绍了如何使用Vue.js创建一个支持横向和竖向拖拽滑动的进度条组件，提供了相关的dom.js实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

dom.js

//是否有指定class存在
export function hasClass(el, className) {
   
   
    let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
    return reg.test(el.className)
  }
  //如果存在什么都不做，否则就设置添加
  export function addClass(el, className) {
   
   
    if (hasClass(el, className)) {
   
   
      return
    }
  
    let newClass = el.className.split(' ')
    newClass.push(className)
    el.className = newClass.join(' ')
  }
  
  export function getData(el, name, val) {
   
   
    const prefix = 'data-'
    if (val) {
   
   
      return el.setAttribute(prefix + name, val)
    }
    return el.getAttribute(prefix + name)
  }
  
  let elementStyle = document.createElement('div').style
  
  let vendor = (() => {
   
   
    let transformNames = {
   
   
      webkit: 'webkitTransform',
      Moz: 'MozTransform',
      O: 'OTransform',
      ms: 'msTransform',
      standard: 'transform'  //以上前缀都不满足，就用这个
    }
  
    for (let key in transformNames) {
   
   
      if (elementStyle[transformNames[key]] !== undefined) {
   
   
        return key
      }
    }
  
    return false
  })()
  
  export function prefixStyle(style) {
   
   
    if (vendor === false) {
   
   
      return false
    }
  
    if (vendor === 'standard') {
   
   
      return style
    }
  
    return vendor + style.charAt(0).toUpperCase() + style.substr(1)
  }

在这里插入图片描述

竖向拖拽滑动进度条插件

<template>
  <div class="hello">
    <div class="progress-bar" ref="progressBar" @click="progressClick">
      <div class="bar-inner">
        <!-- 背景 -->
        <div class="progress" ref="progress"></div>
        <!-- 小圆点 -->
        <div
          class="progress-btn-wrapper"
          ref="progressBtn"
          @touchstart.prevent