<template>
|
<div class="home-view">
|
<h1>Home View</h1>
|
<h2>pinia 示例</h2>
|
<section>
|
<span> count: {{ counter.count }} </span>
|
<el-button type="primary" @click="counter.increment">加一</el-button>
|
</section>
|
<h2>element plus 组件 icon 示例</h2>
|
<section>
|
<el-button type="primary">
|
<el-icon style="vertical-align: middle">
|
<Search />
|
</el-icon>
|
<span style="vertical-align: middle"> Search </span>
|
<el-icon class="is-loading">
|
<Loading />
|
</el-icon>
|
</el-button>
|
</section>
|
<h2>Iconify 图标示例, 支持自动下载自动导入</h2>
|
<section>
|
<p><a href="https://icon-sets.iconify.design/">iconify</a></p>
|
<p>
|
iconify 有许多图标集合,所以配置了自动下载和自动引入,
|
但是下载所有的图标集合需要约120兆,所以建议事先选定好用哪个图标集, 别乱加图标不然要下载好多
|
</p>
|
<p>使用方法: <a href="https://github.com/unplugin/unplugin-icons#usage">github.com/unplugin/unplugin-icons</a></p>
|
<div>
|
<el-icon size="40" color="red">
|
<IconAlert />
|
</el-icon>
|
</div>
|
</section>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { useCounterStore } from '@/stores/counter'
|
import { Loading, Search } from '@element-plus/icons-vue'
|
import IconAlert from '~icons/mdi/alert'
|
|
const counter = useCounterStore()
|
</script>
|
|
<style lang="scss" scoped>
|
section {
|
margin: 10px 0 40px 0;
|
}
|
</style>
|
