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>关键点解析
添加
icon插槽：在MyButton.vue中，我们通过<template #icon>和<slot name="icon"></slot>添加了对icon插槽的支持。这使得父组件能够自定义按钮的图标部分。父组件使用
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>关键点解析
插槽检查：在
MyButton.vue中，我们使用v-if="$slots.icon"来检查icon插槽是否存在。只有在插槽存在时才渲染图标部分。灵活性：父组件可以选择提供
icon插槽或不提供。无论是否提供，按钮组件都能正常工作。
通过这种方式，你可以在封装的按钮组件中灵活地支持 icon 插槽为空的情况。
版权声明：本文为YES开发框架网发布内容,转载请附上原文出处连接
post 张国生
