vue 自定义指令 directives

原文链接: vue 自定义指令 directives

上一篇: vue 事件修饰符 stop，capture，prevent

下一篇: js 坑。。。

vue 可以自己扩充指令

增加一个v-color ，根据该属性的值改变元素颜色

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="./vue.js" charset="utf-8"></script>
</head><body><div id="app"><div style="width:100px;height:100px" v-color="color"></div><input type="text" v-model="color" /></div><script type="text/javascript">new Vue({el: "#app",data: {color: "red"},directives: {color: function(el, bindings) {console.log(arguments)el.style.background = bindings.value}}})</script>
</body></html>

效果如图

指令传递的参数有5个

包括指令所在的元素，指令的值，以及指令的属性，比如v-color.red,red是指令的属性

v-color-red 对应的指令函数为 colorRed 采用驼峰命名法

创建一个指令，可以拖动元素，在点击该元素时将元素定位改为绝对定位，然后计算拖动的后的坐标，赋值给元素，拖放完毕后将事件函数重置为null,为了避免bug，将默认行为取消

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="./vue.js" charset="utf-8"></script><style>.drag {/* position: absolute; */width: 100px;height: 100px;background: blue;}</style>
</head><body><div id='app'><div v-drag class='drag'></div><div class='drag' v-drag></div><div class='drag' v-drag></div></div><script type="text/javascript">new Vue({el: '#app',directives: {drag: function(elem) {console.log(arguments)elem.onmousedown = function(e) {elem.style['position'] = 'absolute'var disx = e.pageX - elem.offsetLeftvar disy = e.pageY - elem.offsetTopconsole.log(disx, disy)document.onmousemove = function(e) {console.log(elem.style)elem.style.left = e.pageX - disx + 'px'elem.style.top = e.pageY - disy + 'px'console.log(elem.style.left, elem.style.top)}document.onmouseup = function() {console.log('取消事件')document.onmousemove = document.onmouseup = null}console.log("取消默认操作")e.preventDefault()}}}})</script>
</body></html>

可以任意拖动加上该标签的元素

vue 自定义指令 directives相关推荐

vue自定义指令directives同时传递多个参数
vue自定义指令directives同时传递多个参数 // 自定义指令v-hClick绑定for循环第二个参数,这里的inx还可以是其他标的,指令中可通过其做出判断在dom,将多个参数通过数组的格式 ...
vue自定义指令directives实现自动点击事件及自动点击第一个按钮
业务场景:点击弹窗默认加载第一个按钮的数据.vue自定义指令directives实现这个需求目录自动点击所有的按钮. 自动点击第一个按钮, 自动点击所有的按钮. <ul class=&quo ...
Vue2自定义指令directives简介
我们在学习vue的时候会学习多个指令,如v-show,v-text,v-pre等等.但如果我们想要完成一些现有指令无法完成的操作的时候,就应该使用自定义指令来实现我们想要的操作.所以现在我们就来简单讲 ...
vue 自定义指令 directive 全局 directives 局部 inserted update
vue 自定义指令需求效果全局 - 自定义指令代码局部 - 自定义指令代码自定义命令传值效果代码问点需求获取标签,扩展额外的功能效果全局 - 自定义指令代码 // mai ...
vue自定义指令封装节流_Vue自定义指令封装节流函数的方法示例
节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在<JavaScript高级程序设计>一书中有这样的一个例子 ...
clientsideevents能定义几个click事件_分享8个非常实用的Vue自定义指令
作者:lzg9527 https://juejin.cn/post/6906028995133833230 在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也 ...
html标签outclick,vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: 一般在需要 DOM 操作时我们都需要使用自定义指令的方式去实现,当然一些特殊的事件监听也可以使用指令,例 ...
9、Vue自定义指令
Vue自定义指令 1.vue指令和自定义指令 2.使用自定义指令 2.1.全局注册 2.2.局部注册 3.钩子函数 1.vue指令和自定义指令什么是指令? v-model.v-bind.v-on.v ...
【Vue2】自定义指令 directives 过滤器 filter
自定义指令 directives directives 的简写我们可以通过配置项 directives 来自定义指令自定义指令时直接写指令名 XXX,使用时需要加上前缀为 v-XXX <di ...

vue 自定义指令 directives

vue 自定义指令 directives相关推荐

最新文章

热门文章