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 ...
随机推荐
- sizeof运算符和strlen()函数
首先放上代码和运行结果.(在VC6.0上运行) #include<stdio.h> #include<string.h> int main(void) { char s1[]= ...
- 使用码云或GitHub搭建简单的个人网站
视频链接:https://www.bilibili.com/video/av64294697 码云: 1.新建一个仓库 路径名会影响你的个人网站的网址(自行修改),开源(公开),其他默认 ...
- pyspider 数据存入Mysql--Python3
一.不写入Mysql 以爬取哪儿网为例. 以下为脚本: from pyspider.libs.base_handler import * class Handler(BaseHandler): cra ...
- The four Day 给出一个平衡字符串,将它分割成尽可能多的平衡字符串
""" 在一个「平衡字符串」中,'L' 和 'R' 字符的数量是相同的. 给出一个平衡字符串 s,请你将它分割成尽可能多的平衡字符串. 返回可以通过分割得到的平衡字符串的 ...
- 《JAVA高并发编程详解》-Thread对象的启动
当我们用关键字new创建一个Thread对象时,此时它并不处于执行状态,因为没有调用start方法启动该线程,那么线程的状态为NEW状态,NEW状态通过start方法进入RUNNABLE状态. 线程一 ...
- SSM 前后端分离 这里controll层的返回值和之前那个不一样
1.先创建实体类: 2.创建mapper层 package cn.kgc.mapper; import cn.kgc.Account;import org.apache.ibatis.annotati ...
- bootstrap-combined.min.css 与 bootstrap.css冲突
使用bootstrap-paginator.js分页组件时,根据github上的demo,需要引入下列css: <link href="//netdna.bootstrapcdn.co ...
- 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理
编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...
- python day 14: 作业：开发一个能够多用户上传文件的FTP脚本
目录 python day 14 1. 要求 2. 自己写的程序目录 3. models模块 4. settings模块 5. tcp_server模块 6. client模块 7. 后记 pytho ...
- 原生js ajax与jquery ajax的区别
原生js ajax的调用: ajax({ type : "get", url : "02_ajax_get.txt", data : { "userN ...