您好,登錄后才能下訂單哦!
小編給大家分享一下Vue中下拉菜單組件化開發(fā)的示例分析,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
具體內(nèi)容如下
搞一個(gè)自定義組件,只是一個(gè)很簡(jiǎn)單的下拉菜單,也就是一個(gè)思路,整起
第一步:在項(xiàng)目中專門創(chuàng)建一個(gè)放置自定義組件的文件夾(直接components底下的common中)
dropdown.vue 為一級(jí)盒子
dropdownMenu.vue 為二級(jí)盒子
dropdownItem.vue 為二級(jí)盒子內(nèi)容
第二步 :
對(duì)dropdown.vue的操作
<template> <div class="box"> <!-- 給按鈕加點(diǎn)擊事件 --> <div @click="showM"> <!-- 一級(jí)按鈕 --> <slot name="title"></slot> </div> <!-- 二級(jí)盒子 --> <!-- 加v-if操作 隱藏顯示效果 --> <slot v-if="show" name="dropdown"></slot> </div> </template> <script> export default { name: "dropdown", data() { return { // 默認(rèn)二級(jí)盒子關(guān)閉 show: false } }, methods: { showM() { this.show = !this.show }, commitClick(value) { // 向父級(jí)暴露dropdown事件,并把值傳入 this.$emit('change-item',value) } } } </script> <style scoped> .box { display: inline-block; /* 行內(nèi)塊 */ position: relative; /* 相對(duì)定位 */ top:100px; margin-left:100px } </style>
對(duì)于dropdownMenu僅僅只是把它當(dāng)作一個(gè)盒子,只需要添加一個(gè)插槽,把盒子搭好即可
<template> <div class="dropdown-menu"> <slot></slot> </div> </template> <script> export default { name: "dropdownMenu" } </script> <style scoped> .dropdown-menu { padding: 8px 0; /* 盒子內(nèi)邊距上下為8px 左右為0 */ border-radius: 4px; /* 盒子圓角 */ border: 1px solid #f2f6fc; /* 邊框?yàn)?px 灰色 */ position: absolute; /* 絕對(duì)定位 */ right: 0; /* 在右側(cè) */ 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>
對(duì)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調(diào)用當(dāng)前組件的父級(jí)的父級(jí)也就是dropdown的showM()方法來進(jìn)行關(guān)閉 this.$parent.$parent.showM(); // 調(diào)用父級(jí)的父級(jí)(dropdown)的commitClick方法并傳如value值 this.$parent.$parent.commitClick(value); }, }, }; </script> <style scoped> .dropdown-item { line-height: 40px; /* 行高40px */ white-space: nowrap; /* 不換行 */ padding: 0 20px; /* 內(nèi)邊距上下為0 左右為20px */ color: #606266; /* 字體顏色為灰色 */ cursor: pointer; /* 鼠標(biāo)移入為點(diǎn)擊樣子 */ } .dropdown-item:hover { color: #409eff; /* 字體顏色為藍(lán)色 */ background-color: #ecf5ff; /* 背景顏色為 淺~~藍(lán)色 非常淺就對(duì)了 */ } </style>
接下來對(duì)App.vue文件進(jìn)行操作
<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導(dǎo)入組件
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也要相應(yīng)修改
<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>
看完了這篇文章,相信你對(duì)“Vue中下拉菜單組件化開發(fā)的示例分析”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。