vue3重新封装element-plus组件库的按钮组件el-button


为了在封装的 el-button 组件中支持 icon 插槽,我们需要在自定义组件中显式地使用该插槽。以下是修改后的示例代码,展示如何在封装的按钮组件中添加对 icon 插槽的支持。

1. 修改封装的按钮组件

我们需要在 MyButton.vue 中添加对 icon 插槽的支持:

JavaScript 全选
<template>
  <el-button :type="type" @click="handleClick">
    <template #icon>
      <slot name="icon"></slot>
    </template>
    <slot></slot>
  </el-button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    type: {
      type: String,
      default: 'primary'
    }
  },
  methods: {
    handleClick(event) {
      this.$emit('click', event);
    }
  }
};
</script>

<style scoped>
/* 你可以在这里添加自定义样式 */
</style>

2. 使用封装的按钮组件并添加图标插槽

然后,在 App.vue 中使用这个封装的按钮组件,并添加 icon 插槽内容:

JavaScript 全选
<template>
  <div>
    <MyButton @click="handleButtonClick">
      <template #icon>
        <i class="el-icon-search"></i> <!-- 使用 Element Plus 的图标 -->
      </template>
      点击我
    </MyButton>
  </div>
</template>

<script>
import MyButton from './components/MyButton.vue';

export default {
  name: 'App',
  components: {
    MyButton
  },
  methods: {
    handleButtonClick() {
      console.log('Button clicked!');
    }
  }
};
</script>

<style scoped>
/* 你可以在这里添加样式 */
</style>

关键点解析

  1. 添加 icon 插槽:在 MyButton.vue 中,我们通过 <template #icon><slot name="icon"></slot> 添加了对 icon 插槽的支持。这使得父组件能够自定义按钮的图标部分。

  2. 父组件使用 icon 插槽:在 App.vue 中,我们使用 <template #icon> 来定义 icon 插槽的内容。在这个示例中,我们使用了 Element Plus 的图标类 el-icon-search

注意事项

  • 确保图标类正确:确保使用的是 Element Plus 提供的图标类或其他正确的图标类。
  • 插槽名称要匹配:在 MyButton.vue 中定义的 icon 插槽名称需要与父组件中使用的插槽名称一致。

通过上述方法,你可以在封装的按钮组件中支持 icon 插槽,并在使用时自定义图标内容

 

支持icon插槽为空

要支持 icon 插槽为空的情况,我们可以在封装的组件中添加逻辑处理。如果 icon 插槽为空,我们可以避免渲染图标部分。下面是更新后的代码:

修改封装的按钮组件

MyButton.vue 中添加对 icon 插槽为空的支持:

JavaScript 全选
<template>
  <el-button :type="type" @click="handleClick">
    <template v-if="$slots.icon" #icon>
      <slot name="icon"></slot>
    </template>
    <slot></slot>
  </el-button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    type: {
      type: String,
      default: 'primary'
    }
  },
  methods: {
    handleClick(event) {
      this.$emit('click', event);
    }
  }
};
</script>

<style scoped>
/* 你可以在这里添加自定义样式 */
</style>

使用封装的按钮组件并添加图标插槽

App.vue 中,可以选择添加 icon 插槽或不添加:

使用图标插槽

JavaScript 全选
<template>
  <div>
    <MyButton @click="handleButtonClick">
      <template #icon>
        <i class="el-icon-search"></i> <!-- 使用 Element Plus 的图标 -->
      </template>
      点击我
    </MyButton>
  </div>
</template>

<script>
import MyButton from './components/MyButton.vue';

export default {
  name: 'App',
  components: {
    MyButton
  },
  methods: {
    handleButtonClick() {
      console.log('Button clicked!');
    }
  }
};
</script>

<style scoped>
/* 你可以在这里添加样式 */
</style>

不使用图标插槽

JavaScript 全选
<template>
  <div>
    <MyButton @click="handleButtonClick">
      点击我
    </MyButton>
  </div>
</template>

<script>
import MyButton from './components/MyButton.vue';

export default {
  name: 'App',
  components: {
    MyButton
  },
  methods: {
    handleButtonClick() {
      console.log('Button clicked!');
    }
  }
};
</script>

<style scoped>
/* 你可以在这里添加样式 */
</style>

关键点解析

  1. 插槽检查:在 MyButton.vue 中,我们使用 v-if="$slots.icon" 来检查 icon 插槽是否存在。只有在插槽存在时才渲染图标部分。

  2. 灵活性:父组件可以选择提供 icon 插槽或不提供。无论是否提供,按钮组件都能正常工作。

通过这种方式,你可以在封装的按钮组件中灵活地支持 icon 插槽为空的情况。

 

 

 

 

 

 

版权声明:本文为YES开发框架网发布内容,转载请附上原文出处连接
张国生
上一篇:vue3 + ts环境中props配置自定义类型
下一篇:vue3 ts setup 封装element-plus el-dialog,并使用v-model
评论列表

发表评论

评论内容
昵称:
关联文章

vue3重新封装element-plus按钮组件el-button
vue3 ts setup 封装element-plus el-dialog,并使用v-model
element-uiel-tabs控制内容滚动
Bootstrap 弹窗JS封装
vue3 组合模式 组件自己引用自己 递归组件 组件命名
element-ui el-row中有多个el-col时候,某些情况下el-col显示错位
【荐】开源Winform控:花木兰控
joc-button和joc-link 启用确认操作usePopConfirm后,v-permission指令冲突
VUE3监听div滚动,滚动超出后折叠collapse
[WPF] 抄一个 CSS3 实现按钮
vue3+ts 导出类型
Devexpress GridControl删除控中多余无效ColumnEdit
vue3+vist 打包空白
DevExpress 历史各版本下载地址【更新:V21.1.5】
vue3使用ts开发自定义,对外开放方法
element-ui el-table不显示合计行解决办法
element-ui改进el-form表单样式,取消form-item底部边距:form-inner-error
EFCore官方扩展
vue3 keep-alive跳转回来后 scroll位置丢失
省市区选择组件SelectArea

联系我们
联系电话:15090125178(微信同号)
电子邮箱:garson_zhang@163.com
站长微信二维码
微信二维码