vue的自定义指令
- 点击元素之外触发函数
<template>
<div v-clickoutside="clickItemOut"></div>
</template> const clickoutside = {
bind (el, binding, vnode) {
function documentHandler (e) {
if (el.contains(e.target)) {
return false
}
if (binding.expression) {
binding.value(e)
}
}
el.__vueClickOutside__ = documentHandler
document.addEventListener('click', documentHandler)
},
unbind (el, binding) {
document.removeEventListener('click', el.__vueClickOutside__)
delete el.__vueClickOutside__
}
} 组件中声明自定义指令(全局也可以,改写成全局各式就好了)
directives: { clickoutside } methods: {
clickItemOut (e) {
// 点击元素之外触发函数
}
vue的自定义指令的更多相关文章
- 最简单的方式理解Vue的自定义指令与混合
vue.js 自定义指令 钩子函数:bindinsertedupdatecomponentUpdatedunbind 钩子函数完整实例:html: <div id="hook-argu ...
- Vue.js自定义指令的用法与实例
市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...
- vue 通过自定义指令实现 置顶操作;
项目需求:要求当前项目每个页面滑到超出一屏的距离时,出现 backTop 按钮,点击则回到最顶端:俗称置顶操作: 因为涉及到的页面较多,每个页面都加肯定显得重复累赘,最终想到了 Vue 的自定义指令 ...
- vue怎么自定义指令??
最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大 <script> //指令钩子函数: /* bind 只调用一次,指令第一次绑定到元素的时调用 inserte ...
- Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式
前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...
- Vue.directive 自定义指令
一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在 ...
- vue中自定义指令
//vue中自定义指令 //使用 Vue.directive(id, [definition]) 定义全局的指令 //参数1:指令的名称.注意,在定义的时候,指令的名称前面,不需要加 v-前缀; 但是 ...
- Vue2.0 【第二季】第1节 Vue.directive自定义指令
目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令 一.什么是全局API? 二. Vue.directive自定义指令 三.自定义指令中传递的三个参数 四.自定义指令的生命周期 ...
- Vue 3自定义指令开发
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 什么是指令(directive) 在Angular和Vue中都有Direct ...
- vue.js自定义指令入门
Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和 ...
随机推荐
- mysql无法导入函数和存储过程解决方法
1. mysql> SET GLOBAL log_bin_trust_function_creators = 1; 2. 系统启动时 --log-bin-trust-function-creat ...
- 浏览器最小显示12px字体的解决方法
今天做打印标签,发现浏览器最小字体限制了12px,标签那么小,12px随便几个字就给占满了: 最后通过 transform:scale(1,0.8) 搞定: 这个属性允许将元素移动.压缩.旋转:这里 ...
- idea中Lombok的Buider构造器模式,getter/setter正确使用方法
public class ApiUser implements Serializable { private Long id; /*** * 用户类型:single,org(organization) ...
- Java-WebSocket调用报错:WebSocketClient objects are not reuseable
我的代码 import com.google.common.collect.ImmutableMap; import com.google.common.io.ByteArrayDataOutput; ...
- Mac PhpStorm 2017 破解
官网下载链接: https://www.jetbrains.com/zh/phpstorm/specials/phpstorm/phpstorm.html?utm_source=baidu&u ...
- 容器版单个jenkins实现CI/CD----带solo博客开源项目
实验架构: 192.168.0.96 gitlab 192.168.0.97 jenkins.docker-1.7 192.168.0.98 harbor.docker-1.7集群 jenkins安装 ...
- Python3之使用@property
在绑定属性时,如果我们直接把属性暴露出去,虽然写起来简单,但是,没有办法检查参数,导致可以把成绩随便改 >>> class Student(object): ... pass ... ...
- 01.轮播图之五 :一个 imageView也能 作 轮播
这个是最近才写的,本以为实现起来很有难度,需要更高深的理论, 写完之后,才发现自己错误的离谱: 之所以能用一个imageview 实现轮播 基于两点::: 使用 imageview 的layer 层设 ...
- 01.轮播图之一 :scrollView 轮播
接触的每个项目,都会用到轮播图的部分,轮播图都写了好多次,用过各种各样的方式写: 这篇总结的博客,我将分为几个篇幅写,希望写完这几篇博客之后,我能总结出自己写这个轮播的优缺和不同之处 scrollvi ...
- VMware VSAN 设计规则
1.集群节点数量:3-64台主机(生产环境最少4节点起,5.5版本支持32节点,6.0版本支持64节点),配置万兆网卡,主机规格应满足VSAN兼容性要求. 2.每台主机需配置磁盘组,每台主机的磁盘组数 ...