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属性 功能就实现了

相关推荐
过期的H2O227 分钟前
【H2O2|全栈】JS进阶知识(七)ES6(3)
开发语言·javascript·es6
前端Hardy31 分钟前
HTML&CSS:数据卡片可以这样设计
前端·javascript·css·3d·html
松树戈1 小时前
JS推荐实践
开发语言·javascript·ecmascript
vener_1 小时前
LuckySheet协同编辑后端示例(Django+Channel,Websocket通信)
javascript·后端·python·websocket·django·luckysheet
老码沉思录1 小时前
React Native 全栈开发实战班 - 性能与调试之打包与发布
javascript·react native·react.js
计算机毕设孵化场1 小时前
计算机毕设-基于springboot的多彩吉安红色旅游网站的设计与实现(附源码+lw+ppt+开题报告)
vue.js·spring boot·后端·计算机外设·课程设计·计算机毕设论文·多彩吉安红色旅游网站
小王码农记2 小时前
vue中路由缓存
前端·vue.js·缓存·typescript·anti-design-vue
战神刘玉栋2 小时前
《SpringBoot、Vue 组装exe与套壳保姆级教学》
vue.js·spring boot·后端
乐闻x2 小时前
Vue实践篇:如何在 Vue 项目中检测元素是否展示
前端·javascript·vue.js
理想不理想v2 小时前
【经典】webpack和vite的区别?
java·前端·javascript·vue.js·面试