Vue.directive全局自定义指令案例
今天正好这个知识点有点淡忘了，就随笔一下吧：
Vue.directive(参数1，参数2)
参数1：指令名称，如"drag"
参数2：指令要实现的回调函数，其中回调函数中也有两个参数，其中：
参数1：指令绑定的元素，如 el
参数2：是一个对象，其中有两个参数（value,modifiers）
value:代表表达式要返回的结果
modifiers:指令的修饰符
话不多说，直接脑补一波实例：以拖拽为例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin:0;padding:0}
.box{
width:100px;
height: 100px;
background: red;
position: absolute;;
}
</style>
</head>
<body>
<div id="app"> <div class="box" v-drag.x="show"></div>
<div class="box" v-drag.y="show"></div>
</div>
</body>
</html>
<script src="vue.js"></script>
<script> Vue.directive("drag",(el,{modifiers,value})=>{
//ES6中新增的解构赋值
let {x,y} = modifiers
el.onmousedown = function(e){
var disX = e.offsetX;
var disY = e.offsetY;
e.preventDefault();
document.onmousemove = function(e){
var l = e.clientX - disX;
var t = e.clientY - disY;
//如果表达式的结果是false就不拖拽
if(!value)return; if(x){
el.style.left = l+"px";
} if(y){
el.style.top = t+"px";
} if((!x && !y)&&value){
el.style.left = l+"px";
el.style.top = t+"px";
} }
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null; }
}
}) var vm = new Vue({
el:"#app",
data:{
show:true
}
})
</script>
Vue.directive全局自定义指令案例的更多相关文章
- vue.js实现内部自定义指令和全局自定义指令------directive
在Vue中,我们平时数据驱动视图时候,内部自带的指令有时候解决不了一些需求,这时候,Vue给我们一个很好用的东东 directive 这个单词是我们写自定义指令的关键字哦 之定义指令为我们提供了几个钩 ...
- Vue.js：自定义指令
ylbtech-Vue.js:自定义指令 1.返回顶部 1. Vue.js 自定义指令 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令. 下面我们注册一 ...
- Vue笔记--通过自定义指令实现按钮操作权限
经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记. Vue实现的中后台管理系统.按钮操作权限的空置一般都是通过自定义指令Vue.directive. <el-button ...
- vue组件、自定义指令、路由
1.vue组件 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...
- vue教程2-07 自定义指令
vue教程2-07 自定义指令 自定义指令: 一.属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); <div v-re ...
- vue全局自定义指令-元素拖拽
小白我用的是vue-cli的全家桶,在标签中加入v-drap则实现元素拖拽, 全局指令我是写在main.js中 Vue.directive('drag', { inserted: function ( ...
- 【Vue】通过自定义指令回顾 v-内置指令
Vue.js 的各种指令(Directives)更加方便我们去数据驱动 DOM,例如 v-bind.v-on.v-model.v-if.v-for.v-once 等内置指令,这些指令的职责就是当表达式 ...
- 在vue中创建自定义指令
原文:https://dev.to/ratracegrad/creating-custom-directives-in-vue-58hh 翻译:心上有杨 指令是带有 v- 前缀的特殊属性.指令的作用是 ...
- 在Vue中通过自定义指令获取元素
vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的: 在 vue.js 中,获取某个DOM Eleme ...
随机推荐
- Shell编程入门基础上
前言 为什么学 Shell Shell 脚本语言是实现 Linux/UNIX 系统管理及自动化运维所必备的重要工具, Linux/UNIX 系统的底层及基础应用软件的核心大都涉及 Shell 脚本的内 ...
- git 学习笔记---操作标签
如果标签打错了,也可以删除: $ git tag -d v0.1 Deleted tag 'v0.1' (was f15b0dd) 因为创建的标签都只存储在本地,不会自动推送到远程.所以,打错的标签可 ...
- linux 文件夹分享
1.在 linux 安装 samba,安装好之后 配置文件在 /etc/samba/smb.conf 目录下. yum install samba samba-client(yum install s ...
- vim插件(vim-emmet)安装步骤
vim安装插件 vim-emmetvim-emmet网址 https://www.vim.org/scripts/script.php?script_id=2981pathogen.vim网址 ...
- vue-quill-editor回显时移除焦点
直接复制开用 解决在回显数据的时候会默认聚焦 this.$refs.myQuillEditor.quill.enable(false); setTimeout(() => { this.$ref ...
- React-Native中使用到的一些JS特性
React Native - 调试技巧及调试菜单说明(模拟器调试.真机调试) https://www.hangge.com/blog/cache/detail_1480.html 1,解构赋值——de ...
- DNS 原理入门 - 阮一峰（转载）
DNS 原理入门 作者: 阮一峰 日期: 2016年6月16日 DNS 是互联网核心协议之一.不管是上网浏览,还是编程开发,都需要了解一点它的知识. 本文详细介绍DNS的原理,以及如何运用工具软件 ...
- golang执行Linux和Windows命令
1. 可接收变参命令 package main import ( "fmt" "os" "os/exec" "strings&qu ...
- golang中逗号ok模式_转
,ok,第一个参数是一个值或者nil,第二个参数是true/false或者一个错误error.在一个需要赋值的if条件语句中,使用这种模式去检测第二个参数值会让代码显得优雅简洁.这种模式在go语言编码 ...
- 在CentOS 7上修改主机名的方法
这次我们来讲解一下如何在CentOS 7环境上修改主机名 1.从VMware上登录CentOS 7的虚拟机,并以root用户登录. 2.查看未修改前的主机名 1>.我们可以通过文件hostnam ...