vue写滑块组件

已于 2022-05-11 16:13:14 修改
阅读量2.5k 收藏 2
点赞数 1
文章标签： vue.js elementui javascript
于 2022-02-17 16:59:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44059045/article/details/122987158
版权 
<template>
  <div @touchend="down = false" @touchmove="gotouchstart" class="pledge">
    <!-- <div class="mask" @touchend="down = false" @touchmove="gotouchstart"></div> -->
    <div class="h2">調整質押率</div>
    <!-- 已借數量和質押金額 -->
    <div class="info">
      <div>已借數量</div>
      <div>1,001.48292837 USDT</div>
    </div>
    <div class="info">
      <div>質押金額</div>
      <div>1.48292837 BTC</div>
    </div>
    <!-- 滑块背景 -->
    <div class="box">
      <div style="border-right: 1px solid #0f9d58">
        <div class="text">65%</div>
        <div class="text">初始質押率</div>
        <div class="low col">低風險</div>
        <div class="round">
          <div></div>
        </div>
        <div class="round" style="bottom: -4px; left: -4px">
          <div></div>
        </div>
        <div class="round" style="top: -4px; right: -4px">
          <div style="background: #0f9d58"></div>
        </div>
      </div>
      <div style="border-right: 1px solid #d23f31">
        <div class="text">83%</div>
        <div class="text">平倉質押率</div>
        <div class="danger col">高風險</div>
        <div class="round">
          <div></div>
        </div>
        <div class="round" style="top: -4px; right: -4px">
          <div style="background: #d23f31"></div>
        </div>
      </div>
    </div>
    <!-- 滑块 -->
    <div class="slider" ref="sliderRef">
      <div
        class="slider_box"
        :style="{ left: sliderLeft + 'px' }"
        @touchstart="down = true"
      >
        | | |
      </div>
      <div class="percent" :style="{ left: percentLeft + 'px' }">
        <div>LTV</div>
        <div style="color: #0f9d58; font-weight: bold">{{ percent }}%</div>
      </div>
    </div>
    <!-- 还款总额弹窗 -->
    <div class="title">質押金額</div>
    <div class="input">
      <div class="type">增加</div>
      <input type="text" v-model="money" @keyup="formatInput" />
      <div class="unit">
        <span style="margin-right: 5px">MAX</span>
        <span style="color: rgba(0, 0, 0, 0.87)">USDT</span>
      </div>
    </div>
    <div class="btn">增加质押金</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sliderLeft: -16, // 滑块左侧距离
      percentLeft: -21, // 百分比的侧距离
      percent: 1, // 百分比
      down: false, // 控制滑块
      money: 0,
    }
  },

  mounted() {},

  methods: {
    // 滑块拖动
    gotouchstart(e) {
      if (this.down) {
        let width = this.$refs.sliderRef.getBoundingClientRect().width
        // 计算距离
        let left =
          Math.round(e.targetTouches[0].clientX) -
          Math.round(this.$refs.sliderRef.getBoundingClientRect().left)
        if (left < 0) {
          this.sliderLeft = -17
          this.percentLeft = -27
        } else if (left > width) {
          this.sliderLeft = width - 17
          this.percentLeft = width - 27
        } else {
          this.sliderLeft = left - 17
          this.percentLeft = left - 27
        }
        // 计算百分比
        if (left > 0 && left < width / 2) {
          this.percent = Math.round((left / width) * 2 * 65)
          this.percent = this.percent ? this.percent : 1
        } else if (left > width / 2 && left < width) {
          this.percent = Math.round(((left - width / 2) / width) * 2 * 18 + 65)
        } else if (left < 0) {
          this.percent = 1
        } else if (left > width) {
          this.percent = 83
        }
      }
    },
    // 数字处理
    formatInput() {
      if (typeof this.money !== 'string') {
        this.money = this.money.toString()
      }
      // 先把非数字的都替换掉，除了数字和.
      this.money = this.money.replace(/[^\d.]/g, '')
      // 必须保证第一个为数字而不是.
      this.money = this.money.replace(/^\./g, '')
      // 保证只有出现一个.而没有多个.
      this.money = this.money.replace(/\.{2,}/g, '')
      // 保证.只出现一次，而不能出现两次以上
      this.money = this.money
        .replace('.', '$#$')
        .replace(/\./g, '')
        .replace('$#$', '.')
      // 只能输入小数点后8位
      const reg = '^(-)*(\\d+)\\.(\\d{' + 8 + '}).*$'
      this.money = this.money.replace(new RegExp(reg), '$1$2.$3')
    },
  },
}
</script>

<style lang="less" scoped>
.pledge {
  padding: 16px;
  position: relative;
  overflow: hidden;
  .h2 {
    font-family: DIN Pro;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 36px;
  }
  .mask {
    width: 100wh;
    height: 100vh;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
  }
}
.info {
  font-family: DIN Pro;
  font-size: 14px;
  font-style: normal;
  line-height: 18px;
  letter-spacing: 0em;
  text-align: left;
  display: flex;
  margin: 20px 0 30px 0;
}
.info :first-child {
  color: #86868b;
  min-width: 80px;
}
.info :last-child {
  color: #1d1d1f;
  font-weight: bold;
}

.title {
  font-family: DIN Pro;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 18px;
  color: #1d1d1f;
  margin: 8px 0;
}
.input {
  display: flex;
  height: 50px;
  justify-content: space-between;
  align-items: center;
  background: #f5f5f7;
  border-radius: 4px;
  padding: 0 15px;
  .type {
    width: 80px;
    height: 40px;
    margin-right: 5px;
    border-right: 1px solid #e6e6e9;
    font-family: DIN Pro;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 40px;
    color: rgba(0, 0, 0, 0.87);
  }
  input {
    width: 120px;
    background: none;
    outline: none;
    border: none;
    font-family: DIN Pro;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 26px;
    color: rgba(0, 0, 0, 0.87);
  }
  .unit {
    font-family: DIN Pro;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
    color: #14c393;
  }
}
.btn {
  height: 40px;
  background: #14c393;
  border-radius: 10px;
  color: #ffffff;
  font-family: DIN Pro;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 25px;
  margin-top: 16px;
}
.slider {
  width: 100%;
  height: 100px;
  position: relative;
  .slider_box {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #a1a1a6;
    width: 34px;
    height: 32px;
    background: #ffffff;
    border: 1px solid #e6e6e9;
    box-sizing: border-box;
    box-shadow: 0px 0px 3px rgba(101, 119, 134, 0.15),
      0px 0px 15px rgba(101, 119, 134, 0.2);
    border-radius: 8px;
    position: absolute;
    top: 0%;
    transform: translateY(-50%);
    z-index: 10;
  }
  .percent {
    position: absolute;
    top: 30px;
    width: 55px;
    height: 42px;
    background-color: #fff;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.08),
      0px 4px 8px rgba(50, 50, 71, 0.006);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 12px;
    line-height: 16px;
    font-family: DIN Pro;
    font-style: normal;
    font-weight: normal;
    color: #515154;
  }
}
.box {
  display: flex;
  flex: 2;
  margin-top: 16px;
  > div {
    flex: 1;
    text-align: right;
    position: relative;
  }
  .text {
    font-family: DIN Pro;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 16px;
    color: #515154;
    margin-right: 4px;
  }
  .col {
    height: 50px;
    margin-top: 18px;
    font-family: DIN Pro;
    font-style: normal;
    font-weight: bold;
    font-size: 12px;
    line-height: 16px;
    padding-right: 4px;
    padding-top: 4px;
  }
  .round {
    width: 8px;
    height: 8px;
    background: #ffffff;
    border: 1px solid #e6e6e9;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    position: absolute;
    bottom: -4px;
    right: -4px;
    z-index: 5;
    > div {
      width: 4px;
      height: 4px;
      background: #1d1d1f;
      border-radius: 50%;
    }
  }
  .low {
    background: rgba(15, 157, 88, 0.2);
    color: #0f9d58;
    border-bottom: 2px solid #0f9d58;
  }
  .danger {
    background: rgba(210, 63, 49, 0.2);
    color: #d23f31;
    border-bottom: 2px solid #d23f31;
  }
}
</style>

LIU~ZHE
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue简洁滑块：vue简洁滑块，一个简单的vue滑动组件
02-06
中文| 简洁的滑块 vue-concise-slider，一个简单的滑动组件，配置简单，支持自适应/全屏+按钮+分页，同时兼容移动端和PC端 版本 支持vue2.0 + beta版本 特色 简单配置 轻量（〜35kB压缩） 多种滑动样式 目前已实现 全屏自适应 移动端兼容 垂直滚动 定时自动切换 不定宽度滚动 无缝循环滚动 多级滚动 初步滚动 旋转滚动 page中加入自定义组件 使用广告位替代页面 自定义分页 居中滑动 新的coverflow 层级嵌入滑块 未来将实现 虚拟滑块 链接 安装 npm install vue-concise-slider --save 如何使用 < t
vue滑块组件
08-12
这是一个功能丰富的vue滑块组件。支持自适应，可以自定义各个部分的样式
vue-range-slider：Vue.js的简单滑块组件
02-05
视距滑块 Vue.js的简单滑块组件 产品特点 与本机input[type="range"]行为兼容 input ， change事件支持 触控装置支援 要求 Vue> = 2.0 安装 NPM npm install --save vue-range-slider 纱 yarn add vue-range-slider 用法 基本用法 只需导入vue-range-slider组件并在您的组件中使用它即可。 这些道具与本机input[type="range"]元素兼容，因此您可以像本机元素一样使用min ， max ， step等。 < template> < range-slid
slider:Vue 3滑块组件，具有多手柄，工具提示合并和格式化
04-30
Vue 3滑块 赞助商 其他图书馆 具有单选，多选和标记选项的Vue 3多选组件。 具有标签，自定义插槽和样式选项的Vue 3切换组件。 滑块功能 Vue 2和3支持 100％覆盖 ESM支持 完全可配置 单滑块 多个滑块 工具提示 格式设定 演示版 查看我们的演示。 安装 npm install @vueform/slider Vue 3的用法 < template> < div> < Slider xss=removed> </ div> </ template> < script > import Slider from ' @vueform/slider ' export default { components : { Slider, }, data () { return
Vue.js实现tab滑块效果
CodingNoob
04-17 4749
Vue中如何实现轮播图、滑块选择器
Java徐师兄的博客
06-13 2518
},},})},<p>当前值：{{ value }}</p>
【Vue实用功能】vue滑块组件验证
weixin_44590591的博客
04-26 1万+
vue滑块验证，图片验证，图片旋转验证，滑动验证 注：Vue3均使用按需引入 1、 基本滑块验证组件 // 安装 npm i vue-drag-verify2 -S // 引用： main.js 中引用 import Vue from 'vue' import dragVerify from 'vue-drag-verify2' Vue.use(dragVerify) <template> <div> <h3>模块验证：</h3>
vue项目双滑块组件
yinge0508的博客
11-24 1483
vue项目双滑块组件
Vue拖动滑块
weixin_48117629的博客
10-10 1136
vue滑块拖动样式的实现以及对应的方法，css 直接copy上去就行
【Vue3】滑动验证组件 | 滑动验证
此人太懒，没有任何简介
05-21 5684
前言 前端验证方式（bwrs） 人为滑动轨迹参考 当我们用手滑动验证滑块时，滑动轨迹为变速曲线运动，上下起伏分布不均、且变速运动。如下图3图 图1 图2 图3 人为/人机/脚本滑动判断 滑动滑块所用时间低于50毫秒判断为人机/脚本，200px的滑块，人为滑动没那么快。 判断滑动的线条起伏，若是纯直线，则为人机，因为人为滑动没那么直。 计算滑动速度，人为滑动肯定是变速滑动，若是匀速滑动则为人机。 若不是人为滑动，多数是直线匀速滑动，不会上下起伏。例如脚本滑动。 但部分机器/脚本可以模拟人
vue3组件篇 Slider
秋来九月八
01-11 4829
slider组件已成为前端开发中广泛使用的UI组件之一。Slider组件可以让用户在一个可选范围内选择一个值，如音量、进度条等。Slider组件的设计和功能可以有很多种变化，但通常包含一个滑块和一个轨道。用户可以通过拖动滑块来选择一个值，滑块的位置在轨道上表示该值。在前端开发中，Slider组件可以使用HTML、CSS和JavaScript实现。
vue图片时间轴滑动_Vue之时间轴组件
weixin_39984201的博客
12-22 1973
github地址：https://github.com/SunshineMibai/vue-timeline实现思路及步骤：页面分为四个部分1、左侧时间2、中间圆点3、右侧内容4、虚线部分最外层div,relative布局,方便子元素计算尺寸左侧时间固定宽度，显示时间(本demo:100px),之后absolute绝对定位(left:0)中间圆点absolute绝对定位,因为左侧宽度已经定为100...
Vue滑块验证码组件anji-captcha的使用
热门推荐
芸灵fly的博客
03-08 1万+
说明 最近需要改一下首页界面，将之前的字符验证码改成滑块验证码（这样更好用一些），找了一下发现了anji-captcha这个组件，效果如下 快速开始 前端 首先将仓库克隆下来->https://github.com/anji-plus/captcha.git，然后在自己的工程里copy需要的文件 1)复制view/vue/src/components/verifition文件夹,到自己工程对应目录下 复制view/vue/src/assets到自己工程对应目录下 2)安装请求和加密依
vue 滑块验证组件 笔记
weixin_51715424的博客
10-27 955
学习笔记
vue滑块验证，前端+后端代码及逻辑
贤和知识点收藏
01-02 9249
最近总部的漏洞扫描团队天天对我们的系统进行SQL注入，登陆破解..等等，搞得表示压力山大，其中对我们 的滑块验证码存在绕过登陆问题发报，最终把账号、密码登陆下线，今天终于把这块的bug进行修复了，先看效果： 第一步：弹出框架子模块_src/components/loginmove/slide-verify.vue <template> <div cl...
基于vue实现滑块动画效果
凭时间赢来的东西，时间肯定会为之作证
10-17 6353
主要实现：通过鼠标移移动、触摸元素、鼠标释放、离开元素事件来进行触发 创建了一个滑动盒子，其中包含一个滑块图片。通过鼠标按下或触摸开始事件，开始跟踪滑块的位置和鼠标/触摸位置之间的偏移量。然后，通过计算偏移量和起始时的位移值，设置滑动盒子的 transform 属性来实现滑动效果。使用 transition 属性，还可以为滑块添加滑动动画。
vue实现滑动切换：切换选项时滑块有滑动过渡的效果
weixin_45313351的博客
12-27 1018
封装的一个带有色块滑动的组件，切换选项时色块有滑动过渡的效果
vue2滑块校验手动实现，定义滑块和滑块背景图，拖动校验
weixin_71732962的博客
08-29 324
vue2滑块校验手动实现，定义滑块和滑块背景图，拖动校验
vue 可滑动的tab组件----vux插件tab的使用
Crazy_GirlLL的博客
10-25 883
原本vux的可滑动的tab是根据scrollWidth的长度来自动计算每一个tab-item的宽度的，因为包含这tab-item的tabBox这个div使用的是flex布局，而tab-item是它的子元素，它会自动沾满tabBox。当超出手机的可视宽度时,获取当前屏幕宽度，然后评分长度，计算之后，平均分给tab-item，因为每一个tab-item自己的样式中有设置的padding属性，所以间距相同，不需要额外为间距分配空间。1. 每个tab-item的间距是相同的，可定制。
vue2好用的滑块组件
最新发布
03-29
Vue2中有很多好用的滑块组件，以下是其中几个比较受欢迎的： 1. vue-slider-component：这是一个基于Vue2的滑块组件，支持单滑块和双滑块模式，可以自定义样式和事件处理。它具有丰富的功能和灵活的配置选项，适用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值