1. 点击元素之外触发函数

    <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的自定义指令的更多相关文章

  1. 最简单的方式理解Vue的自定义指令与混合

    vue.js 自定义指令 钩子函数:bindinsertedupdatecomponentUpdatedunbind 钩子函数完整实例:html: <div id="hook-argu ...

  2. Vue.js自定义指令的用法与实例

    市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...

  3. vue 通过自定义指令实现 置顶操作;

    项目需求:要求当前项目每个页面滑到超出一屏的距离时,出现 backTop 按钮,点击则回到最顶端:俗称置顶操作: 因为涉及到的页面较多,每个页面都加肯定显得重复累赘,最终想到了 Vue 的自定义指令  ...

  4. vue怎么自定义指令??

    最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大 <script> //指令钩子函数: /* bind 只调用一次,指令第一次绑定到元素的时调用 inserte ...

  5. Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式

    前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...

  6. Vue.directive 自定义指令

    一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在 ...

  7. vue中自定义指令

    //vue中自定义指令 //使用 Vue.directive(id, [definition]) 定义全局的指令 //参数1:指令的名称.注意,在定义的时候,指令的名称前面,不需要加 v-前缀; 但是 ...

  8. Vue2.0 【第二季】第1节 Vue.directive自定义指令

    目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令 一.什么是全局API? 二. Vue.directive自定义指令 三.自定义指令中传递的三个参数 四.自定义指令的生命周期 ...

  9. Vue 3自定义指令开发

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 什么是指令(directive) 在Angular和Vue中都有Direct ...

  10. vue.js自定义指令入门

    Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和 ...

随机推荐

  1. 阶段5 3.微服务项目【学成在线】_day17 用户认证 Zuul_08-用户认证-认证服务查询数据库-用户登录前端

    点击登陆注册链接 跳转到登陆的页面 门户的前端代码 当前路径base64编码 登陆的表单,在学习中心的前端. 这就是登陆的表单 这是表单的校验 请求服务端的接口 登陆请求的方法 请求的地址nginx上 ...

  2. Qt编写自定义控件49-飞机仪表盘

    一.前言 飞行仪表是测定和表示飞机数据的工具,飞机中必不可少的一部分,飞行员根据飞行仪表表示的数据才能正确地做出判断.一般飞机仪表包括高度表+空速表+垂直速率表+姿态仪+航向指示表+转弯协调表. 这次 ...

  3. spring boot入门学习---热部署

    1.maven文件 2.application.properties文件配置

  4. hyperledger学习资料

    http://www.cnblogs.com/aberic/p/7527831.htmlhttps://www.ibm.com/developerworks/cn/cloud/library/cl-t ...

  5. scala的wordcount

    import org.apache.spark.{SparkConf, SparkContext} import org.apache.spark.sql.SparkSession object Wo ...

  6. laydate年份选择,关闭底框,点击指定年份就选择然后关闭控件,翻页不选择也不关闭控件

    如下图,翻页不选择也不关闭.点击指定年份时再选择和关闭控件 代码如下 // 默认没有选择,把判断赋值当前时间 var iYearCode = parseInt(new Date().getFullYe ...

  7. airflow删除dag不在页面显示

    当我们需要把dag删除的时候,遇到了删除了相应的dag文件,但页面还是显示 这个时候需要重启airflow 的webserver  ps -ef|egrep  rm -rf /home/airflow ...

  8. Longest Line of Consecutive One in Matrix

    Given a 01 matrix, find the longest line of consecutive 1 in the matrix. The line could be horizonta ...

  9. IdentityServer4 学习一

    网上找的关于IdentityServer4的百度脑图 http://naotu.baidu.com/file/75b251257ce27cfa62e0ad7f47b75576?token=e2db61 ...

  10. Java基础---Java方法的重载Overload

    对于功能类似的方法来说,因为参数列表不一样,却需要记住那么多不同的方法名称,太麻烦. 方法的重载(Overload):多个方法的名称一样,但是参数列表不一样.好处:只需要记住唯一一个方法名称,就可以实 ...