Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
@xunlei/vue-clickout
Advanced tools
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>
参数 | 说明 | 类型 |
---|---|---|
exceptRefs | 要排除的Ref,默认为指令所在的DOM | Array |
# 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
Copyright (c) 2018 greenfavo
1.0.2 (2018-08-07)
FAQs
vue clickout事件,轻松解决“点击空白处消失”这种问题
We found that @xunlei/vue-clickout demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.