antdv基础
# 前言
一千个人心中有一千个哈姆雷特,最新使用 wails V3
在写一个桌面软件,样式挑选来挑选去最后决定还是使用大厂的产品 antdv
(毕竟 NanUI
作者都已经顶不住大环境去卖钢材了,个人兴趣的东西真心不敢用小厂的东西了)
# 主题配置
在 App.vue
的代码中进行变更,包裹原本 <template></template>
中的代码
token
中的数据可以直接在 ant
主题配置 (opens new window) 配置后进行导出,导出的格式是 json
的,我新手小白不知道如何直接读取这个配置文件,只好写入到代码中去了
<template>
<a-config-provider
:theme="{
token: {
colorPrimary: '#00bb3c',
colorInfo: '#00bb3c',
borderRadius: 8,
wireframe: true,
fontSize: 14,
sizeStep: 4,
sizeUnit: 4
},
}">
<!-- 原来的代码 -->
</a-config-provider>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 组件
# slider
滑动输入条
# slider
滑动输入条只允许选中设置的刻度
注意:
- 设置
step
为null
使其只能选择刻度点- 在
change
事件中处理只选择当前刻度的逻辑:
<template>
<a-slider
:marks="marks"
:step="null"
:value="sliderValue"
@change="handleChange"
:tooltipOpen=false
v-model:value="historyCapacity">
</a-slider>
</template>
<script setup>
import {ref} from 'vue';
// 历史记录容量
const historyCapacity = ref("周");
// 滑块值
let sliderValue = ref(35);
// 滑块刻度
const marks = {
0: '天',
35: '周',
70: '月',
100: '无限'
}
// 限制滑块刻度选择
function handleChange(value) {
sliderValue.value = parseInt(value);
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# form
表单
# 为什么表单右侧输入控件无法靠左对齐
解决方案,将右侧的元素的宽度设置为 100%
# Segmented
分段控制器
# 使用分段控制器实现类似 Tabs(标签页)
的效果
主要是前端小白菜,没办法各种坑
这段代码主要的逻辑是使用 Segmented
中的 change
属性来进行下面的 div
显示和隐藏
<template>
<a-segmented class="segmentedStyle" :selectedIndex="setType"
size="large" v-model:value="setType" block
:options="setTopData" @change="onChange">
<template #label="{ value: val, payload = {} }">
<div style="padding: 4px 4px;text-align:center">
<template v-if="payload.icon">
<Icon :icon="payload.icon" class="iconStyle">
</Icon>
<div style="line-height: 10px">{{ payload.label }}</div>
</template>
</div>
</template>
</a-segmented>
<div v-if="setType === 'SettingsGeneral'">
<SetGeneral/>
</div>
<div v-else>
<SetAbout/>
</div>
</template>
<script setup>
import {ref} from 'vue';
import SetGeneral from "@/components/set/setGeneral.vue";
import {Icon} from "@iconify/vue";
import SetAbout from "@/components/set/setAbout.vue";
// 顶部导航栏数据
const setTopData = ref([
{
value: 'SettingsGeneral',
payload: {
label: '通用',
icon: "material-symbols:settings-outline",
},
},
{
value: 'SettingsAbout',
payload: {
label: '关于',
icon: "mdi:information-outline",
},
},
]);
// 选中的导航栏
const setType = ref('SettingsGeneral');
// 改变分段控制器操作
function onChange(key) {
setType.value = key;
}
</script>
<style scoped>
.segmentedStyle {
margin: 5px;
height: 70px;
}
.iconStyle {
font-size: 36px;
color: #00c042;
margin-bottom: -5px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
# Typography
排版
- 指定
Typography
的行数,超出行数后显示省略号,并且不显示展开按钮(默认:Expand
)
<a-typography>
<!-- 本例子现实的情况是:6行,并隐藏展开按钮 -->
<a-typography-paragraph :ellipsis="{rows:6,expandable:false}">
{{content}}
</a-typography-paragraph>
</a-typography>
1
2
3
4
5
6
2
3
4
5
6
- 指定
Typography
内容靠左
<a-typography>
<a-typography-paragraph style="text-align: left">
{{content}}
</a-typography-paragraph>
</a-typography>
1
2
3
4
5
2
3
4
5
# Table
表格
更新时间: 2023/11/20 18:42:59