vue自定义点击空白隐藏其他标签
<div class="head_right" v-clickoutside="outsideClose">
<div class="keshi" @click="showks">
科室<van-icon name="play" color="#004593" size="16px"></van-icon>
<div class="kslist" v-show="ksshow">
<div class="kstop">
<img src="./img/sanjiao.png">
</div>
<ul>
<li v-for="item in all_tags" :key='item.name' @click='selectTags(item.name)' v-html='item.name'></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
let App=new Vue({
el:"#section",
data:{
show:true,
keyshow:false,
current:null,
ksshow:false,
ksshowtime:false,
key_tags:[],
all_tags:[],
},
directives: {
clickoutside: {
bind(el, binding, vnode) {
function documentHandler(e) {
if (el.contains(e.target)) {
return false
}
if (binding.expression) {
binding.value(e)
}
}
function KeyUp(e) {
if (e.keyCode == 27) {
if (binding.expression) {
binding.value(e)
}
}
}
el.__vueClickOutSize__ = documentHandler
el.__vueKeyup__ = KeyUp
document.addEventListener('keyup', KeyUp)
document.addEventListener('click', documentHandler)
},
unbind(el, binding) {
document.removeEventListener('click', el.__vueClickOutSize__)
delete el.__vueClickOutSize__
document.removeEventListener('keyup', el.__vueKeyup__)
delete el.__vueKeyup__
}
},
},
methods:{
showKey(){
this.keyshow=true;
},
hideKey(){
this.keyshow=false;
},
outsideClose(){
this.ksshowtime = false;
this.ksshow=false;
},
//会议专题 科室显示与隐藏
showks(event){
this.ksshow=!this.ksshow;
this.ksshowtime = false;
},
},
beforeMount:function(){
},
mounted:function(){
}
})
</script>
vue自定义点击空白隐藏其他标签相关推荐
- 微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
本文实例讲述了微信小程序实现slideUp.slideDown滑动效果及点击空白隐藏功能.分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路 ...
- 微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例 1
本文实例讲述了微信小程序实现slideUp.slideDown滑动效果及点击空白隐藏功能.分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路 ...
- ios全局点击空白隐藏keyboard
废话不多说直接上代码,一个appDelegate的分类方法 #import "AppDelegate.h" @interface AppDelegate (DismissKeybo ...
- a标签 vue 动态点击_vue实现a标签点击高亮方法
下面我就为大家分享一篇vue实现a标签点击高亮方法,具有很好的参考价值,希望对大家有所帮助. 如下所示: lang="en"> charset="UTF-8&quo ...
- a标签 vue 动态点击_vue 中a标签如何实现点击赋值
vue 中a标签如何实现点击赋值 发布时间:2020-11-04 16:56:07 来源:亿速云 阅读:165 vue 中a标签如何实现点击赋值方式?相信很多没有经验的人对此束手无策,为此本文总结了问 ...
- Vue textarea 和input 开发ios点击空白地方键盘不收起问题
vue h5 ios点击屏幕不收起键盘 --链接 Vue textarea 和input 开发ios点击空白地方键盘不收起问题 1.创建一个index.js文件 //index.js//解决ios点击 ...
- Android 点击空白出隐藏软键盘
/*** 点击空白位置 隐藏软键盘*/@Overridepublic boolean onTouchEvent(MotionEvent event) {if (null != this.getCurr ...
- vue动态点击切换css样式且子元素动态显示和隐藏
vue动态点击切换css样式并子元素动态显示和隐藏 <template><div v-for="i in 5" class="el-personal&q ...
- android 点击空白退出,Android 点击空白处隐藏键盘
方法一:使用android的分发机制(代码稍微有点多) /** * 实现点击空白处,软键盘消失事件 * @param ev * @return */ @Override public boolean ...
最新文章
- 为选择屏幕的字段设置F4帮助
- spring-使用配置文件完成JdbcTemplate操作数据库-c3p0
- OpenCV演示代码以查找图像中的轮廓(附完整代码)
- tabnavigator_使用TabNavigator在Firefox中享受桌面Alt-Tab样式导航
- java并发编程（十七）内存操作总结
- word文本转换为表格 ，如果文本是以硬回车的转换方式
- 自己做的一个简历网页，有很多bug解决不了，有没有大神帮我看看
- TensorFlow 学习（六） —— TensorFlow 与 numpy 的交互
- c语言 取随机字符串,C语言之获取32字节随机数的字符串
- TurboMail 邮件系统V5.2.0新品发布会盛况直击
- ASP.NET MVC3官方示例Music Store(音乐商店) --简易中文教程
- 第17课：郭盛华课程_VB编程之菜单界面的设计
- 推荐一款华为最新的自动化代码检查工具
- 富兰克林的十三种美德
- ffmpeg视频裁剪
- VISTA下载全集（下）
- matlab NCA,Neighborhood Component Analysis (NCA) Feature Selection
- fun在c语言中意义与用法,fun的用法
- IDEA15 tomcat问题
- Python 多线程曲线救国