Vue下拉菜單組件化開(kāi)發(fā)詳解
本文實(shí)例為大家分享了Vue下拉菜單組件化開(kāi)發(fā)的具體代碼,供大家參考,具體內(nèi)容如下
搞一個(gè)自定義組件,只是一個(gè)很簡(jiǎn)單的下拉菜單,也就是一個(gè)思路,整起
第一步:在項(xiàng)目中專門(mén)創(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) //通過(guò)this調(diào)用當(dāng)前組件的父級(jí)的父級(jí)也就是dropdown的showM()方法來(lái)進(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>
接下來(lái)對(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>
大概就是這么一個(gè)思路。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue element實(shí)現(xiàn)表格合并行數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了vue element實(shí)現(xiàn)表格合并行數(shù)據(jù),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11vue用遞歸組件寫(xiě)樹(shù)形控件的實(shí)例代碼
最近在vue項(xiàng)目中遇到需要用樹(shù)形控件的部分,比如導(dǎo)航目錄是不確定的,所以必須要用樹(shù)形結(jié)構(gòu),下面腳本之家小編給大家?guī)?lái)了vue用遞歸組件寫(xiě)樹(shù)形控件的實(shí)例代碼,需要的朋友參考下吧2018-07-07vue進(jìn)入頁(yè)面加載數(shù)據(jù)緩慢實(shí)現(xiàn)loading提示過(guò)程
這篇文章主要介紹了vue進(jìn)入頁(yè)面加載數(shù)據(jù)緩慢實(shí)現(xiàn)loading提示過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08Vue組件間通信方法總結(jié)(父子組件、兄弟組件及祖先后代組件間)
這篇文章主要給大家介紹了關(guān)于Vue組件間通信的相關(guān)資料,其中包括父子組件、兄弟組件及祖先后代組件間的通信,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vue3中g(shù)etCurrentInstance不推薦使用及在<script?setup>中獲取全局內(nèi)容的三種方式
這篇文章主要給大家介紹了關(guān)于vue3中g(shù)etCurrentInstance不推薦使用及在<script?setup>中獲取全局內(nèi)容的三種方式,文中通過(guò)介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-02-02Vue3+X6流程圖實(shí)現(xiàn)數(shù)據(jù)雙向綁定詳解
這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合X6流程圖實(shí)現(xiàn)數(shù)據(jù)雙向綁定,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03