中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Vue中下拉菜單組件化開發的示例分析

發布時間:2021-09-27 10:44:12 來源:億速云 閱讀:179 作者:小新 欄目:開發技術

小編給大家分享一下Vue中下拉菜單組件化開發的示例分析,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!

具體內容如下

搞一個自定義組件,只是一個很簡單的下拉菜單,也就是一個思路,整起

第一步:在項目中專門創建一個放置自定義組件的文件夾(直接components底下的common中)

Vue中下拉菜單組件化開發的示例分析

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中下拉菜單組件化開發的示例分析”有了一定的了解,如果想了解更多相關知識,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

vue
AI

高密市| 皮山县| 黎城县| 红河县| 汉寿县| 房山区| 武胜县| 饶河县| 县级市| 金乡县| 油尖旺区| 南昌县| 康乐县| 融水| 巢湖市| 利川市| 华坪县| 延安市| 合阳县| 波密县| 墨玉县| 峨边| 柞水县| 曲水县| 江口县| 始兴县| 柳江县| 宜城市| 兴隆县| 搜索| 绿春县| 卢氏县| 敦化市| 宜兰市| 两当县| 肥西县| 克拉玛依市| 安义县| 连江县| 万盛区| 宽甸|