vue3重新封装element-plus组件库的按钮组件el-button-YES开发框架网

为了在封装的 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 插槽为空的情况。