Ant Design of Vue Icon 图标列表
拷贝插件
yarn add vue-clipboard2// main.js
//复制到粘贴板插件
import VueClipboard from 'vue-clipboard2'
VueClipboard.config.autoSetContainer = true
Vue.use(VueClipboard)
图标列表
// /src/views/icons.vue
<template><div><a-radio-group :value="theme" @change="handleThemeChange"><a-radio-button value="gold"><a-icon type="gold" /><span style="margin-left:8px">全部</span></a-radio-button><a-radio-button value="outline"><a-icon type="outline" /><span style="margin-left:8px">线框风格</span></a-radio-button><a-radio-button value="fill"><a-icon type="fill" /><span style="margin-left:8px">实体分格</span></a-radio-button><a-radio-button value="twotone"><a-icon type="twotone" /><span style="margin-left:8px">双色风格</span></a-radio-button></a-radio-group><ul class="icon-list"><li v-for="(item, index) in iconList" :key="index" @click="copy(item)"><a-icon :type="item.name" :theme="getTheme(item)" /><span>{{ item.name }}</span></li></ul><a-back-top /></div>
</template>
<script>
import VueIcon from '@ant-design/icons-vue'
export default {name: 'icons',data() {return {icons: VueIcon.definitions.collection,iconList: [],theme: 'outline'}},created() {this.getThemeIcons()},methods: {copy(icon) {let text = this.getContent(icon)let message = this.$messagethis.$copyText(text).then(function(e) {message.success(text + ' 复制成功
Ant Design of Vue Icon 图标列表相关推荐
- ant design分享记录-icon图标自定义菜单图标
ant design分享-icon图标自定义菜单图标 本过程使用 iconfont.cn上的 设置icon前缀 import { Icon } from 'ant-design-vue'; impor ...
- Ant Design Pro 菜单icon图标修改或新增
由于Ant Design Pro菜单和以前不一样了,去官网查到的Icon图标无法直接使用名称了,那怎么办呢,办法总是比问题多的,进入官网的图标组件,找到你想要用的图标,进入开发模式 图标 Icon - ...
- Ant Design离线使用Icon图标资源
使用环境:开发环境内网 node + React + antd 第一种方法:[推荐] 第一种方法[原创]: 想在网上找到的第二种方法,试验一下可以.但是我不想 失去按需加在css的功能,所以自己 ...
- 前端学习（3339）：ant design中加上icon图标
当需要在 Button 内嵌入 Icon 时,可以设置 icon 属性,或者直接在 Button 内使用 Icon 组件. 如果想控制 Icon 具体的位置,只能直接使用 Icon 组件,而非 ico ...
- ant design pro vue左侧菜单自定义图标
做ant design pro vue项目的时候突然想修改左侧菜单的图标,在修改途中发现源码中提供的方法方法居然不生效(如下所示) 在src/assets/icons文件夹中下载svg图标 在src/ ...
- Vue.js高效前端开发 • 【Ant Design of Vue框架进阶】
全部章节 >>>> 文章目录 一.栅格组件 1.栅格组件介绍 2.栅格组件使用 3.实践练习 二.输入组件 1.输入框组件使用 2.选择器组件使用 3.单选框组件使用 4.实践 ...
- ant design pro vue 动态路由 流程详解
ant design pro vue 动态路由 流程详解 前言 流程图 流程1 src/permission.js 流程2 src/store/modules/user.js 流程3 src/perm ...
- 使用Ant Design 和Vue，React中后台开发套餐
2019独角兽企业重金招聘Python工程师标准>>> 前言 目前Ant Design 提供 React 和 Vue 两种整合开发框架,开箱即用的中台前端/设计解决方案,可适合中小公 ...
- 创建Vue+TS+Ant Design of Vue 项目
创建Vue+TS+Ant Design of Vue 项目 创建项目 选择配置 运行项目 安装 ant-design-vue 安装 babel-plugin-import 使用VS Code打开 配置 ...
最新文章
- python 进位_Python小课堂（第一讲）
- [leetcode] Add Binary
- hadoop伪分布式配置修改配置文件的时候无法保存（没有权限保存）
- hotspot 垃圾收集器_HotSpot增量Java垃圾收集器
- js 即时上传php_php+js实现异步图片上传实例分享
- 江苏小高考计算机操作题软件,江苏小高考现神题：求微信启动画面的拍摄时间...
- Apprenda发布Kubernetes商业版，PaaS、CaaS任君选择
- Adaptive Placeholder – 自适应的占位符效果
- 工具之wireshark保存rtp数据
- Security+ 学习笔记32 云安全控制
- Spring入门第六课
- 最新版Java零基础入门阶段学习教程汇总（无比全面，我收藏了！！！）
- velocity参数重新赋值_Velocity 语法详解
- 恩智浦杯（飞思卡尔）全国大学生智能车竞赛摄像头简单的图像失真矫正技术原理与实现（透视变换）
- 新能源车牌识别算法，助力车牌识别核心升级
- C语言pow函数返回值一直是0
- thinkphp 批量打包下载图片到本地电脑
- python|excel分列--部分分列(pandas,concat)
- abaqus截面惯性矩_Abaqus基本概念汇总
- HTB-Blocky
热门文章