mirror of
https://gitee.com/chu1204505056/vue-admin-beautiful.git
synced 2025-04-05 19:41:43 +08:00
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
This commit is contained in:
good luck
parent
cddbc5afcb
commit
7cffd4f021
@ -77,12 +77,6 @@ const data = [
|
||||
component: '@/views/vab/icon/index',
|
||||
meta: { title: '常规图标' },
|
||||
},
|
||||
{
|
||||
path: 'remixIcon',
|
||||
name: 'RemixIcon',
|
||||
component: '@/views/vab/icon/remixIcon',
|
||||
meta: { title: '小清新图标' },
|
||||
},
|
||||
{
|
||||
path: 'colorfulIcon',
|
||||
name: 'ColorfulIcon',
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -104,12 +104,6 @@ export const asyncRoutes = [
|
||||
component: () => import('@/views/vab/icon/index'),
|
||||
meta: { title: '常规图标' },
|
||||
},
|
||||
{
|
||||
path: 'remixIcon',
|
||||
name: 'RemixIcon',
|
||||
component: () => import('@/views/vab/icon/remixIcon'),
|
||||
meta: { title: '小清新图标' },
|
||||
},
|
||||
{
|
||||
path: 'colorfulIcon',
|
||||
name: 'ColorfulIcon',
|
||||
|
||||
@ -1,153 +0,0 @@
|
||||
<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>
|
||||
Loading…
x
Reference in New Issue
Block a user