wx-screen-ui 1.0.7 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/example/ExampleIndex.vue +86 -0
- package/dist/example/WxDescriptionExample.vue +202 -0
- package/dist/example/WxEchartsExample.vue +152 -0
- package/dist/example/WxEmptyExample.vue +56 -0
- package/dist/example/WxMessageExample.vue +84 -0
- package/dist/example/WxPaginationExample.vue +85 -0
- package/dist/example/WxRadioExample.vue +81 -0
- package/dist/example/WxSelectExample.vue +132 -0
- package/dist/example/WxTableExample.vue +90 -0
- package/dist/wx-screen-ui.css +1 -1
- package/dist/wx-screen-ui.es.js +179 -35
- package/dist/wx-screen-ui.umd.js +23 -23
- package/package.json +1 -1
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="wx-example-index">
|
|
3
|
+
<h2>Wx Screen UI 组件库示例</h2>
|
|
4
|
+
|
|
5
|
+
<div class="example-section">
|
|
6
|
+
<h3>消息提示组件</h3>
|
|
7
|
+
<WxMessageExample />
|
|
8
|
+
</div>
|
|
9
|
+
|
|
10
|
+
<div class="example-section">
|
|
11
|
+
<h3>空状态组件</h3>
|
|
12
|
+
<WxEmptyExample />
|
|
13
|
+
</div>
|
|
14
|
+
|
|
15
|
+
<div class="example-section">
|
|
16
|
+
<h3>表格组件</h3>
|
|
17
|
+
<WxTableExample />
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
<div class="example-section">
|
|
21
|
+
<h3>图表组件</h3>
|
|
22
|
+
<WxEchartsExample />
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
<div class="example-section">
|
|
26
|
+
<h3>分页组件</h3>
|
|
27
|
+
<WxPaginationExample />
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<div class="example-section">
|
|
31
|
+
<h3>单选框组件</h3>
|
|
32
|
+
<WxRadioExample />
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<div class="example-section">
|
|
36
|
+
<h3>描述信息组件</h3>
|
|
37
|
+
<WxDescriptionExample />
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<div class="example-section">
|
|
41
|
+
<h3>选择器组件</h3>
|
|
42
|
+
<WxSelectExample />
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
</template>
|
|
46
|
+
|
|
47
|
+
<script setup>
|
|
48
|
+
import WxMessageExample from "./WxMessageExample.vue";
|
|
49
|
+
import WxEmptyExample from "./WxEmptyExample.vue";
|
|
50
|
+
import WxTableExample from "./WxTableExample.vue";
|
|
51
|
+
import WxEchartsExample from "./WxEchartsExample.vue";
|
|
52
|
+
import WxPaginationExample from "./WxPaginationExample.vue";
|
|
53
|
+
import WxRadioExample from "./WxRadioExample.vue";
|
|
54
|
+
import WxSelectExample from "./WxSelectExample.vue";
|
|
55
|
+
import WxDescriptionExample from "./WxDescriptionExample.vue";
|
|
56
|
+
</script>
|
|
57
|
+
|
|
58
|
+
<style scoped>
|
|
59
|
+
.wx-example-index {
|
|
60
|
+
padding: 20px;
|
|
61
|
+
max-width: 1200px;
|
|
62
|
+
margin: 0 auto;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.example-section {
|
|
66
|
+
margin-bottom: 50px;
|
|
67
|
+
padding: 20px;
|
|
68
|
+
border: 1px solid #e4e7ed;
|
|
69
|
+
border-radius: 8px;
|
|
70
|
+
background-color: #ffffff;
|
|
71
|
+
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
h2 {
|
|
75
|
+
text-align: center;
|
|
76
|
+
margin-bottom: 40px;
|
|
77
|
+
color: #303133;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
h3 {
|
|
81
|
+
margin-bottom: 20px;
|
|
82
|
+
padding-bottom: 10px;
|
|
83
|
+
border-bottom: 1px solid #ebeef5;
|
|
84
|
+
color: #409eff;
|
|
85
|
+
}
|
|
86
|
+
</style>
|
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="wx-description-example">
|
|
3
|
+
<h3>WxDescription 描述信息组件示例</h3>
|
|
4
|
+
|
|
5
|
+
<!-- 基础用法 -->
|
|
6
|
+
<div class="description-demo">
|
|
7
|
+
<h4>基础用法</h4>
|
|
8
|
+
<WxDescription title="用户信息" :items="userInfoItems" />
|
|
9
|
+
</div>
|
|
10
|
+
|
|
11
|
+
<!-- 带边框的用法 -->
|
|
12
|
+
<div class="description-demo">
|
|
13
|
+
<h4>带边框的用法</h4>
|
|
14
|
+
<WxDescription title="商品信息" :items="productInfoItems" border />
|
|
15
|
+
</div>
|
|
16
|
+
|
|
17
|
+
<!-- 垂直方向排列 -->
|
|
18
|
+
<div class="description-demo">
|
|
19
|
+
<h4>垂直方向排列</h4>
|
|
20
|
+
<WxDescription title="订单信息" :items="orderInfoItems" direction="vertical" :column="1" />
|
|
21
|
+
</div>
|
|
22
|
+
|
|
23
|
+
<!-- 不同列数的用法 -->
|
|
24
|
+
<div class="description-demo">
|
|
25
|
+
<h4>不同列数的用法</h4>
|
|
26
|
+
<div class="column-demos">
|
|
27
|
+
<div class="demo-item">
|
|
28
|
+
<p>2列布局</p>
|
|
29
|
+
<WxDescription title="2列布局" :items="userInfoItems" :column="2" />
|
|
30
|
+
</div>
|
|
31
|
+
<div class="demo-item">
|
|
32
|
+
<p>4列布局</p>
|
|
33
|
+
<WxDescription title="4列布局" :items="userInfoItems" :column="4" />
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
<!-- 带操作按钮的用法 -->
|
|
39
|
+
<div class="description-demo">
|
|
40
|
+
<h4>带操作按钮的用法</h4>
|
|
41
|
+
<WxDescription title="账户信息" :items="accountInfoItems" @action="handleAction" />
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<!-- 使用 slot 自定义内容 -->
|
|
45
|
+
<div class="description-demo">
|
|
46
|
+
<h4>使用 slot 自定义内容</h4>
|
|
47
|
+
<WxDescription title="自定义内容示例" extra="2026-01-22">
|
|
48
|
+
<WxDescriptionItem label="用户名">
|
|
49
|
+
<span class="custom-value">admin</span>
|
|
50
|
+
</WxDescriptionItem>
|
|
51
|
+
<WxDescriptionItem label="状态">
|
|
52
|
+
<span class="status-tag active">在线</span>
|
|
53
|
+
</WxDescriptionItem>
|
|
54
|
+
<WxDescriptionItem label="角色">
|
|
55
|
+
<span class="role-tag">管理员</span>
|
|
56
|
+
</WxDescriptionItem>
|
|
57
|
+
<WxDescriptionItem label="注册时间"> 2026-01-01 10:00:00 </WxDescriptionItem>
|
|
58
|
+
</WxDescription>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
</template>
|
|
62
|
+
|
|
63
|
+
<script setup>
|
|
64
|
+
import { ref } from "vue";
|
|
65
|
+
import { WxDescription, WxDescriptionItem, WxMessage } from "../index.js";
|
|
66
|
+
|
|
67
|
+
// 用户信息数据
|
|
68
|
+
const userInfoItems = ref([
|
|
69
|
+
{ label: "用户名", value: "admin" },
|
|
70
|
+
{ label: "姓名", value: "张三" },
|
|
71
|
+
{ label: "性别", value: "男" },
|
|
72
|
+
{ label: "年龄", value: "25" },
|
|
73
|
+
{ label: "邮箱", value: "admin@example.com" },
|
|
74
|
+
{ label: "电话", value: "13800138000" },
|
|
75
|
+
]);
|
|
76
|
+
|
|
77
|
+
// 商品信息数据
|
|
78
|
+
const productInfoItems = ref([
|
|
79
|
+
{ label: "商品名称", value: "Vue 3 组件库" },
|
|
80
|
+
{ label: "商品编号", value: "PROD-20260122" },
|
|
81
|
+
{ label: "价格", value: "¥99.00" },
|
|
82
|
+
{ label: "库存", value: "100" },
|
|
83
|
+
{ label: "销量", value: "10" },
|
|
84
|
+
{ label: "状态", value: "在售" },
|
|
85
|
+
]);
|
|
86
|
+
|
|
87
|
+
// 订单信息数据
|
|
88
|
+
const orderInfoItems = ref([
|
|
89
|
+
{ label: "订单编号", value: "ORDER-20260122-001" },
|
|
90
|
+
{ label: "下单时间", value: "2026-01-22 10:30:00" },
|
|
91
|
+
{ label: "订单金额", value: "¥199.00" },
|
|
92
|
+
{ label: "支付方式", value: "支付宝" },
|
|
93
|
+
{ label: "订单状态", value: "已完成" },
|
|
94
|
+
{ label: "收货人", value: "张三" },
|
|
95
|
+
{ label: "收货地址", value: "北京市朝阳区某某街道某某小区1号楼101室" },
|
|
96
|
+
]);
|
|
97
|
+
|
|
98
|
+
// 处理操作按钮点击
|
|
99
|
+
const handleAction = event => {
|
|
100
|
+
const { action, item } = event;
|
|
101
|
+
WxMessage.info(`点击了 ${action.text} 按钮，操作对象：${item.label}`);
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
// 禁用账户
|
|
105
|
+
const handleDisableAccount = item => {
|
|
106
|
+
WxMessage.warning("确定要禁用账户吗？");
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
// 升级VIP
|
|
110
|
+
const handleUpgradeVIP = item => {
|
|
111
|
+
WxMessage.success("VIP升级成功！");
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
// 兑换积分
|
|
115
|
+
const handleExchangePoints = item => {
|
|
116
|
+
WxMessage.info("跳转到积分兑换页面");
|
|
117
|
+
};
|
|
118
|
+
|
|
119
|
+
// 账户信息数据（带操作按钮）
|
|
120
|
+
const accountInfoItems = ref([
|
|
121
|
+
{
|
|
122
|
+
label: "账户状态",
|
|
123
|
+
value: "正常",
|
|
124
|
+
actions: [{ text: "禁用", type: "danger", callback: handleDisableAccount }],
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
label: "会员等级",
|
|
128
|
+
value: "VIP",
|
|
129
|
+
actions: [{ text: "升级", type: "primary", callback: handleUpgradeVIP }],
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
label: "积分",
|
|
133
|
+
value: "1000",
|
|
134
|
+
actions: [{ text: "兑换", type: "default", callback: handleExchangePoints }],
|
|
135
|
+
},
|
|
136
|
+
]);
|
|
137
|
+
</script>
|
|
138
|
+
|
|
139
|
+
<style scoped>
|
|
140
|
+
.wx-description-example {
|
|
141
|
+
padding: 20px;
|
|
142
|
+
border: 1px solid #e4e7ed;
|
|
143
|
+
border-radius: 4px;
|
|
144
|
+
background-color: #f9f9f9;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.description-demo {
|
|
148
|
+
margin-bottom: 30px;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.column-demos {
|
|
152
|
+
display: flex;
|
|
153
|
+
gap: 20px;
|
|
154
|
+
flex-wrap: wrap;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.demo-item {
|
|
158
|
+
flex: 1;
|
|
159
|
+
min-width: 300px;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.demo-item p {
|
|
163
|
+
margin-bottom: 10px;
|
|
164
|
+
font-size: 14px;
|
|
165
|
+
color: #606266;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
/* 自定义内容样式 */
|
|
169
|
+
.custom-value {
|
|
170
|
+
color: #409eff;
|
|
171
|
+
font-weight: bold;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.status-tag {
|
|
175
|
+
display: inline-block;
|
|
176
|
+
padding: 2px 8px;
|
|
177
|
+
border-radius: 4px;
|
|
178
|
+
font-size: 12px;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.status-tag.active {
|
|
182
|
+
background-color: #f0f9eb;
|
|
183
|
+
color: #67c23a;
|
|
184
|
+
border: 1px solid #e1f5c4;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.role-tag {
|
|
188
|
+
display: inline-block;
|
|
189
|
+
padding: 2px 8px;
|
|
190
|
+
background-color: #ecf5ff;
|
|
191
|
+
color: #409eff;
|
|
192
|
+
border: 1px solid #d9ecff;
|
|
193
|
+
border-radius: 4px;
|
|
194
|
+
font-size: 12px;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
h4 {
|
|
198
|
+
margin-bottom: 15px;
|
|
199
|
+
font-size: 16px;
|
|
200
|
+
font-weight: 500;
|
|
201
|
+
}
|
|
202
|
+
</style>
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="wx-echarts-example">
|
|
3
|
+
<h3>WxEcharts 图表组件示例</h3>
|
|
4
|
+
|
|
5
|
+
<div class="echarts-demo">
|
|
6
|
+
<h4>折线图</h4>
|
|
7
|
+
<div class="chart-container">
|
|
8
|
+
<WxEcharts :options="lineOption" />
|
|
9
|
+
</div>
|
|
10
|
+
</div>
|
|
11
|
+
|
|
12
|
+
<div class="echarts-demo">
|
|
13
|
+
<h4>柱状图</h4>
|
|
14
|
+
<div class="chart-container">
|
|
15
|
+
<WxEcharts :options="barOption" />
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
<div class="echarts-demo">
|
|
20
|
+
<h4>饼图</h4>
|
|
21
|
+
<div class="chart-container pie-chart">
|
|
22
|
+
<WxEcharts :options="pieOption" />
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
</template>
|
|
27
|
+
|
|
28
|
+
<script setup>
|
|
29
|
+
import { ref, onMounted } from "vue";
|
|
30
|
+
import { WxEcharts } from "../index.js";
|
|
31
|
+
|
|
32
|
+
// 折线图配置
|
|
33
|
+
const lineOption = ref({
|
|
34
|
+
title: {
|
|
35
|
+
text: "折线图示例",
|
|
36
|
+
left: "center",
|
|
37
|
+
},
|
|
38
|
+
tooltip: {
|
|
39
|
+
trigger: "axis",
|
|
40
|
+
},
|
|
41
|
+
xAxis: {
|
|
42
|
+
type: "category",
|
|
43
|
+
data: ["1月", "2月", "3月", "4月", "5月", "6月"],
|
|
44
|
+
},
|
|
45
|
+
yAxis: {
|
|
46
|
+
type: "value",
|
|
47
|
+
},
|
|
48
|
+
series: [
|
|
49
|
+
{
|
|
50
|
+
data: [120, 132, 101, 134, 90, 230],
|
|
51
|
+
type: "line",
|
|
52
|
+
smooth: true,
|
|
53
|
+
},
|
|
54
|
+
],
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
// 柱状图配置
|
|
58
|
+
const barOption = ref({
|
|
59
|
+
title: {
|
|
60
|
+
text: "柱状图示例",
|
|
61
|
+
left: "center",
|
|
62
|
+
},
|
|
63
|
+
tooltip: {
|
|
64
|
+
trigger: "axis",
|
|
65
|
+
},
|
|
66
|
+
xAxis: {
|
|
67
|
+
type: "category",
|
|
68
|
+
data: ["1月", "2月", "3月", "4月", "5月", "6月"],
|
|
69
|
+
},
|
|
70
|
+
yAxis: {
|
|
71
|
+
type: "value",
|
|
72
|
+
},
|
|
73
|
+
series: [
|
|
74
|
+
{
|
|
75
|
+
data: [120, 200, 150, 80, 70, 110],
|
|
76
|
+
type: "bar",
|
|
77
|
+
itemStyle: {
|
|
78
|
+
color: "#409eff",
|
|
79
|
+
},
|
|
80
|
+
},
|
|
81
|
+
],
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
// 饼图配置
|
|
85
|
+
const pieOption = ref({
|
|
86
|
+
title: {
|
|
87
|
+
text: "饼图示例",
|
|
88
|
+
left: "center",
|
|
89
|
+
},
|
|
90
|
+
tooltip: {
|
|
91
|
+
trigger: "item",
|
|
92
|
+
},
|
|
93
|
+
legend: {
|
|
94
|
+
orient: "vertical",
|
|
95
|
+
left: "left",
|
|
96
|
+
},
|
|
97
|
+
series: [
|
|
98
|
+
{
|
|
99
|
+
type: "pie",
|
|
100
|
+
radius: "50%",
|
|
101
|
+
data: [
|
|
102
|
+
{ value: 30, name: "A" },
|
|
103
|
+
{ value: 25, name: "B" },
|
|
104
|
+
{ value: 20, name: "C" },
|
|
105
|
+
{ value: 15, name: "D" },
|
|
106
|
+
{ value: 10, name: "E" },
|
|
107
|
+
],
|
|
108
|
+
emphasis: {
|
|
109
|
+
itemStyle: {
|
|
110
|
+
shadowBlur: 10,
|
|
111
|
+
shadowOffsetX: 0,
|
|
112
|
+
shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
113
|
+
},
|
|
114
|
+
},
|
|
115
|
+
},
|
|
116
|
+
],
|
|
117
|
+
});
|
|
118
|
+
</script>
|
|
119
|
+
|
|
120
|
+
<style scoped>
|
|
121
|
+
.wx-echarts-example {
|
|
122
|
+
padding: 20px;
|
|
123
|
+
border: 1px solid #e4e7ed;
|
|
124
|
+
border-radius: 4px;
|
|
125
|
+
background-color: #f9f9f9;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.echarts-demo {
|
|
129
|
+
margin-bottom: 30px;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.chart-container {
|
|
133
|
+
width: 100%;
|
|
134
|
+
height: 400px;
|
|
135
|
+
background-color: #fff;
|
|
136
|
+
border: 1px solid #dcdfe6;
|
|
137
|
+
border-radius: 4px;
|
|
138
|
+
padding: 20px;
|
|
139
|
+
box-sizing: border-box;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.pie-chart {
|
|
143
|
+
max-width: 600px;
|
|
144
|
+
margin: 0 auto;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
h4 {
|
|
148
|
+
margin-bottom: 15px;
|
|
149
|
+
font-size: 16px;
|
|
150
|
+
font-weight: 500;
|
|
151
|
+
}
|
|
152
|
+
</style>
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="wx-empty-example">
|
|
3
|
+
<h3>WxEmpty 空状态组件示例</h3>
|
|
4
|
+
|
|
5
|
+
<div class="empty-demo">
|
|
6
|
+
<h4>默认空状态</h4>
|
|
7
|
+
<WxEmpty />
|
|
8
|
+
</div>
|
|
9
|
+
|
|
10
|
+
<div class="empty-demo">
|
|
11
|
+
<h4>带自定义文本的空状态</h4>
|
|
12
|
+
<WxEmpty text="暂无数据" />
|
|
13
|
+
</div>
|
|
14
|
+
|
|
15
|
+
<div class="empty-demo">
|
|
16
|
+
<h4>在容器中使用</h4>
|
|
17
|
+
<div class="container">
|
|
18
|
+
<WxEmpty />
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
22
|
+
</template>
|
|
23
|
+
|
|
24
|
+
<script setup>
|
|
25
|
+
import { WxEmpty } from '../index.js'
|
|
26
|
+
</script>
|
|
27
|
+
|
|
28
|
+
<style scoped>
|
|
29
|
+
.wx-empty-example {
|
|
30
|
+
padding: 20px;
|
|
31
|
+
border: 1px solid #e4e7ed;
|
|
32
|
+
border-radius: 4px;
|
|
33
|
+
background-color: #f9f9f9;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.empty-demo {
|
|
37
|
+
margin-bottom: 30px;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.container {
|
|
41
|
+
width: 400px;
|
|
42
|
+
height: 300px;
|
|
43
|
+
border: 1px solid #dcdfe6;
|
|
44
|
+
border-radius: 4px;
|
|
45
|
+
display: flex;
|
|
46
|
+
align-items: center;
|
|
47
|
+
justify-content: center;
|
|
48
|
+
background-color: #fff;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
h4 {
|
|
52
|
+
margin-bottom: 15px;
|
|
53
|
+
font-size: 16px;
|
|
54
|
+
font-weight: 500;
|
|
55
|
+
}
|
|
56
|
+
</style>
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="wx-message-example">
|
|
3
|
+
<h3>WxMessage 命令式组件示例</h3>
|
|
4
|
+
|
|
5
|
+
<div class="button-group">
|
|
6
|
+
<button @click="showSuccess">成功消息</button>
|
|
7
|
+
<button @click="showError">错误消息</button>
|
|
8
|
+
<button @click="showWarning">警告消息</button>
|
|
9
|
+
<button @click="showInfo">信息消息</button>
|
|
10
|
+
<button @click="showLoading">加载中消息</button>
|
|
11
|
+
<button @click="clearAll">清空所有</button>
|
|
12
|
+
</div>
|
|
13
|
+
</div>
|
|
14
|
+
</template>
|
|
15
|
+
|
|
16
|
+
<script setup>
|
|
17
|
+
import { WxMessage } from '../index.js'
|
|
18
|
+
|
|
19
|
+
// 显示成功消息
|
|
20
|
+
const showSuccess = () => {
|
|
21
|
+
WxMessage.success('数据提交成功！', 3000)
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// 显示错误消息
|
|
25
|
+
const showError = () => {
|
|
26
|
+
WxMessage.error('网络连接失败，请检查网络设置！', 4000)
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
// 显示警告消息
|
|
30
|
+
const showWarning = () => {
|
|
31
|
+
WxMessage.warning('请检查输入信息是否正确！', 3500)
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
// 显示信息消息
|
|
35
|
+
const showInfo = () => {
|
|
36
|
+
WxMessage.info('系统将在10分钟后进行维护，请提前保存工作！', 5000)
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// 显示加载中消息
|
|
40
|
+
const showLoading = () => {
|
|
41
|
+
WxMessage.loading('正在处理您的请求...')
|
|
42
|
+
// 模拟异步操作
|
|
43
|
+
setTimeout(() => {
|
|
44
|
+
WxMessage.clear()
|
|
45
|
+
WxMessage.success('操作已完成！')
|
|
46
|
+
}, 2500)
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// 清空所有消息
|
|
50
|
+
const clearAll = () => {
|
|
51
|
+
WxMessage.clear()
|
|
52
|
+
}
|
|
53
|
+
</script>
|
|
54
|
+
|
|
55
|
+
<style scoped>
|
|
56
|
+
.wx-message-example {
|
|
57
|
+
padding: 20px;
|
|
58
|
+
border: 1px solid #e4e7ed;
|
|
59
|
+
border-radius: 4px;
|
|
60
|
+
background-color: #f9f9f9;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.button-group {
|
|
64
|
+
display: flex;
|
|
65
|
+
flex-wrap: wrap;
|
|
66
|
+
gap: 10px;
|
|
67
|
+
margin-top: 20px;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
button {
|
|
71
|
+
padding: 8px 16px;
|
|
72
|
+
border: 1px solid #dcdfe6;
|
|
73
|
+
border-radius: 4px;
|
|
74
|
+
background-color: #fff;
|
|
75
|
+
cursor: pointer;
|
|
76
|
+
font-size: 14px;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
button:hover {
|
|
80
|
+
color: #409eff;
|
|
81
|
+
border-color: #c6e2ff;
|
|
82
|
+
background-color: #ecf5ff;
|
|
83
|
+
}
|
|
84
|
+
</style>
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="wx-pagination-example">
|
|
3
|
+
<h3>WxPagination 分页组件示例</h3>
|
|
4
|
+
|
|
5
|
+
<div class="pagination-demo">
|
|
6
|
+
<h4>基础分页</h4>
|
|
7
|
+
<WxPagination :total="100" :pageSize="10" />
|
|
8
|
+
</div>
|
|
9
|
+
|
|
10
|
+
<div class="pagination-demo">
|
|
11
|
+
<h4>带页码变化回调的分页</h4>
|
|
12
|
+
<div class="pagination-with-callback">
|
|
13
|
+
<WxPagination
|
|
14
|
+
:total="200"
|
|
15
|
+
:pageSize="20"
|
|
16
|
+
:currentPage="currentPage"
|
|
17
|
+
@currentChange="handleCurrentChange"
|
|
18
|
+
/>
|
|
19
|
+
<p class="page-info">当前页码: {{ currentPage }}</p>
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
22
|
+
|
|
23
|
+
<div class="pagination-demo">
|
|
24
|
+
<h4>不同尺寸的分页</h4>
|
|
25
|
+
<div class="pagination-sizes">
|
|
26
|
+
<WxPagination :total="150" :pageSize="15" size="small" />
|
|
27
|
+
<WxPagination :total="150" :pageSize="15" style="margin-top: 10px;" />
|
|
28
|
+
<WxPagination :total="150" :pageSize="15" size="large" style="margin-top: 10px;" />
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</template>
|
|
33
|
+
|
|
34
|
+
<script setup>
|
|
35
|
+
import { ref } from 'vue'
|
|
36
|
+
import { WxPagination } from '../index.js'
|
|
37
|
+
|
|
38
|
+
// 当前页码
|
|
39
|
+
const currentPage = ref(1)
|
|
40
|
+
|
|
41
|
+
// 页码变化处理
|
|
42
|
+
const handleCurrentChange = (page) => {
|
|
43
|
+
currentPage.value = page
|
|
44
|
+
console.log('页码变化:', page)
|
|
45
|
+
}
|
|
46
|
+
</script>
|
|
47
|
+
|
|
48
|
+
<style scoped>
|
|
49
|
+
.wx-pagination-example {
|
|
50
|
+
padding: 20px;
|
|
51
|
+
border: 1px solid #e4e7ed;
|
|
52
|
+
border-radius: 4px;
|
|
53
|
+
background-color: #f9f9f9;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.pagination-demo {
|
|
57
|
+
margin-bottom: 30px;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.pagination-with-callback {
|
|
61
|
+
background-color: #fff;
|
|
62
|
+
padding: 20px;
|
|
63
|
+
border: 1px solid #dcdfe6;
|
|
64
|
+
border-radius: 4px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.page-info {
|
|
68
|
+
margin-top: 15px;
|
|
69
|
+
font-size: 14px;
|
|
70
|
+
color: #606266;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.pagination-sizes {
|
|
74
|
+
background-color: #fff;
|
|
75
|
+
padding: 20px;
|
|
76
|
+
border: 1px solid #dcdfe6;
|
|
77
|
+
border-radius: 4px;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
h4 {
|
|
81
|
+
margin-bottom: 15px;
|
|
82
|
+
font-size: 16px;
|
|
83
|
+
font-weight: 500;
|
|
84
|
+
}
|
|
85
|
+
</style>
|