195 lines
3.9 KiB
Vue
195 lines
3.9 KiB
Vue
<template>
|
||
<div>
|
||
<h2>{{ $t('app.aside.nav.icon') }}</h2>
|
||
<p class="tip">内置轻量级的 css 图标，可以通过 <router-link class="link" :to="{name: 'StartIcons'}">setup</router-link> 替换为 font 图标，例如第三方图标库：font-awesome、inconfont</p>
|
||
|
||
<ul class="vxe-row icon-list" title="点击复制内容">
|
||
<li class="vxe-col--4" v-for="item in list" :key="item.icon" @click="copyEvent(item)">
|
||
<i :class="item.icon"></i>
|
||
<div class="title">{{ item.icon }}</div>
|
||
</li>
|
||
</ul>
|
||
|
||
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
|
||
|
||
<pre>
|
||
<pre-code class="xml">{{ demoCodes[0] }}</pre-code>
|
||
</pre>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { defineComponent } from 'vue'
|
||
import { VXETable } from '../../../packages/all'
|
||
|
||
interface ItemVO {
|
||
icon: string;
|
||
}
|
||
|
||
export default defineComponent({
|
||
setup () {
|
||
const copyEvent = () => {
|
||
VXETable.modal.message({ content: '已复制到剪贴板！', status: 'success' })
|
||
}
|
||
return {
|
||
list: [
|
||
{
|
||
icon: 'vxe-icon--caret-top'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--caret-bottom'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--caret-left'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--caret-right'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--arrow-top'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--arrow-bottom'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--arrow-left'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--arrow-right'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--d-arrow-left'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--d-arrow-right'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--menu'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--edit-outline'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--more'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--check'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--close'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--plus'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--minus'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--refresh'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--refresh roll'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--funnel'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--question'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--info'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--warning'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--success'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--error'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--remove'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--circle-plus'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--zoomin'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--zoomout'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--upload'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--download'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--eye'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--eye-slash'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--calendar'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--dot'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--print'
|
||
},
|
||
{
|
||
icon: 'vxe-icon--search'
|
||
}
|
||
] as ItemVO[],
|
||
copyEvent,
|
||
demoCodes: [
|
||
`
|
||
<i class="vxe-icon--caret-top"></i>
|
||
`
|
||
]
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.icon-list {
|
||
font-size: 26px;
|
||
text-align: center;
|
||
border-top: 1px solid #eee;
|
||
border-left: 1px solid #eee;
|
||
overflow: hidden;
|
||
margin: 0;
|
||
padding: 0;
|
||
&:after {
|
||
content: "";
|
||
clear: both;
|
||
}
|
||
& > li {
|
||
height: 100px;
|
||
border-right: 1px solid #eee;
|
||
border-bottom: 1px solid #eee;
|
||
cursor: pointer;
|
||
padding-top: 10px;
|
||
& > i {
|
||
color: #606266;
|
||
border-color: #606266;
|
||
}
|
||
&:hover {
|
||
& > i {
|
||
color: #5CB6FF;
|
||
border-color: #5CB6FF;
|
||
}
|
||
}
|
||
.title {
|
||
font-size: 14px;
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|