小编给大家分享一下Vue中下拉菜单组件化开发的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
具体内容如下
搞一个自定义组件,只是一个很简单的下拉菜单,也就是一个思路,整起
第一步:在项目中专门创建一个放置自定义组件的文件夹(直接components底下的common中)
dropdown.vue 为一级盒子
dropdownMenu.vue 为二级盒子
dropdownItem.vue 为二级盒子内容
第二步 :
对dropdown.vue的操作
<template> <div class="box"> <!-- 给按钮加点击事件 --> <div @click="showM"> <!-- 一级按钮 --> <slot name="title"></slot> </div> <!-- 二级盒子 --> <!-- 加v-if操作 隐藏显示效果 --> <slot v-if="show" name="dropdown"></slot> </div> </template> <script> export default { name: "dropdown", data() { return { // 默认二级盒子关闭 show: false } }, methods: { showM() { this.show = !this.show }, commitClick(value) { // 向父级暴露dropdown事件,并把值传入 this.$emit('change-item',value) } } } </script> <style scoped> .box { display: inline-block; /* 行内块 */ position: relative; /* 相对定位 */ top:100px; margin-left:100px } </style>
对于dropdownMenu仅仅只是把它当作一个盒子,只需要添加一个插槽,把盒子搭好即可
<template> <div class="dropdown-menu"> <slot></slot> </div> </template> <script> export default { name: "dropdownMenu" } </script> <style scoped> .dropdown-menu { padding: 8px 0; /* 盒子内边距上下为8px 左右为0 */ border-radius: 4px; /* 盒子圆角 */ border: 1px solid #f2f6fc; /* 边框为1px 灰色 */ position: absolute; /* 绝对定位 */ right: 0; /* 在右侧 */ top: 110%; /* 盒子在按钮下方 */ background-color: #fff; /* 背景颜色为白色 */ box-shadow: 0 2px 4px rgba(0,0,0,0.12),0 0 6px rgba(0,0,0,.04); /* 为盒子添加阴影 */ } </style>
对dropdownItem的操作
<template> <div class="dropdown-item" @click="itemClick(value)"> <slot></slot> </div> </template> <script> export default { name: "dropdownItem", props:['value'], data() { return {}; }, methods: { itemClick(value) { // console.log(value) //通过this调用当前组件的父级的父级也就是dropdown的showM()方法来进行关闭 this.$parent.$parent.showM(); // 调用父级的父级(dropdown)的commitClick方法并传如value值 this.$parent.$parent.commitClick(value); }, }, }; </script> <style scoped> .dropdown-item { line-height: 40px; /* 行高40px */ white-space: nowrap; /* 不换行 */ padding: 0 20px; /* 内边距上下为0 左右为20px */ color: #606266; /* 字体颜色为灰色 */ cursor: pointer; /* 鼠标移入为点击样子 */ } .dropdown-item:hover { color: #409eff; /* 字体颜色为蓝色 */ background-color: #ecf5ff; /* 背景颜色为 浅~~蓝色 非常浅就对了 */ } </style>
接下来对App.vue文件进行操作
<template> <div id="app"> <dropdown @change-item="changeItem"> <button slot="title">按钮</button> <dropdown-menu slot="dropdown"> <dropdown-item value="吃的">吃的</dropdown-item> <dropdown-item value="喝的">喝的</dropdown-item> <dropdown-item value="玩的">玩的</dropdown-item> </dropdown-menu> </dropdown> </div> </template> <script> import dropdown from './components/common/dropdown' import dropdownMenu from "./components/common/dropdownMenu"; import dropdownItem from "./components/common/dropdownItem"; export default { name: 'App', components: { dropdown,dropdownMenu,dropdownItem }, methods:{ changeItem(e){ console.log(e) } } } </script>
在main.js导入组件
import zgDropdown from "@/components/common/dropdown" import zgDropdownMenu from "@/components/common/dropdownMenu" import zgDropdownItem from "@/components/common/dropdownItem" Vue.component('zgDropdownItem',zgDropdownItem) Vue.component('zgDropdown',zgDropdown) Vue.component('zgDropdownMenu',zgDropdownMenu)
app.vue也要相应修改
<template> <div id="app"> <zg-dropdown @change-item="changeItem"> <button slot="title">按钮</button> <zg-dropdown-menu slot="dropdown"> <zg-dropdown-item value="吃的">吃的</zg-dropdown-item> <zg-dropdown-item value="喝的">喝的</zg-dropdown-item> <zg-dropdown-item value="玩的">玩的</zg-dropdown-item> </zg-dropdown-menu> </zg-dropdown> </div> </template> <script> export default { name: 'App', methods:{ changeItem(e){ console.log(e) } } } </script> <style scoped> </style>
看完了这篇文章,相信你对“Vue中下拉菜单组件化开发的示例分析”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。