vue-cli 自定义指令directive 添加验证滑块
欢迎加入前端交流群来获取视频资料以及前端学习资料:749539640
----------------------------------------------------------
转载文章请注明出处!
----------------------------------------------------------
预览地址:https://jsfiddle.net/wangzhichao/dx9yf20w/
gif截图软件帧数略低。。。。
vue项目注册登录页面遇到了一个需要滑块的功能,网上看了很多插件发现都不太好用,于是自己写了一个插件供大家参考;
用的是vue的自定义指令direcive,只需要在需要的组件里放入对应的标签嵌套即可;
template:
1 <template> 2 <div> 3 <div class="movebox" > 4 <div class="movego"></div> 5 <div class="txt" id="txt">拖动滑块验证</div> 6 <div class="move moveBefore" v-move></div> 7 </div> 8 <div class="movebox" > 9 <div class="movego"></div> 10 <div class="txt" id="txt">拖动滑块验证</div> 11 <div class="move moveBefore" v-move></div> 12 </div> 13 </div> 14 </template>
项目中使用的是scss;
css代码:
1 <style lang="scss" scoped> 2 3 4 .movebox{ 5 position: relative; 6 background-color: #e8e8e8; 7 width: 300px; 8 height: 34px; 9 line-height: 34px; 10 text-align: center; 11 .txt{ 12 position: absolute; 13 top: 0px; 14 width: 300px; 15 -moz-user-select: none; 16 -webkit-user-select: none; 17 user-select: none; 18 -o-user-select: none; 19 -ms-user-select: none; 20 } 21 .movego{ 22 background-color: #7ac23c; 23 height: 34px; 24 width: 0px; 25 } 26 .move{ 27 position: absolute; 28 top: 0px; 29 left: 0px; 30 width: 40px; 31 height: 34px; 32 border: 1px solid #ccc; 33 cursor: move; 34 } 35 .moveBefore{ 36 background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==") no-repeat center; 37 38 39 } 40 .moveSuccess{ 41 background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==") no-repeat center; 42 43 44 } 45 } 46 </style>
jquery已经在全局引入,需要jquery全局引入的,可以看我的上一篇博客,里面有jquery的引入;
script:
<script>export default {components: {},data() {return { }},mounted() {//console.log($('选择器')) },methods: {},directives: {move(el) {el.onmousedown = function(e) {var X = e.clientX - el.offsetLeftdocument.onmousemove = function(e) {var endx = e.clientX - Xel.className = 'move moveBefore'el.style.left = endx + 'px'// console.log(el.parentNode.children[0])var width = $('.movebox').width() - $('.move').width()el.parentNode.children[0].style.width = endx + 'px'el.parentNode.children[1].innerHTML = '拖动滑块验证'//临界值小于if (endx <= 0) {el.style.left = 0 + 'px'el.parentNode.children[0].style.width = 0 + 'px'//$('.movego').width(0) }//临界值大于// console.log(el.style.left)if (parseInt(el.style.left) >= width) {el.style.left = width + 'px'el.parentNode.children[0].style.width = width + 'px'el.parentNode.children[1].innerHTML = '验证通过'el.className = 'move moveSuccess'el.onmousedown = null}}}document.onmouseup = function() {document.onmousemove = null}}} }</script>
谢了近20分钟,调试好了,效果还是比较可以的:
用的gif制作软件略卡;
转载于:https://www.cnblogs.com/wangzhichao/p/7692277.html
vue-cli 自定义指令directive 添加验证滑块相关推荐
- vue从入门到进阶:自定义指令directive,插件的封装以及混合mixins(七)
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...
- 29.VUE自定义指令directive和inserted
VUE自定义指令directive和inserted 1.什么事自定义指令 1.2使用自定义指令的方式 2.设置自定义组件 2.1 设置全局指令 2.2 设置私有指令 2.3 钩子函数 3. 案例 1 ...
- VUE通过自定义指令,只允许输入大写英文以及数字
在写之前需要知道几个功能对象的作用: 首先输入框输入的情况有键盘输入和粘贴输入的情况 用到的组件有: input.onblur-onblur: 事件会在对象失去焦点时发生.Onblur 经常用于Jav ...
- vue 项目自定义指令实现防抖
自定义v-debounce指令实现click事件防抖 该指令绑定的方法暂不支持传递参数,如需要传参数可以参考另一篇博客,防抖组件的实现 工具uitls文件夹创建debounce.js文件 代码如下 i ...
- 第三十九篇 自定义指令 - directive
前面讲了关于在Vue中如何来进行封装swiper组件的内容,本篇内容讲到使自定义组件,讲这块内容也是同样为了后续再次回顾封装swiper组件变化做铺垫内容,那么什么是自定义指令,在前面的内容讲过了好些 ...
- VUE:自定义指令(directives )选项的用法
自定义指令分为全局指令和局部指令.全局指令可在任意vue组件内生效,局部指令仅在注册了指令的组件内生效. 全局指令和局部指令写法几乎相同.全局指令是在main.js内使用Vue.directive注册 ...
- js:Vue.js自定义指令实现scroll下滑滚动翻页
Vue.js自定义指令实现scroll下滑滚动翻页 核心代码 import Vue from 'vue'// v-scroll Vue.directive('scroll', {bind(el, bi ...
- VUE使用自定义指令对普通 DOM 元素进行底层操作
使用vue的自定义指令来整合某个重复使用的底层操作 举个聚焦输入框的例子,如下: 当页面加载时,该元素将获得焦点 (注意:autofocus 在移动版 Safari 上不工作).事实上,只要你在打开这 ...
- Vue的自定义指令以及Vue自定义指令的应用场景
前言 一.Vue的自定义指令分为? vue中除了核心功能内置的指令外,也允许注册自定义指令.有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令. 自定义指令分为全局自定义指令和局部的自 ...
最新文章
- Spark和Hadoop,孰优孰劣?
- 10种不要钱的护肤法则 - 生活至上,美容至尚!
- python接口测试第二期_python2 接口测试一般方法.
- python中的字体英文名_获取中文字体的英文名字
- c 连接mysql总是失败_Windows 下用C++连接MYSQL失败
- micropython 驱动 移植_MicroPython v1.12 版本更新
- 计算机应用论文投稿模板,标准期刊论文格式模板
- 最厉害的象棋软件_太牛了!象棋史上最厉害人机高手竟弃车跟软件对杀,就问你敢不敢...
- 基于OpenCV的 桌面手机的尺寸测量
- 最大数 (Java算法每日一题)
- 添加一个pv到vg后,误删新加入的pv,报 pv * not found or rejected by a filter
- 信息流广告的核心是什么(信息流推广的核心操作和优化思路)
- Maven使用(1)
- 恶心的英特尔的RST驱动
- 你真的了解什么是Beta测试?完整测试指南
- 51单片机-串口通信
- HTML5支持服务器发送事件
- 安卓 Bitmap 高效加载
- 金美信消费金融AB面:大赚之下的超高利率“怪圈”
- 我最喜欢的一位女明星哦!