精华内容
下载资源
问答
  • 主要介绍了Vue实现自定义下拉菜单功能,文章先通过实例代码给大家介绍,后面对用到的知识点总结,需要的朋友可以参考下
  • 主要为大家详细介绍了Vue.js下拉菜单组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了vue仿写带过渡效果的下拉菜单功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue 点击出现下拉菜单,点击下拉菜单以外都要关闭菜单 2018-08-29 15:34:55周家大小姐.阅读数 5928收藏更多 分类专栏:vue2.0周家大小姐 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文...

    vue 点击出现下拉菜单,点击下拉菜单以外都要关闭菜单

    2018-08-29 15:34:55 周家大小姐. 阅读数 5928  收藏 更多

    分类专栏: vue2.0 周家大小姐

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    本文链接:https://blog.csdn.net/qq_40190624/article/details/82184103

     
    1. <template>

    2. <div class="home" v-cloak>

    3.  
    4. <div class="menu">

    5. <p>下拉菜单</p>

    6. <div class="main" v-clickoutside="handleClose">

    7. <button @click="show = !show">点击显示下拉菜单</button>

    8. <div class="dropdown" v-show = "show">

    9. <p>下拉框的内容,点击外面区域可以关闭</p>

    10. </div>

    11. </div>

    12. </div>

    13. </div>

    14. </template>

    15. <script>

    16. export default {

    17. data() {

    18. return {

    19.  
    20. show:false

    21. };

    22. },

    23.  
    24. // 下拉菜单

    25. handleClose(){

    26. this.show = false;

    27. }

    28. },

    29. // 自定义指令clickoutside绑定了一个函数handleClose用来关闭菜单

    30. directives:{

    31. clickoutside:{

    32. bind:function(el,binding,vnode){

    33. function documentHandler(e){

    34. if(el.contains(e.target)){

    35. return false;

    36. }

    37. if(binding.expression){

    38. binding.value(e)

    39. }

    40. }

    41. el._vueClickOutside_ = documentHandler;

    42. document.addEventListener('click',documentHandler);

    43. },

    44. unbind:function(el,binding){

    45. document.removeEventListener('click',el._vueClickOutside_);

    46. delete el._vueClickOutside_;

    47. }

    48. }

    49. }

    50.  
    51. };

    52. </script>

    53. <style lang="less" scoped>

    54. // 作用是取消数据绑定时出现的代码闪烁

    55. [v-cloak] {

    56. display: none;

    57. }

    58. table {

    59. border: 1px solid #e9e9e9;

    60. border-collapse: collapse;

    61. border-spacing: 0;

    62. // 隐藏表格中空单元格上的边框和背景:

    63. empty-cells: show;

    64. }

    65. th,

    66. td {

    67. padding: 8px 16px;

    68. border: 1px solid #e9e9e9;

    69. text-align: left;

    70. }

    71. th {

    72. background: #f7f7f7;

    73. color: #5c6b77;

    74. font-weight: 600;

    75. white-space: nowrap;

    76. }

    77. .menu{

    78. border: 1px solid #ccc;

    79. }

    80. </style>

    81.  
    82.  
    83.  
    84.  

     

    展开全文
  • 下拉菜单Vue的通用下拉菜单组件。 任何元素都可以是下拉触发器,任何元素都可以是下拉内容。 完全可定制的下拉菜单Vue的通用下拉菜单组件。 任何元素都可以是下拉触发器,任何元素都可以是下拉内容。 完全可定制-...
  • 本篇文章主要介绍了详解Vue用自定义指令完成一个下拉菜单(select组件),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了vue下拉菜单组件(含搜索)的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 我用jquery曾经实现过鼠标点击 出现下拉菜单 有点和面包屑 和标签页导航类似 后来参加工作了 公司一直在用vue 所以很多用jqeury写的项目都要用vue来重构 这其中不免碰见了有一些动画效果 虽然很简单  我也曾想着就...
  • 主要介绍了vue实现select下拉显示隐藏功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了解决vue动态下拉菜单 有数据未反应的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 点击按钮出现下拉菜单 2、思路 为按钮绑定点击事件showPicker() 在按钮下另起一个div标签,用v-show绑定一个属性值isShowDropdown 在methods里定义showPicker这个方法,来控制isShowDropdown的值为true或者false,...

    1、需求

    点击按钮出现下拉菜单

    2、思路

    1. 为按钮绑定点击事件showPicker()
    2. 在按钮下另起一个div标签,用v-show绑定一个属性值isShowDropdown
    3. 在methods里定义showPicker这个方法,来控制isShowDropdown的值为true或者false,来控制下拉菜单是否展示

    3、主要代码

    <div>
    	<button @click="showPicker"/>
    	
    	<div v-show="isShowRouteDropdown" class="dropdown">
    		<ul class="dropdown-data-style">
    			<li v-for="(item,index) in data" :key="index" >
    				{{item.text}}
    			</li>
    		</ul>
    	</div>
    </div>
    
    
    export default {
    	data(){
    		return{
    			isShowRouteDropdown: false,  //控制选择下拉框是否显示
    		}
    	},
    	methods:{
    		/* 按钮绑定的方法 */
    		showPicker() {
    			this.isShowRouteDropdown = !this.isShowRouteDropdown;
    		},
    	}
    }
    
    <style lang="stylus" rel="stylesheet/stylus" scoped>
    	.dropdown
    		position: absolute
    		display: block
    		right: 144px
    		margin-right: 16px
    		
    	.dropdown-data-style
    		display: flex
    		flex-direction: column
    		position: absolute
    		background-color: #f9f9f9
    		min-width: 160px
    		box-shadow: 0px 8px 16px 0px  rgba(0,0,0,0.16)
    		overflow: scroll
    		height: 320px
    		margin-top: 33px
    	.dropdown-data-style
    		li
    			color: black
    			padding: 12px 6px
    			text-decoration: none
    			border-bottom: 1px solid #eaeaea;
    </style>
    
    展开全文
  • 主要介绍了Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表) ,需要的朋友可以参考下
  • vue elemeent显示下拉菜单的搜索功能

    千次阅读 2020-04-18 14:33:04
    标题vue elemeent显示下拉菜单的搜索功能 实现的效果大致如上 在element的官方文档中有详细的解释 首先设置可被搜索,其次再定义搜索方法, https://blog.csdn.net/fangge_/article/details/102818569 ...

    标题vue elemeent显示下拉菜单的搜索功能

    在这里插入图片描述
    在这里插入图片描述
    实现的效果大致如上
    在element的官方文档中有详细的解释
    在这里插入图片描述
    首先设置可被搜索,其次再定义搜索方法,

    https://blog.csdn.net/fangge_/article/details/102818569
    https://blog.csdn.net/AnlanJion/article/details/100132911
    这个两个文章都有介绍,但是我个人感觉用filter-method方法太麻烦
    可以用我之前发过的一个方法

    <el-select v-model="value" placeholder="请选择" style="width:140px;" filterable ><!-- :filter-method="dataFilter"-->
     <el-option
        v-for="v in dataFilter()"
        :key="v.wid"
        :label="v.name"
        :value="v.id"
      />
    </el-select>
    
    dataFilter() {
    	return this.options.filter((item) => {
    		if (item.name.includes(this.value)) {
    			return item
    		}
    	})
    },
    

    这样的话要是name的值存在空的就会报错,其他的话应该没啥问题,具体看自己的情况而定

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

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

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

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

    这里增加一个选项,就是当我们按下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函数中也就是组件或元素销毁的时候移除事件监听,不然,这些事件监听会一直存在在内存中。

    展开全文
  • Vue实现下拉菜单

    千次阅读 2020-08-29 09:37:09
    效果图如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">... body {
  • 平时项目中,经常会做一些下拉菜单等效果,这种效果可能会需要通过一个按钮来控制显示隐藏,并且当点击页面其他空白区域时,也要将其隐藏。 简单写个Demo <!-- 按钮 --> <button @click.stop=ShowHidden...
  • 由于elementUI的下拉菜单在项目中表现得不尽人意 (定位的原因) 于是 决定自己 整一个 小而美 理清下面几种情况就妥了 出现前 出现后 点击后 出现后未点击选项(点击空白页) 还是直接放码过来 show you my ...
  • 现有一个需求,点击按钮button,显示下拉选项,点击红色区域之外的地方,下拉消失!    直接上代码【通过vue的自定义指令进行操作】: html: js: 1、directives自定义指令,具体看官网api 2、...
  • vue 多层下拉菜单Multi-level CSS3 dropdown menu tutorial. Nowadays, pure CSS3 menus still very popular. Mostly – this is UL-LI based menus. Today we will continue making nice menus for you. This will ...
  • vue点击其他区域关闭下拉菜单

    千次阅读 2019-11-30 09:30:46
    mounted() { //点击其他区域关闭下拉菜单 document.addEventListener('click', (e) => { if (!this.$el.contains(e.target)) this.show = false ...
  • 最近遇到个问题,下拉菜单放在模态框里面,如果页面展示数据不多的话下拉菜单里面的数据位置是正确的,但是数据多了就错位了。就变成了 正常是这样的 这是element的坑,看了网上别人的解决办法,我都没有发现好的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,118
精华内容 2,447
关键字:

vue点击显示下拉菜单

vue 订阅