Ant Design 图标库

直接引入的使用方式

你直接点击相应的图标会自动将图标名称复制到你的剪切板上<step-forward-outlined />

但是你调用的时候<a-icon type="step-forward-outlined"></a-icon>又发现它不显示！对不对

这里有个坑，我们在调用的时候标签要去掉提示词
标签去除Oulined、TwoTone、Filled,首字母小写，后续大写字母转小写并加-

调用改成<a-icon type="step-forward"></a-icon>就可以用了，这里我emo了半天，官方下面文档上没说，这里写给大家避避坑。

更高级的用法

使用的时候可以像官方文档写的一样，通过components传值就可以不用去掉提示词直接用了

<template><message-outlined :style="{fontSize: '16px', color: '#08c'}" />
</template>
<script>import { MessageOutlined } from '@ant-design/icons-vue';import { defineComponent } from 'vue';export default defineComponent({components: {MessageOutlined,},});
</script>

ant-vue中的a-icon使用方法相关推荐

created写法_在vue中created、mounted等方法使用小结
created:html加载完成之前,执行.执行顺序:父组件-子组件 mounted:html加载完成后执行.执行顺序:子组件-父组件 methods:事件方法执行 watch:watch是去监听一个 ...
在vue中methods互相调用的方法
在vue中methods互相调用的方法转载于:https://www.cnblogs.com/macT/p/10212878.html
vue中DPlayer视频播放器使用方法
vue中DPlayer视频播放器使用方法 1通过npm下载 npm install dplayer - s 2在需要使用的组件中导入 import Dplayer from 'Dplayer' 3页面 ...
vue中实现打印功能的方法与注意事项
vue中实现打印功能的方法与注意事项一.使用方法: 1. 在HTML中 2. 在VUE项目中二.问题总结 1. 设置打印方向 2. 设置打印高度 1. 单张打印 2. 循环打印 3. 获取打印操作 ...
Vue中v-bind=“$attrs”的使用方法
$attrs 主要用于组件之间的隔代传值.例如有父组件A,子组件B,孙组件C 三个组件. 在A组件中传值给C,可直接在B中的C上设置v-bind="$attrs",然后在C组件中 ...
FullCalendar拖拽日历在vue中单个页面的使用方法
FullCalendar拖拽日历在vue中单个页面的使用方法 1.首先通过npm下载插 npm install --save @fullcalendar/vue @fullcalendar/daygr ...
Vue中插入HTML代码的方法
我们需要吧<p>Hello World</p>插入到<p>My name is Pjee</p>应该如何做? 一.使用v-html v-html:更新元 ...
【Vue】Vue中传值的几种方法，案例代码解析
目录一.反向传值(子组件传值给父组件) 二.$refs 三.$parent 四.$children 五.$attrs/$listeners -----多层传值六.$root ----根组件七.依 ...
微信js扫一扫，扫条形码去掉code_128。在vue中封装全局对象的方法，封装微信js-sdk权限验证的方法
微信公众号在调用扫一扫功能时,一维码(条形码)在直接返回结果时会在结果前带上EAN_8, EAN_13, CODE_25, CODE_39, CODE_128, UPC_A, UPC_E wx.sca ...
vue中针对7个数组方法的重写
vue通过原型拦截的方式重写了数组的7个方法,首先获取到这个数组的Observer.如果有新的值,就调用observeArray对新的值进行监听,然后调用notify,通知render watcher ...

ant-vue中的a-icon使用方法

Ant Design 图标库

直接引入的使用方式

更高级的用法

ant-vue中的a-icon使用方法相关推荐

最新文章

热门文章