Element UI Button添加图标教程：el-icon与自定义插槽

{"title":"Element UI Button添加图标教程：el-icon与自定义插槽","description":"详细介绍如何在Element UI的el-button按钮组件中添加图标，包括使用el-icon组件和自定义插槽两种方法，并提供代码示例。","keywords":"Element UI, el-button, 按钮, 图标, el-icon, 插槽, 自定义图标, 代码示例","content":"要在el-button中添加图标，可以使用el-icon组件和slot插槽。\n\n首先，在el-button组件中添加一个el-icon组件，并设置icon属性为你想要的图标名称。例如，要添加一个"搜索"图标，可以使用以下代码：\n\nhtml\n<el-button type=\"primary\">\n <el-icon icon=\"el-icon-search\"></el-icon>搜索\n</el-button>\n\n\n此外，如果你想要自定义图标，可以使用slot插槽。首先，在el-button组件中添加一个slot属性，并给它一个名字，例如"icon"。然后，在el-button组件中使用该slot插槽，并在其中添加自定义图标的代码。例如：\n\nhtml\n<el-button type=\"primary\">\n <template #icon>\n <i class=\"my-custom-icon\"></i>\n </template>\n 搜索\n</el-button>\n\n\n通过这种方式，你可以根据自己的需求添加不同的图标到el-button中。"}