Ant Design of Vue Icon 图标列表_ant design vue 图标

拷贝插件

yarn add vue-clipboard2

// main.js
//复制到粘贴板插件
import VueClipboard from 'vue-clipboard2'
VueClipboard.config.autoSetContainer = true
Vue.use(VueClipboard)
1
2
3
4
5
6
7

图标列表

// /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.$message
      this.$copyText(text).then(
        function(e) {
          message.success(text + '  复制成功 
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/113091