hpm-dropdown封装el-dropdown组件

最新推荐文章于 2024-07-21 23:51:27 发布

常增兴

最新推荐文章于 2024-07-21 23:51:27 发布

阅读量280

点赞数

分类专栏： element-ui vue

本文链接：https://blog.csdn.net/weixin_42356155/article/details/111227574

版权

本文介绍如何封装Element UI的el-dropdown组件为hpm-dropdown，详细阐述了使用方法，并提供了一个实际的案例一作为示例。

摘要由CSDN通过智能技术生成

使用

案例一：

在这里插入图片描述

  <hpm-dropdown
            label="label"
            command="value"
            v-model="fromData.command"
            :options="[{label: '黄金糕',value: 'a'},{label: '狮子头',value: 'b'}]"
   ></hpm-dropdown>

组件封装

<template>
  <div class="hpm_dropdown">
    <el-dropdown @command="handleCommand" @click="onClick" v-bind="attr">
      <slot>
        <span class="el-dropdown-link">
          <span>{
   {
   btntext || name}}</span>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
      </slot>
      <template v-slot:dropdown>
        <slot name="dropdown" :options="items">
          <el-dropdown-menu>
            <template v-if="items.length"&