vue clickout事件，轻松解决“点击空白处消失”这

Vue clickout,轻松解决“点击空白处消失”这种问题

https://xunleif2e.github.io/vue-clickout/demo/dist/index.html

npm i @xunlei/vue-clickout -S 注册指令

clickout事件是通过指令的方式实现的，因此使用前需注册指令，可以全局注册也可以局部注册。

import Vue from 'vue' import VueClickout from '@xunlei/vue-clickout' Vue.use(VueClickout) 局部注册

<template> <div class="face" v-clickout @clickout="open=false"> <a href="javascript:;" @click="open=!open">表情</a> <div class="emoji"> <li title="开心"><span class="ico-emoji emoji-kaixin"></span></li> <li title="可爱"><span class="ico-emoji emoji-keai"></span></li> </div> </div> </template> <script> import { clickout } from '@xunlei/vue-clickout' export default { data () { return { open: false } }, // 注册指令 directives: { clickout } } </script> 用法

<template> <div class="item-comment"> <div class="comment-user"> <span class="user-name">疯狂的迷弟: </span> <p class="text-comment">王祖贤越看越美</p> <a href="javascript:;" class="reply-btn" @click="showReply=!showReply" ref="replyBtnRef">回复</a> </div> <div class="reply" v-clickout="['replyBtnRef']" @clickout="showReply=false"> <div class="reply-area" v-show="showReply"> <input type="text" class="ipt-reply"> <div class="reply-option"> <button>发送</button> </div> </div> </div> </div> </template> <script> export default { data () { return { showReply: false } } } </script> 参数

# install deps npm install # serve demo at localhost:8080 npm run dev # build library and demo npm run build # build library npm run build:library # build demo npm run build:demo # pre publish npm run prepublish License

MIT

Copyright (c) 2018 greenfavo