vue3 antdv 定义全局的icon

本文介绍如何使用Vite和Ant Design构建Vue3项目,实现自定义图标库的在线管理,实现实时更新到本地项目中,无需导入外部资源。

        学习vite搭建vue3的ts的前端框架,前端采用的是ant版本的vue,选择ant的原因之一是因为阿里家的,同时,对自家的icon支持非常友好。主要在icon里面创建一个账号,维护自己的仓库,就可以线上添加icon,项目里面直接使用了。不用导入其他的文件。如果是离线运行的项目,则跳过这个文章吧,因为这个是需要在线加载文件的。

创建全局办的icon模块很简单,只需要在main.ts里面添加几个配置就好。

// 自定义的icon
import { createFromIconfontCN } from '@ant-design/icons-vue';
const Fonts = createFromIconfontCN({
     scriptUrl: '//at.alicdn.com/t/font_3243513_tpd19zgtmy.js'
})

// 然后在vue里面使用对应的模块即可
createApp(App).use(router).use(store).use(Antd).component("LocalIcon", Fonts).mount('#app')

这样,在项目里面,可以直接通过LocalIcon这个标签来直接使用了。项目里面的代码如下:

<local-icon type="icon-liebiao" />

上面的type就是你在icon里面创建仓库的对应的icon的名称。

这样,你可以在线上动态的添加、编辑、修改icon,而项目里面就可以直接用了。

刚测试了一下,修改icon之后,需要重新生成连接,否则icon不会更新

在使用vue3antdv表格进行展示时,当字符串中存在"\n"的时候,可以通过以下步骤实现按照换行符进行换行的效果。 首先,在表格的列定义中,将需要展示换行效果的列的render函数进行特殊处理。例如,可以使用vue的指令v-html来将字符串中的"\n"转换为"<br/>"标签,实现换行效果。 其次,定义一个全局的filter过滤器,用于对字符串进行预处理。在该过滤器中,使用正则表达式将"\n"替换为"<br/>",然后返回新的字符串。 接着,在表格列的定义中,对需要展示换行效果的列使用该filter过滤器。 最后,经过上述步骤处理后,将原本包含"\n"的字符串在表格中展示时就会按照换行符进行换行。 以下是具体的代码实现示例: // 在Vue全局定义中,定义一个过滤器 Vue.filter(&#39;lineBreakFilter&#39;, function(value) { return value.replace(/\n/g, &#39;<br/>&#39;); }); // 表格列的定义 columns: [ { title: &#39;内容&#39;, dataIndex: &#39;content&#39;, key: &#39;content&#39;, width: 200, // 使用v-html指令将字符串进行渲染 render: (text) => { return h(&#39;div&#39;, { domProps: { innerHTML: text } }); }, // 对内容进行过滤处理 slots: { customRender: &#39;content&#39; }, }, ], 通过以上步骤,就能够实现在vue3antdv表格中对字符串按照"\n"进行换行的效果。注意,使用这种方式要确保字符串中的"\n"是完整的格式,即"\n"之间没有空格或其他字符。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值