Skip to content

Commit 6fd7dfe

Browse files
pany-angpany-ang
committed
perf: 优化 demo 页面
1 parent 8e42395 commit 6fd7dfe

File tree

5 files changed

+89
-61
lines changed

5 files changed

+89
-61
lines changed

‎src/pages/demo/composable-demo/apis/use-fetch-select.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { ElMessage } from "element-plus"
2+
13
/** 模拟接口响应数据 */
24
const SELECT_RESPONSE_DATA = {
35
code: 0,
@@ -19,17 +21,20 @@ const SELECT_RESPONSE_DATA = {
1921
message: "获取 Select 数据成功"
2022
}
2123

24+
const ERROR_MESSAGE = "接口发生错误"
25+
2226
/** 模拟接口 */
2327
export function getSelectDataApi() {
2428
return new Promise<typeof SELECT_RESPONSE_DATA>((resolve, reject) => {
2529
// 模拟接口响应时间 2s
2630
setTimeout(() => {
27-
// 模拟接口调用成功
2831
if (Math.random() < 0.8) {
32+
// 模拟接口调用成功
2933
resolve(SELECT_RESPONSE_DATA)
3034
} else {
3135
// 模拟接口调用出错
32-
reject(new Error("接口发生错误"))
36+
reject(new Error(ERROR_MESSAGE))
37+
ElMessage.error(ERROR_MESSAGE)
3338
}
3439
}, 2000)
3540
})

‎src/pages/demo/composable-demo/use-fetch-select.vue‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,22 @@ const { loading, options, value } = useFetchSelect({
99

1010
<template>
1111
<div class="app-container">
12-
<h4>该示例是演示：通过 composable 自动调用 api 后拿到 Select 组件需要的数据并传递给 Select 组件</h4>
13-
<h5>Select 示例</h5>
14-
<el-select v-model="value" :loading="loading" filterable>
15-
<el-option v-for="(item, index) in options" v-bind="item" :key="index" placeholder="请选择" />
16-
</el-select>
17-
<h5>Select V2 示例（如果数据量过多，可以选择该组件）</h5>
18-
<el-select-v2 v-model="value" :loading="loading" :options="options" filterable placeholder="请选择" />
12+
<el-card shadow="never">
13+
该示例是演示：通过 composable 自动调用 api 后拿到 Select 组件需要的数据并传递给 Select 组件
14+
</el-card>
15+
<el-card header="Select 示例" shadow="never" v-loading="loading">
16+
<el-select v-model="value" filterable>
17+
<el-option v-for="(item, index) in options" v-bind="item" :key="index" placeholder="请选择" />
18+
</el-select>
19+
</el-card>
20+
<el-card header="Select V2 示例（如果数据量过多，可以选择该组件）" shadow="never" v-loading="loading">
21+
<el-select-v2 v-model="value" :options="options" filterable placeholder="请选择" />
22+
</el-card>
1923
</div>
2024
</template>
25+
26+
<style lang="scss" scoped>
27+
.el-card {
28+
margin-bottom: 20px;
29+
}
30+
</style>

‎src/pages/demo/composable-demo/use-fullscreen-loading.vue‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ async function querySuccess() {
2525
// 注意：
2626
// 1. getSuccessApi 是一个函数而非函数调用
2727
// 2. 如需给 getSuccessApi 函数传递参数，请在后面的括号中进行（真正的 getSuccessApi 调用）
28-
const res = await useFullscreenLoading(getSuccessApi)([2, 3, 3])
28+
const res = await useFullscreenLoading(getSuccessApi)([1, 2, 3])
2929
ElMessage.success(`${res.message}，传参为 ${res.data.list.toString()}`)
3030
}
3131
@@ -40,12 +40,22 @@ async function queryError() {
4040

4141
<template>
4242
<div class="app-container">
43-
<h4>该示例是演示：通过将要执行的函数传递给 composable，让 composable 自动开启全屏 loading，函数执行结束后自动关闭 loading</h4>
44-
<el-button type="primary" @click="querySuccess">
45-
查询成功
46-
</el-button>
47-
<el-button type="danger" @click="queryError">
48-
查询失败
49-
</el-button>
43+
<el-card shadow="never">
44+
该示例是演示：通过将要执行的函数传递给 composable，让 composable 自动开启全屏 loading，函数执行结束后自动关闭 loading
45+
</el-card>
46+
<el-card header="示例" shadow="never">
47+
<el-button type="primary" @click="querySuccess">
48+
查询成功
49+
</el-button>
50+
<el-button type="danger" @click="queryError">
51+
查询失败
52+
</el-button>
53+
</el-card>
5054
</div>
5155
</template>
56+
57+
<style lang="scss" scoped>
58+
.el-card {
59+
margin-bottom: 20px;
60+
}
61+
</style>

‎src/pages/demo/composable-demo/use-watermark.vue‎

Lines changed: 35 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -9,47 +9,52 @@ const { setWatermark: setGlobalWatermark, clearWatermark: clearGlobalWatermark }
99

1010
<template>
1111
<div class="app-container">
12-
<h4>
12+
<el-card shadow="never">
1313
该示例是演示：通过调用 composable 开启或关闭水印，
1414
支持局部、全局、自定义样式（颜色、透明度、字体大小、字体、倾斜角度等），并自带防御（防删、防隐藏）和自适应功能
15-
</h4>
16-
<div ref="localRef" class="local" />
17-
<el-button-group>
18-
<el-button type="primary" @click="setWatermark('局部水印', { color: '#409eff' })">
19-
创建局部水印
20-
</el-button>
21-
<el-button type="warning" @click="setWatermark('没有防御功能的局部水印', { color: '#e6a23c', defense: false })">
22-
关闭防御功能
23-
</el-button>
24-
<el-button type="danger" @click="clearWatermark">
25-
清除局部水印
26-
</el-button>
27-
</el-button-group>
28-
<el-button-group>
29-
<el-button type="primary" @click="setGlobalWatermark('全局水印', { color: '#409eff' })">
30-
创建全局水印
31-
</el-button>
32-
<el-button
33-
type="warning"
34-
@click="setGlobalWatermark('没有防御功能的全局水印', { color: '#e6a23c', defense: false })"
35-
>
36-
关闭防御功能
37-
</el-button>
38-
<el-button type="danger" @click="clearGlobalWatermark">
39-
清除全局水印
40-
</el-button>
41-
</el-button-group>
15+
</el-card>
16+
<el-card header="示例" shadow="never">
17+
<div ref="localRef" class="local" />
18+
<template #footer>
19+
<el-button-group>
20+
<el-button type="primary" @click="setWatermark('局部水印', { color: '#409eff' })">
21+
创建局部水印
22+
</el-button>
23+
<el-button type="warning" @click="setWatermark('没有防御功能的局部水印', { color: '#e6a23c', defense: false })">
24+
创建无防御局部水印
25+
</el-button>
26+
<el-button type="danger" @click="clearWatermark">
27+
清除局部水印
28+
</el-button>
29+
</el-button-group>
30+
<el-button-group>
31+
<el-button type="primary" @click="setGlobalWatermark('全局水印', { color: '#409eff' })">
32+
创建全局水印
33+
</el-button>
34+
<el-button type="warning" @click="setGlobalWatermark('没有防御功能的全局水印', { color: '#e6a23c', defense: false })">
35+
创建无防御全局水印
36+
</el-button>
37+
<el-button type="danger" @click="clearGlobalWatermark">
38+
清除全局水印
39+
</el-button>
40+
</el-button-group>
41+
</template>
42+
</el-card>
4243
</div>
4344
</template>
4445

4546
<style lang="scss" scoped>
47+
.el-card {
48+
margin-bottom: 20px;
49+
}
50+
4651
.local {
47-
height: 30vh;
52+
height: 35vh;
4853
border: 2px dashed var(--el-color-primary);
49-
margin-bottom: 20px;
5054
}
5155
5256
.el-button-group {
5357
margin-right: 12px;
58+
margin-bottom: 5px;
5459
}
5560
</style>

‎src/pages/demo/unocss/index.vue‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
<template>
2-
<div h-full uno-padding-20>
3-
<div h-full text-center flex select-none all:transition-400>
4-
<div ma>
5-
<div text-5xl fw100 animate-bounce-alt animate-count-infinite animate-1s>
6-
UnoCSS
7-
</div>
8-
<div op30 dark:op60 text-lg fw300 m1>
9-
该页面是一个 UnoCSS 的使用案例，其他页面依旧采用 Scss
10-
</div>
11-
<div m2 flex justify-center text-lg op30 dark:op60 hover="op80" dark:hover="op80">
12-
<a href="https://antfu.me/posts/reimagine-atomic-css-zh" target="_blank">
13-
推荐阅读：重新构想原子化 CSS
14-
</a>
15-
</div>
2+
<div uno-padding-20 h-full text-center flex select-none all:transition-400>
3+
<div ma>
4+
<div text-5xl fw100 animate-bounce-alt animate-count-infinite animate-duration-1s>
5+
UnoCSS
6+
</div>
7+
<div op30 text-lg fw300 m1 dark:op60>
8+
该页面是一个 UnoCSS 的使用案例，其他页面依旧采用 Scss
9+
</div>
10+
<div m2 uno-flex-x-center text-lg op30 hover="op80" dark:op60 dark:hover="op80">
11+
<a href="https://antfu.me/posts/reimagine-atomic-css-zh" target="_blank">
12+
推荐阅读：重新构想原子化 CSS
13+
</a>
1614
</div>
1715
</div>
1816
</div>

0 commit comments

Comments
 (0)