Programs have no borders, but programmers have borders. China's national dignity…

Programs have no borders, but programmers have borders. China's national dignity can not be challenged. If you continue to buy HM, Nike, Adidas and other brands in a special period, you will not have the right to continue to use Vab

mock/controller/router.js

@@ -78,12 +78,6 @@ const data = [
             meta: { title: '常规图标' },
           },
           {
-            path: 'remixIcon',
-            name: 'RemixIcon',
-            component: '@/views/vab/icon/remixIcon',
-            meta: { title: '小清新图标' },
-          },
-          {
             path: 'colorfulIcon',
             name: 'ColorfulIcon',
             component: '@/views/vab/icon/colorfulIcon',

package.json

@@ -61,7 +61,7 @@
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2",
     "zx-count": "^0.3.7",
-    "zx-layouts": "^0.6.24",
+    "zx-layouts": "^0.6.25",
     "zx-magnifie": "^0.4.0",
     "zx-markdown-editor": "^0.0.2",
     "zx-player": "^1.0.2",

src/router/index.js

@@ -105,12 +105,6 @@ export const asyncRoutes = [
             meta: { title: '常规图标' },
           },
           {
-            path: 'remixIcon',
-            name: 'RemixIcon',
-            component: () => import('@/views/vab/icon/remixIcon'),
-            meta: { title: '小清新图标' },
-          },
-          {
             path: 'colorfulIcon',
             name: 'ColorfulIcon',
             component: () => import('@/views/vab/icon/colorfulIcon'),

src/views/vab/icon/remixIcon.vue

-<template>
-  <div class="colorful-icon-container">
-    <el-row :gutter="20">
-      <el-col :span="24">
-        <el-divider content-position="left">
-          小清新图标在演示环境中使用的是cdn加速服务，开发时需存储到本地，使用方法可查看群文档，点击图标即可复制源码，点击图标即可复制源码
-        </el-divider>
-      </el-col>
-      <el-col :span="24">
-        <el-form :inline="true" label-width="80px" @submit.native.prevent>
-          <el-form-item label="图标名称">
-            <el-input v-model="queryForm.title"></el-input>
-          </el-form-item>
-          <el-form-item label-width="0">
-            <el-button native-type="submit" type="primary" @click="queryData">
-              搜索
-            </el-button>
-          </el-form-item>
-
-          <!-- <el-form-item label-width="0">
-            <el-input :value="copyText" type="text"></el-input>
-          </el-form-item>-->
-        </el-form>
-      </el-col>
-
-      <el-col
-        v-for="(item, index) in queryIcon"
-        :key="index"
-        :xs="6"
-        :sm="8"
-        :md="3"
-        :lg="2"
-        :xl="2"
-      >
-        <el-card
-          shadow="hover"
-          style="cursor: pointer"
-          @click.native="handleCopyIcon(index, $event)"
-        >
-          <vab-remix-icon
-            :icon-class="`https://cdn.jsdelivr.net/gh/chuzhixin/zx-remixicon/src/icons/svg/${item}.svg`"
-            @click.stop
-          ></vab-remix-icon>
-        </el-card>
-        <div class="icon-text">{{ item }}</div>
-      </el-col>
-
-      <el-col :span="24">
-        <el-pagination
-          :background="background"
-          :current-page="queryForm.pageNo"
-          :page-size="queryForm.pageSize"
-          :page-sizes="[72, 144, 216, 288]"
-          :layout="layout"
-          :total="total"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        ></el-pagination>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-  import { getIconList } from '@/api/remixIcon'
-  import clip from '@/utils/clipboard'
-
-  export default {
-    name: 'RemixIcon',
-    data() {
-      return {
-        copyText: '',
-        layout: 'total, sizes, prev, pager, next, jumper',
-        total: 0,
-        background: true,
-        height: 0,
-        selectRows: '',
-        elementLoadingText: '正在加载...',
-        queryIcon: [],
-        queryForm: {
-          pageNo: 1,
-          pageSize: 72,
-          title: '',
-        },
-      }
-    },
-    created() {
-      this.fetchData()
-    },
-    methods: {
-      handleSizeChange(val) {
-        this.queryForm.pageSize = val
-        this.fetchData()
-      },
-      handleCurrentChange(val) {
-        this.queryForm.pageNo = val
-        this.fetchData()
-      },
-      queryData() {
-        this.queryForm.pageNo = 1
-        this.fetchData()
-      },
-      async fetchData() {
-        const { data, totalCount } = await getIconList(this.queryForm)
-        this.queryIcon = data
-        this.allIcon = data
-        this.total = totalCount
-      },
-      handleCopyIcon(index, event) {
-        //const copyText = `<vab-remix-icon icon-class="https://cdn.jsdelivr.net/gh/chuzhixin/zx-remixicon@master/src/icons/svg/${this.queryIcon[index]}.svg" />`;
-        const copyText = `<vab-remix-icon icon-class="${this.queryIcon[index]}" />`
-        this.copyText = copyText
-        clip(copyText, event)
-      },
-    },
-  }
-</script>
-
-<style lang="scss" scoped>
-  .colorful-icon-container {
-    ::v-deep {
-      .el-card__body {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        align-items: center; /* 垂直居中 */
-        justify-content: center; /* 水平居中 */
-
-        svg:not(:root),
-        .svg-external-icon {
-          font-size: 16px;
-          font-weight: bold;
-          color: $base-color-gray;
-          text-align: center;
-          vertical-align: middle;
-          pointer-events: none;
-          cursor: pointer;
-        }
-      }
-    }
-
-    .icon-text {
-      height: 30px;
-      margin-top: -15px;
-      overflow: hidden;
-      font-size: 12px;
-      line-height: 30px;
-      text-align: center;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-</style>