vue自定义点击空白隐藏其他标签

╰+攻爆jí腚メ 2021-09-08 16:42 331阅读 0赞

<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>

发表评论取消回复

表情：

评论列表（有 0 条评论，331人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML点击显示、点击隐藏details 标签

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(r

雨点打透心脏的1/2处/ 2024年03月16日 21:32/ 0 赞/ 32 阅读

相关 js点击其他地方隐藏

js点击其他地方隐藏： <div class="container"> <button id="clickMe">click me</button>

刺骨的言语ヽ痛彻心扉/ 2023年07月10日 15:34/ 0 赞/ 13 阅读

相关 vue自定义指令防止重复点击

PS：参考这篇博客的方法：[原博][Link 1]，亲测有效！！ 1、创建preventReClick.js文件 import Vue from 'vue'

比眉伴天荒/ 2023年01月20日 13:48/ 0 赞/ 237 阅读

相关点击其他区域时隐藏元素

效果说明，除了当前区域外，点击其他任何地方，都会让当前元素区域隐藏。思路很简单，点击整个document,让它隐藏，一层一层向上冒泡，当点击隐藏接触到当前区域时，也就是你不

不念不忘少年蓝@/ 2022年06月05日 01:26/ 0 赞/ 268 阅读

相关实现点击页面其他地方，隐藏div（vue）

方法一：　　　　通过监听事件 document.addEventListener('click',function(e){

布满荆棘的人生/ 2022年05月09日 09:34/ 0 赞/ 427 阅读

相关点击其他区域，隐藏div

<div id='test'></div> 点击其他区域关闭这个div <script type="text/javascript"> $(document).bi

亦凉/ 2022年05月04日 03:58/ 0 赞/ 318 阅读

相关微信小程序实现点击空白隐藏

怎样实现jq中的slideUp或者slideDown这种动画效果呢，我的思路是用css3的transform: translateY（）属性，给需要动画的元素添加上一个动画cl

た入场券/ 2022年03月08日 02:50/ 0 赞/ 457 阅读

相关实现点击空白区域隐藏下拉弹窗

背景 -------------------- 中后台项目依赖Element UI 组件库，组件库中Select 选择器、Popover 弹出框等组件弹出内容后，点击组

青旅半醒/ 2022年02月20日 12:55/ 0 赞/ 1328 阅读

相关点击其他a标签原a标签恢复

假设有3个a标签，当点击第一个标签时，标签是一种颜色，不点击时，保持点击后的颜色，但点击其他a标签，该标签恢复颜色。 css: a{ text-d

我不是女神ヾ/ 2021年11月01日 15:10/ 0 赞/ 547 阅读

相关 vue自定义点击空白隐藏其他标签

<div class="head\_right" v-clickoutside="outsideClose"> <div c

╰+攻爆jí腚メ/ 2021年09月08日 16:42/ 0 赞/ 332 阅读