mirror of
https://github.com/un-pany/v3-admin-vite.git
synced 2025-04-20 10:59:21 +08:00
perf: 优化 demo 页面
This commit is contained in:
pany
parent
8e423954ce
commit
6fd7dfe7aa
@ -1,3 +1,5 @@
|
||||
import { ElMessage } from "element-plus"
|
||||
|
||||
/** 模拟接口响应数据 */
|
||||
const SELECT_RESPONSE_DATA = {
|
||||
code: 0,
|
||||
@ -19,17 +21,20 @@ const SELECT_RESPONSE_DATA = {
|
||||
message: "获取 Select 数据成功"
|
||||
}
|
||||
|
||||
const ERROR_MESSAGE = "接口发生错误"
|
||||
|
||||
/** 模拟接口 */
|
||||
export function getSelectDataApi() {
|
||||
return new Promise<typeof SELECT_RESPONSE_DATA>((resolve, reject) => {
|
||||
// 模拟接口响应时间 2s
|
||||
setTimeout(() => {
|
||||
// 模拟接口调用成功
|
||||
if (Math.random() < 0.8) {
|
||||
// 模拟接口调用成功
|
||||
resolve(SELECT_RESPONSE_DATA)
|
||||
} else {
|
||||
// 模拟接口调用出错
|
||||
reject(new Error("接口发生错误"))
|
||||
reject(new Error(ERROR_MESSAGE))
|
||||
ElMessage.error(ERROR_MESSAGE)
|
||||
}
|
||||
}, 2000)
|
||||
})
|
||||
|
||||
@ -9,12 +9,22 @@ const { loading, options, value } = useFetchSelect({
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<h4>该示例是演示：通过 composable 自动调用 api 后拿到 Select 组件需要的数据并传递给 Select 组件</h4>
|
||||
<h5>Select 示例</h5>
|
||||
<el-select v-model="value" :loading="loading" filterable>
|
||||
<el-option v-for="(item, index) in options" v-bind="item" :key="index" placeholder="请选择" />
|
||||
</el-select>
|
||||
<h5>Select V2 示例（如果数据量过多，可以选择该组件）</h5>
|
||||
<el-select-v2 v-model="value" :loading="loading" :options="options" filterable placeholder="请选择" />
|
||||
<el-card shadow="never">
|
||||
该示例是演示：通过 composable 自动调用 api 后拿到 Select 组件需要的数据并传递给 Select 组件
|
||||
</el-card>
|
||||
<el-card header="Select 示例" shadow="never" v-loading="loading">
|
||||
<el-select v-model="value" filterable>
|
||||
<el-option v-for="(item, index) in options" v-bind="item" :key="index" placeholder="请选择" />
|
||||
</el-select>
|
||||
</el-card>
|
||||
<el-card header="Select V2 示例（如果数据量过多，可以选择该组件）" shadow="never" v-loading="loading">
|
||||
<el-select-v2 v-model="value" :options="options" filterable placeholder="请选择" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -25,7 +25,7 @@ async function querySuccess() {
|
||||
// 注意：
|
||||
// 1. getSuccessApi 是一个函数而非函数调用
|
||||
// 2. 如需给 getSuccessApi 函数传递参数，请在后面的括号中进行（真正的 getSuccessApi 调用）
|
||||
const res = await useFullscreenLoading(getSuccessApi)([2, 3, 3])
|
||||
const res = await useFullscreenLoading(getSuccessApi)([1, 2, 3])
|
||||
ElMessage.success(`${res.message}，传参为 ${res.data.list.toString()}`)
|
||||
}
|
||||
|
||||
@ -40,12 +40,22 @@ async function queryError() {
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<h4>该示例是演示：通过将要执行的函数传递给 composable，让 composable 自动开启全屏 loading，函数执行结束后自动关闭 loading</h4>
|
||||
<el-button type="primary" @click="querySuccess">
|
||||
查询成功
|
||||
</el-button>
|
||||
<el-button type="danger" @click="queryError">
|
||||
查询失败
|
||||
</el-button>
|
||||
<el-card shadow="never">
|
||||
该示例是演示：通过将要执行的函数传递给 composable，让 composable 自动开启全屏 loading，函数执行结束后自动关闭 loading
|
||||
</el-card>
|
||||
<el-card header="示例" shadow="never">
|
||||
<el-button type="primary" @click="querySuccess">
|
||||
查询成功
|
||||
</el-button>
|
||||
<el-button type="danger" @click="queryError">
|
||||
查询失败
|
||||
</el-button>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,47 +9,52 @@ const { setWatermark: setGlobalWatermark, clearWatermark: clearGlobalWatermark }
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<h4>
|
||||
<el-card shadow="never">
|
||||
该示例是演示：通过调用 composable 开启或关闭水印，
|
||||
支持局部、全局、自定义样式（颜色、透明度、字体大小、字体、倾斜角度等），并自带防御（防删、防隐藏）和自适应功能
|
||||
</h4>
|
||||
<div ref="localRef" class="local" />
|
||||
<el-button-group>
|
||||
<el-button type="primary" @click="setWatermark('局部水印', { color: '#409eff' })">
|
||||
创建局部水印
|
||||
</el-button>
|
||||
<el-button type="warning" @click="setWatermark('没有防御功能的局部水印', { color: '#e6a23c', defense: false })">
|
||||
关闭防御功能
|
||||
</el-button>
|
||||
<el-button type="danger" @click="clearWatermark">
|
||||
清除局部水印
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
<el-button-group>
|
||||
<el-button type="primary" @click="setGlobalWatermark('全局水印', { color: '#409eff' })">
|
||||
创建全局水印
|
||||
</el-button>
|
||||
<el-button
|
||||
type="warning"
|
||||
@click="setGlobalWatermark('没有防御功能的全局水印', { color: '#e6a23c', defense: false })"
|
||||
>
|
||||
关闭防御功能
|
||||
</el-button>
|
||||
<el-button type="danger" @click="clearGlobalWatermark">
|
||||
清除全局水印
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
</el-card>
|
||||
<el-card header="示例" shadow="never">
|
||||
<div ref="localRef" class="local" />
|
||||
<template #footer>
|
||||
<el-button-group>
|
||||
<el-button type="primary" @click="setWatermark('局部水印', { color: '#409eff' })">
|
||||
创建局部水印
|
||||
</el-button>
|
||||
<el-button type="warning" @click="setWatermark('没有防御功能的局部水印', { color: '#e6a23c', defense: false })">
|
||||
创建无防御局部水印
|
||||
</el-button>
|
||||
<el-button type="danger" @click="clearWatermark">
|
||||
清除局部水印
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
<el-button-group>
|
||||
<el-button type="primary" @click="setGlobalWatermark('全局水印', { color: '#409eff' })">
|
||||
创建全局水印
|
||||
</el-button>
|
||||
<el-button type="warning" @click="setGlobalWatermark('没有防御功能的全局水印', { color: '#e6a23c', defense: false })">
|
||||
创建无防御全局水印
|
||||
</el-button>
|
||||
<el-button type="danger" @click="clearGlobalWatermark">
|
||||
清除全局水印
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.local {
|
||||
height: 30vh;
|
||||
border: 2px dashed var(--el-color-primary);
|
||||
.el-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.local {
|
||||
height: 35vh;
|
||||
border: 2px dashed var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-button-group {
|
||||
margin-right: 12px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,18 +1,16 @@
|
||||
<template>
|
||||
<div h-full uno-padding-20>
|
||||
<div h-full text-center flex select-none all:transition-400>
|
||||
<div ma>
|
||||
<div text-5xl fw100 animate-bounce-alt animate-count-infinite animate-1s>
|
||||
UnoCSS
|
||||
</div>
|
||||
<div op30 dark:op60 text-lg fw300 m1>
|
||||
该页面是一个 UnoCSS 的使用案例，其他页面依旧采用 Scss
|
||||
</div>
|
||||
<div m2 flex justify-center text-lg op30 dark:op60 hover="op80" dark:hover="op80">
|
||||
<a href="https://antfu.me/posts/reimagine-atomic-css-zh" target="_blank">
|
||||
推荐阅读：重新构想原子化 CSS
|
||||
</a>
|
||||
</div>
|
||||
<div uno-padding-20 h-full text-center flex select-none all:transition-400>
|
||||
<div ma>
|
||||
<div text-5xl fw100 animate-bounce-alt animate-count-infinite animate-duration-1s>
|
||||
UnoCSS
|
||||
</div>
|
||||
<div op30 text-lg fw300 m1 dark:op60>
|
||||
该页面是一个 UnoCSS 的使用案例，其他页面依旧采用 Scss
|
||||
</div>
|
||||
<div m2 uno-flex-x-center text-lg op30 hover="op80" dark:op60 dark:hover="op80">
|
||||
<a href="https://antfu.me/posts/reimagine-atomic-css-zh" target="_blank">
|
||||
推荐阅读：重新构想原子化 CSS
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user