TDesign在按钮上加入图标组件

在实际开发中 我们经常会遇到例如 添加或者查询 我们需要在按钮上加入图标的操作

TDesign自然也有预备这样的操作

首先我们打开文档看到图标

例如 我们先用某些图标 就可以点开下面的代码

可以看到 我们的图标大部分都是直接用tdesign-icons-vue 导入他的组件就可以了

而我们按钮设计了一个icon属性 我们可以设置一个函数 返回对应图标组件

参考代码如下

html 复制代码
<template>
    <t-button
      class="filter-item"
      theme="danger"
      size="small"
      :icon="renderIcon"
      @click="dom"
    >搜索</t-button>
</template>

<script>
import { SearchIcon } from 'tdesign-icons-vue';
export default {
  data() {
    return {
    };
  },
  methods: {
    renderIcon() {
      return <SearchIcon />;
    },
    dom(){
      console.log("数据输出");
    }
  },
};
</script>

运行结果如下

这里 我们引入了SearchIcon图标组件 然后定义了一个renderIcon函数 返回SearchIcon组件实体 然后 绑定

renderIcon函数给按钮的icon属性 功能就实现了

相关推荐
Hilaku1 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
LuckySusu1 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu1 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu1 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu1 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu1 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
LuckySusu1 小时前
【js篇】深入理解 JavaScript 原型与原型链
前端·javascript
云枫晖1 小时前
手写Promise-构造函数
前端·javascript
王王碎冰冰2 小时前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
naice2 小时前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git