精华内容
下载资源
问答
  • 1.vue点击下拉菜单外的其他区域就关闭菜单 // this.showMenuList 为下拉菜单显示判断 document.addEventListener('click', (e) => { if (!this.$el.contains(e.target)) this.showMenuList = false }) ...

    1.vue中点击除下拉菜单外的其他区域就关闭菜单

    	// this.showMenuList  为下拉菜单的显示判断
    	mounted() { 
          document.addEventListener('click', (e) => { 
          	if (!this.$el.contains(e.target)) this.showMenuList = false 
          }) 
        }
    

    注:EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上,当该对象触发指定的事件时,指定的回调函数就会被执行。

    展开全文
  • 这里我们点击菜单,下拉菜单就会显示点击下拉菜单以外的区域就会隐藏。 这是一个简单的例子: 这里增加一个选项,就是当我们按下esc键的时候,下拉菜单也可以关闭。 先贴出代码: <template> &...

    我们来看下常见的下拉菜单:
    在这里插入图片描述

    这里我们点击菜单,下拉菜单就会显示,点击下拉菜单以外的区域就会隐藏。

    这是一个简单的例子:
    在这里插入图片描述

    这里增加一个选项,就是当我们按下esc键的时候,下拉菜单也可以关闭。
    先贴出代码:

    <template>
      <div v-cloak v-clickoutside="outsideClose" class="dropmain">
        <div @click="show = !show" class="dropbutton">
          测试下拉菜单
        </div>
        <div class="dropdown" v-show="show">
          <P>点击下拉菜单显示菜单内容,点击外部区域可关闭下拉菜单</P>
        </div>
      </div>
    </template>
    
    <script>
      export default {
        name: "DropDown",
        data() {
          return {
            show: false,
          }
        },
        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: {
          outsideClose() {
            this.show = false
          }
        }
      }
    </script>
    
    <style scoped>
      [v-cloak] {
        display: none;
      }
    
      .dropmain {
        width: 150px;
      }
    
      .dropbutton {
        display: block;
        width: 100%;
        padding: 5px;
        color: #fff;
        background-color: #39f;
        text-align: center;
        font-size: 12px;
        border-radius: 4px;
        cursor: pointer;
        outline: none;
        user-select: none;
      }
    
      .dropdown {
        width: 100%;
        padding: 5px;
        font-size: 12px;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
        text-align: left;
        margin-top: 2px;
      }
    
    </style>
    
    

    我们先来看下el,binding,vnode分别是什么:
    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    其中这里的主要逻辑是:如果点击区域是在元素内部,那么返回。如果绑定了expression,在这里我们需要的是一个函数,那么就执行用户自定义的函数方法。

    注意这里的expression可能值有很多,如果你不注意写了其他的那么程序可能不会达到你的预期。

     binding.value(e)
    

    这个大家在看上面的具体内容时都知道了 binding.value是一个函数,用来执行用户绑定的expression,也就是函数。
    在这里插入图片描述

    el.__vueClickOutSize__
     el.__vueKeyup_
    

    这两个是我们自己声明的变量,因为在vue2.x中不能使用this.xxxx的形式在上下文中声明一个变量,它们的作用是在unbind函数中也就是组件或元素销毁的时候移除事件监听,不然,这些事件监听会一直存在在内存中。

    展开全文
  • 现有一个需求,点击按钮button,显示下拉选项,点击红色区域之外的地方,下拉消失!    直接上代码【通过vue的自定义指令进行操作】: html: js: 1、directives自定义指令,具体看官网api 2、...

    现有一个需求,点击按钮button,显示下拉选项,点击红色区域之外的地方,下拉消失! 

     

    直接上代码【通过vue的自定义指令进行操作】:

    html:

    js:

    1、directives自定义指令,具体看官网api

    2、methods方法区域

    备注:

    1、设置自定义事件v-clickoutside

    2、通过selectFlag【true|false】来控制显示隐藏,有时间的话,可以用transform做上动画的效果

    参考:https://blog.csdn.net/qq_40190624/article/details/82184103

    展开全文
  • Vue 下拉菜单

    2018-04-06 02:37:44
    在做一个下拉菜单,如图所示,需要在鼠标移动(非点击)到上图1区域时显示下拉菜单,鼠标移出下图2区域的时候隐藏下拉菜单。 下拉菜单布局如下: &lt;div class="tab-module" @mouseenter="...

    在做一个下拉菜单,如图所示,需要在鼠标移动(非点击)到上图1区域时显示下拉菜单,鼠标移出下图2区域的时候隐藏下拉菜单。

    下拉菜单布局如下:

    <div class="tab-module" @mouseenter="showDropmenu()" @mouseleave="hideDropmenu()">
        <span>手动组卷</span>
        <div class="tab-dropdown" v-show='dropmenuActive'>
            <div class="link" @click="shiftPage(20)">按章节</div>
            <div class="link" @click="shiftPage(21)">按知识点</div>
        </div>
    </div>
    复制代码

    dropmenuActive是一个bool值用来控制下拉菜单的显示/隐藏。

    展开全文
  • 在做项目的路上总是bug不断,上手公司的项目,然后去修改一个功能,需求大概是这个样子的,通过一个下拉菜单实现一个table的显示,并且新建table中的行或者修改table表头的下拉菜单可以将那一行的单价和单位两个属性...
  • 点击会话列表某个会话,右击下拉菜单 自己懒得写,于是使用了组件 直接上代码 思路是先让下拉菜单隐藏,右击显示,再通过iview源码,设置显示位置 <template> <div> <h1>jkfjjfkfkjk</h1&...
  • 最近在搞一个需求:搜索框,输入时显示联想词下拉列表,当点击联想词跳转到搜索页,如果点击其他部分收起联想的下拉列表。接到需求后第一反应用失焦(blur)去做收起操作避免body的监控,随后就踩坑里了,下面情景...
  • 平时项目中,经常会做一些下拉菜单等效果,这种效果可能会需要通过一个按钮来控制显示隐藏,并且当点击页面其他空白区域时,也要将其隐藏。 简单写个Demo <!-- 按钮 --> <button @click.stop=ShowHidden...
  • iview的Dropdown 下拉菜单之选中

    万次阅读 2018-08-23 18:54:18
    介于项目本身采用的技术是vue+iview,所以使用了iview自带的“Dropdown 下拉菜单”。但是自带的只展示样式,点击不同的选项,需要显示点击的选项,需要自己手动去编写。下面记录一下实现的代码:(这里在赘述一下要...
  • 平时项目中,经常会做一些下拉菜单等效果,这种效果可能会需要通过一个按钮来控制显示隐藏,并且当点击页面其他空白区域时,也要将其隐藏。 简单写个Demo <!-- 按钮 --> <button @click.stop="Show...
  • 先上一张效果图 页面结构: <header> <a class="nav active1"> vue </a> <a class="nav"> react </a> <a class="nav"> 小程序 </a&g...
  • 1、使用uniapp的sl-filter组件时,在浏览器中可以正常看到下拉筛选组件如下图1: 2、在app中无法看到条件筛选控件,如下图2: 3、找到sl-filter中sl-filter.vue中的“created”方法,将#ifdefH5和#endif删掉,再...
  • 今天做的是实现点击input框时弹出下拉选择菜单点击下拉列表中要搜索将数据赋值给input框,然后再加个清楚按钮,当input框没有数据的时候隐藏,当有数据输入的时候就显示改功能,下面是功能演示。  首先我们先来...
  • 该函数 Function({row, rowIndex, column, columnIndex, cell}, event) 的返回值用来决定是否显示内容右键菜单 Function — 内置的菜单 code 列表: 编码 描述 CELL_RESET 清除单元格数据的值 CELL_...
  • 顶部导航栏 ...右边是用户头像,有个下拉菜单 <template> <header> <div class="l-content"> <el-button plain icon="el-icon-menu" size="mini" @click="collap..
  • day04 一. 商品管理-商品分类 二....三.... 一....使用vue-table-with-tree-grid组件 ...显示对话框 根据点击下拉菜单来判断要添加的分类等级是一级、二级、三级( 默认一级 ) 获取父级分类列表(type=2) 级
  • 前言: 如果使用elementui这个框架来开发系统,那么我们几乎都会使用到NavMenu 组件。我们可能需要菜单根据我们...如果菜单下有二级下拉,那么点击下拉二级菜单高亮,并且一级菜单也高亮(刷新页面后依旧保持高亮)...
  • vue.js框架制作图片上传组件代码https://www.mk2048.com/demo/demo_target_desc.php?id=hb1a12k0jvue.js图片上传组件,支持批量上传、拖到图片上传、显示文件数量和大小等功能代码,适用于手机端的图片上传代码...
  • 70款经典Dreamweaver插件

    2011-09-21 12:42:27
    mx196756_turkeyscounties 80多个国家的一个下拉菜单 FlashImage 响应鼠标事件的图片渐显渐隐效果 real_networks 在页面中插入流式播放的Real视频和音频文件 MX131662_pdreloadxtension 从新加载Dreamweaver的各项...
  • HQChart实战教程7-自定义显示手势点击K线显示信息 HQChart实战教程8-如何手动重新初始化hqchart HQChart实战教程9-自定义A股分时图 HQChart实战教程14-K线图对接第3方http/https数据教程整理 HQChart实战...
  • HQChart实战教程7-自定义显示手势点击K线显示信息 HQChart实战教程8-如何手动重新初始化hqchart HQChart实战教程9-自定义A股分时图 HQChart实战教程14-K线图对接第3方http/https数据教程整理 HQChart实战...
  • 400个DreamWeaver插件

    2013-03-28 15:30:13
    mxp/80多个国家的一个下拉菜单,在某些时候的确挺方便的 mxp/检查当前文件的兼容性和可能包含的错误,并会给出详细的检测报告 mxp/在代码编辑框中选择一段脚本代码,然后使用这个插件,可以把这些代码放到一个单独的...
  • 记录一些问题

    2020-12-09 05:01:27
    <img alt="image" src="https://img-blog.csdnimg.cn/img_convert/7120c29e9f5832b971da19e9e993a7c3.png" /></li>[x] 管理员可以查看rank user的real_name</li><li>[ ] ... safari 不显示导航下拉菜单</li></ul>...
  • 感觉可以再次提PR了~

    2020-12-27 20:07:38
    <ol><li>下拉刷新, 也是模仿的</li><li>有3中结果状态显示</li><li>可以自定义一些文字和颜色, 图标的是否显示</li><li>还有一些触发参数, 具体可以看<code>props</code></li> <h4>popUp系列 <ol><li>支持返回键...

空空如也

空空如也

1 2
收藏数 30
精华内容 12
关键字:

vue点击显示下拉菜单

vue 订阅