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 ...
随机推荐
- 【rt-thread】2、尝试用ENV添加18b20传感器
尝试用ENV添加18b20传感器 rt-thread能通过env工具添加或者裁剪工程,这里调试的是通过ENV添加18b20传感器. 具体程序实现,可以参考以下资料 https://www.rt-thr ...
- C# vb .net实现位图蒙版特效滤镜
在.net中,如何简单快捷地实现Photoshop滤镜组中的位图蒙版特效呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第 ...
- mysql-多表联查(实例)
目录 多表查询 笛卡尔积查询 内连接查询 左外连接查询 右外连接查询 全外连接查询 多表查询 笛卡尔积查询 笛卡尔积查询:就是两张表相乘,若左边表有M条信息,右边表有N条信息,那么查询显示的信息总共为 ...
- [JLOI2014]松鼠的新家 (树剖)
题目 P3258 [JLOI2014]松鼠的新家 解析 非常裸的一道树剖题 链上修改+单点查询的板子 记录一下所经过的点\(now[i]\),每次更新\(now[i-1]到now[i]\) 我们链上更 ...
- Function.prototype.call.apply作用详解
关于call()和apply()基本用法可以参阅如下两篇文章: (1).call方法参阅JavaScript call()一章节. (2).apply方法参阅JavaScript apply()一章节 ...
- 140款Android开源优秀项目源码
BeautifulRefreshLayout-漂亮的美食下拉刷新 https://github.com/android-cjj/BeautifulRefreshLayout/tree/Beautifu ...
- linux搭建stm32开发环境
下载stm32固件库 创建目录 libs目录放stm32固件库,src放用户源码,inc放用户头文件 # mkdir libs src inc 复制文件 将STM32F10x_StdPeriph_Li ...
- 【书评:Oracle查询优化改写】第四章
[书评:Oracle查询优化改写]第四章 BLOG文档结构图 一.1 导读 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它你所不知道的知识,~O(∩_∩)O~: ① check的 ...
- 大数据系列文章-Hadoop基础介绍（一）
Hadoop项目背景简介 2003-2004年,Google公开了部分GFS个Mapreduce思想的细节,以此为基础Doug Cutting等人用了2年的业余时间,实现了DFS和Mapreduce机 ...
- tac命令以及各种linux文件查看命令
有许多命令都可以查看文件,不同的命令有不同的优点,可以针对不同的需要分别选择命令以提高效率: cat 由第一行开始显示内容,并将所有内容输出 tac 从最后一行倒序显示内容 ...