navie-ui经验
# 前言
naive-ui
的样式深得我心,开始尝试顺手记录
# 栅格 -- grid
# 栅格如何使内容其居中
<n-grid :cols="4" item-style="justify-self:center;">
<n-gi>
1
</n-gi>
<n-gi>
2
</n-gi>
<n-gi>
3
</n-gi>
<n-gi>
4
</n-gi>
</n-grid>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 数据表格 -- Data Table
表格Table
简单表格 (opens new window)
数据表格Data Table
(opens new window)
# 如何将异步数据塞入到表格中
在<n-data-table>
中添加属性data
,将上游返回的值放入到data
中即可
<n-data-table
remote
ref="table"
:data="data">
</n-data-table>
<script setup>
// 表格头部
var columns = [
{
title: "第一列",
key: "test1",
},
{
title: "第二列",
key: "test2",
},
];
var data = ref([]);
proxy
.$http({
method: "POST",
url: "/api/general/getOrders",
params: formValue.value,
})
.then((response) => {
var responseData = response.data;
if (responseData.state !== "ok") {
// 返回错误信息
return;
} else {
data.value = responseData.data.list;
}
});
</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
30
31
32
33
34
35
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
关于
proxy
请求的写法参考Vue3+Vite全局使用axios,解决axios跨域问题 (opens new window)
# Data Table
实现分页
代码块中的 search() 在 分页和
form
搜索进行关联 中有详细的说明
<n-pagination
v-model:page="tablePage"
:item-count="tableTotalCount"
:page-sizes="[20, 30, 40,50, 100]"
show-size-picker
@update-page = "handlePageChange"
@update-page-size = "handlePageSizeChange"
>
<template #prefix="{ itemCount }">
<span>共 {{ itemCount }} 条数据</span>
</template>
</n-pagination>
function handlePageChange(page) {
tablePage.value = page;
search();
}
function handlePageSizeChange(newPageSize) {
tablePageSize.value = newPageSize;
search();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 分页和 form
搜索进行关联
目前用的是 hotgo
所以下面代码的实现依托了 hotgo
的 API
,如果自己写的话,可以参考下面的代码进行替换即可
// 表格数据
let tableData = ref([]);
// 分页数据——当前页码
let tablePage = ref(1);
// 分页数据——总页数
let tablePageCount = ref(0);
// 分页数据——总条数
let tableTotalCount = ref(0);
// 分页数据——每页条数
let tablePageSize = ref(20);
// 搜索按钮
async function search() {
const response = await List({...formValue,page: tablePage.value,pageSize: tablePageSize.value});
console.log("====>", response)
tableData.value = response.list;
tablePage.value = response.page;
tablePageCount.value = response.pageCount;
tableTotalCount.value = response.totalCount;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Data Table
实现 columns
自定义渲染
提示
naive-ui
中的渲染是采用 render
函数来实现的,所以我们可以在 render
函数中进行自定义渲染,下面的示例代码基本上囊括了大部分需求
...
const tableColumns = [
{
title: '实名状态',
key: 'verifyStatus',
render(record) {
let tagType: string = '';
let tagText = '';
switch (record.verifyStatus) {
case 0:
tagType = 'default';
tagText = '未实名';
break;
case 1:
tagType = 'success';
tagText = '已实名';
break;
case 2:
tagType = 'warning';
tagText = '认证中';
break;
case 3:
tagType = 'info';
tagText = '升级';
break;
default:
tagType = 'error';
tagText = '认证失败';
}
return h(NTag, {type: tagType}, {default: () => tagText})
}
}, {
title: '存活业务',
render(record) {
if (record.ext.liveTradeNos.indexOf(",") > 0) {
let liveTradeNos = record.ext.liveTradeNos.split(",");
return h(NPopover, {trigger: 'hover', placement: 'top',},
{
trigger: () => h('span', record.ext.liveTradeNos.split(",")[0] + '...'),
default: () => liveTradeNos.map(tradeNo => h('p', tradeNo))
}
)
} else {
return record.ext.liveTradeNos
}
},
}, {
title: '回访时间/备注',
render(record) {
let showBackCallRemark = record.ext.remark
if (showBackCallRemark.length > 10){
showBackCallRemark = record.ext.remark.substring(0,10) + "..."
}
return h(NFlex,{vertical:true,justify:'center'},{
default:()=>[
h(NTag,{type:'info',style:{width:'185px'}},record.ext.backCallTime),
h(NTag,{type:'info',style:{width:'185px'}},{
default:()=>[
h(NPopover, {trigger: 'hover', placement: 'top',},
{
trigger: () => h('span', showBackCallRemark),
default: () => h('p', record.ext.remark)
}
)
]
}),
],
});
},
},{
title: '(创建/最近登录)时间',
render(record) {
return h(NFlex, {vertical: true,justify: 'center'}, {
default: () => [
h(NTag,{type:'info',style:{width:'150px'}}, record.createTime),
h(NTag,{type:'info',style:{width:'150px'}}, record.lastloginTime),
],
});
},
}
]
...
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
# 信息 Message
# 如何使用Naive-ui
的Message
第一次使用的时候出现一丢丢问题,我在<script setup>...</script>
中直接声明const message = useMessage();
然后使用,结果提示
Uncaught (in promise) Error: [naive/use-message]: No outer <n-message-provider /> founded. See prerequisite in https://www.naiveui.com/en-US/os-theme/components/message for more details. If you want to use `useMessage` outside setup, please check https://www.naiveui.com/zh-CN/os-theme/components/message#Q-&-A.
1
此刻为止,小白的我还是不知道是啥原因,就我初学者的想法就是,我在当前的vue
文件中引入了这个组件并完成了初始化后,那么我就可以使用它,结果我果然是初学者的思维😂。于是搜了搜,看到作者针对这个组件的回答:naive-ui/issues (opens new window),看了半天还是不明觉厉。于是我决定采用大家的操作方案是采用全局挂载来完成,反正到处都要用,问题也不大。
# 干货
- 创建一个自定义组件用来挂载全局方法,名字不重要;我的是
Message.vue
<template>
<div></div>
</template>
<script setup>
import { useDialog, useMessage } from "naive-ui";
window.$message = useMessage();
window.$dialog = useDialog();
</script>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
- 修改
App.vue
文件,在底部添加以下代码
<template>
...
<n-message-provider>
<n-dialog-provider>
<Message />
</n-dialog-provider>
</n-message-provider>
</template>
<script setup>
import { NMessageProvider, NDialogProvider } from "naive-ui";
...
</script>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
- 使用,直接在要使用消息的文件中写入下面代码
window.$message.error("123");
1
# 布局 -- Layout
# 使用Layout
布局时content
过长出现的滚动条导致整个页面被拖动
解决方案:给content
加上一个高度即可
# 错误集合
# page-count and item-count should't be specified together. Only item-count will take effect.
这是因为 item-count
和 page-count
不能同时存在,否则会报错。我是在使用 pagination
出现的,直接删除 page-count
即可
更新时间: 2024/1/16 15:04:26