parent
48c8b708da
commit
78fadcc3cd
@ -1,13 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<router-view v-slot="{ Component }">
|
<router-view v-slot="{ route, Component }">
|
||||||
<transition mode="out-in" name="fade-transform">
|
<transition mode="out-in" name="fade-transform">
|
||||||
<keep-alive>
|
<keep-alive :exclude="exclude" :max="30">
|
||||||
<component :is="Component" />
|
<component :is="Component" :key="route.name" />
|
||||||
</keep-alive>
|
</keep-alive>
|
||||||
</transition>
|
</transition>
|
||||||
</router-view>
|
</router-view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup></script>
|
<script setup>
|
||||||
|
const store = useStore();
|
||||||
|
const exclude = computed(() => store.state.layout.notKeepAliveList);
|
||||||
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped></style>
|
<style lang="less" scoped></style>
|
||||||
|
@ -0,0 +1,16 @@
|
|||||||
|
import { ElMessage } from './element-plus';
|
||||||
|
|
||||||
|
export const copy = (content) => {
|
||||||
|
const el = document.createElement('textarea');
|
||||||
|
el.style.position = 'absolute';
|
||||||
|
el.style.zIndex = '-9999';
|
||||||
|
el.value = content;
|
||||||
|
document.body.appendChild(el);
|
||||||
|
el.select();
|
||||||
|
document.execCommand('copy');
|
||||||
|
el.remove();
|
||||||
|
ElMessage.success('复制成功');
|
||||||
|
};
|
||||||
|
export default (app) => {
|
||||||
|
app.config.globalProperties.$copy = copy;
|
||||||
|
};
|
@ -0,0 +1,115 @@
|
|||||||
|
<template>
|
||||||
|
<div class="icon-container">
|
||||||
|
<el-form inline label-width="100px">
|
||||||
|
<el-form-item>
|
||||||
|
<el-radio-group
|
||||||
|
v-model="copy"
|
||||||
|
button
|
||||||
|
:opts="[
|
||||||
|
{ label: '复制代码', value: 0 },
|
||||||
|
{ label: '复制名称', value: 1 },
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-radio-group
|
||||||
|
v-model="type"
|
||||||
|
button
|
||||||
|
:opts="[
|
||||||
|
{ label: 'element-plus', value: 0 },
|
||||||
|
{ label: 'remix-icon', value: 1 },
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="图标名称">
|
||||||
|
<el-input v-model="query" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="图标尺寸">
|
||||||
|
<el-input-number v-model="size" :max="64" :min="16" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-scrollbar>
|
||||||
|
<ul>
|
||||||
|
<li v-for="(item, index) in filterIcons" :key="index" @click="handleIcon(item)">
|
||||||
|
<div class="icon">
|
||||||
|
<el-icon :name="item" :size="size" />
|
||||||
|
</div>
|
||||||
|
<div class="name">{{ item }}</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</el-scrollbar>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import remixIcons from '@/icons/index.json';
|
||||||
|
import * as icons from '@element-plus/icons';
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'IconDemo',
|
||||||
|
setup() {
|
||||||
|
const { proxy } = getCurrentInstance();
|
||||||
|
const elementIcons = Object.entries(icons).map((item) => item[0]);
|
||||||
|
const state = reactive({
|
||||||
|
type: 0,
|
||||||
|
copy: 1,
|
||||||
|
size: 32,
|
||||||
|
remixIcons,
|
||||||
|
elementIcons,
|
||||||
|
query: null,
|
||||||
|
});
|
||||||
|
const filterIcons = computed(() =>
|
||||||
|
(state.type ? state.remixIcons : state.elementIcons).filter(
|
||||||
|
(item) => !state.query || item.indexOf(state.query) !== -1
|
||||||
|
)
|
||||||
|
);
|
||||||
|
const handleIcon = (item) => {
|
||||||
|
if (state.copy) {
|
||||||
|
proxy.$copy(item);
|
||||||
|
} else {
|
||||||
|
proxy.$copy(`<el-icon name="${item}" :size="${state.size}" />`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
filterIcons,
|
||||||
|
handleIcon,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.icon-container {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
ul {
|
||||||
|
flex: 1;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, 160px);
|
||||||
|
justify-content: space-evenly;
|
||||||
|
gap: 0;
|
||||||
|
list-style: none;
|
||||||
|
li {
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
&:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 10px;
|
||||||
|
word-break: keep-all;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in new issue