Drawer 抽屉组件
对 antv 的 drawer 组件进行封装，扩展拖拽，全屏，自适应高度等功能。
练习 —— 在之前table基础上，添加查看功能，点击查看按钮，弹出抽屉显示单条表格数据，且不可修改
src/views/myComponents/tableTest中添加ViewDrawer.vue，用来独立使用Drawer，写内部代码
data.ts 中配置Drawer中表单字段
export const schemasView: FormSchema[] = [
{
field: 'divider-bill',
component: 'Divider',
label: '信息',
colProps: {
span: 24,
},
},
{
field: 'name',
component: 'Input',
label: '姓名',
required:true,
},
{
field: 'sex',
component: 'Select',
label: '性别',
required:true,
componentProps: {
options: sexOption,
},
},
{
field: 'dt',
component: 'DatePicker',
label: '出生日期',
required:true,
componentProps: {
style: {
width: '100%',},
valueFormat: 'YYYYMMDD',
},
},
{
field: 'age',
component: 'InputNumber',
label: '年龄',
required:true,
componentProps: {
style: {
width: '100%',},
step: 1,
min: 0,
max: 150,
},
},
{
label: '电话',
field: 'tel',
component: 'Input',
required:true,
dynamicRules: ({
values }) => {
if (values.tel !== undefined){
if (values.tel.indexOf('-')>0){
return [
{
required:true,
trigger: 'change',
message: '请输入正确的号码',
pattern: /(^\d{4}-\d{7}$)|(^\d{3}-\d{8}$)/,
}
];
}
else {
return [
{
required:true,
trigger: 'change',
message: '请输入正确的号码',
pattern: /^1[3|4|5|7|8][0-9]{9}$/,
},
];
}
}
else {
return[{
required:true,message: '请输入电话',}]
}
},
},
{
field: 'address',
component: 'InputTextArea',
label: '住址',
required:true,
},
];
ViewDrawer 代码
<template>
<div
:style="{
overflow: 'hidden',
}"
>
<BasicDrawer
v-bind="$attrs"
@register="registerDrawer"
@visibleChange="handleVisibleChange"
:isDetail="true"
title="查看"
placement="bottom"
height="100%"
:destroyOnClose="true"
>
<div>
<BasicForm @register="registerForm"></BasicForm>
</div>
</BasicDrawer>
</div>
</template>
<script lang="ts">
import {
defineComponent } from 'vue';
import {
Divider } from 'ant-design-vue';
import {
BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import {
BasicForm, useForm } from '/@/components/Form';
import {
schemasView } from './data';
export default defineComponent({
name: 'ViewDrawer',
components: {
BasicDrawer,
BasicForm,
Divider,
},
setup(_, {
emit }) {
// 配置Drawer
const [registerDrawer, {
closeDrawer }] = useDrawerInner(async (data) => {
console.log('打印从table传递的数据:', data);
setFieldsValue(data), setProps({
disabled: true }); // data值赋给表单，设置disabled
});
// 配置Form
const [registerForm, {
validate, setFieldsValue, setProps }] = useForm({
labelWidth: 150,
baseColProps: {
offset: 1,
span: 10,
},
schemas: schemasView,
showActionButtonGroup: false,
});
function handleVisibleChange(visible: boolean) {
if (!visible) {
emit('reload');
}
}
return {
registerDrawer,
closeDrawer,
registerForm,
validate,
setFieldsValue,
setProps,
handleVisibleChange
};
},
});
</script>
<style scoped></style>
basicTable.vue中使用
<template>
<div
:style="{
overflow: 'hidden',
position: 'relative',
height: '100%',
}"
>
<!-- 注册table -->
<BasicTable @register="registerTable">
<template #action="{ record }">
<TableAction
:actions="[
{
tooltip: '查看',
icon: 'clarity:info-standard-line',
onClick: handleView.bind(null, { data: record }),
},
{
tooltip: '编辑',
icon: 'clarity:note-edit-line',
// onClick: handleEdit.bind(null, { data: record,}),
},
{
tooltip: '删除',
color: 'error',
icon: 'ant-design:delete-outlined',
// popConfirm: {
// title: '是否确定删除？',
// confirm: handleDel.bind(null, record),
// },
},
]"
/>
</template>
<template #toolbar>
<a-button type="primary">{
{ '新增' }}</a-button>
</template>
</BasicTable>
<!-- 页面引入 -->
<ViewDrawer @reload="handleReload" @register="registerDrawer" />
</div>
</template>
<script lang="ts">
import {
defineComponent } from 'vue';
import {
formConfig, columns, initData } from './data';
import {
BasicTable, useTable, TableAction } from '/@/components/Table';
import {
useDrawer } from '/@/components/Drawer';
import ViewDrawer from './ViewDrawer.vue';
export default defineComponent({
name: 'tableTest',
components: {
BasicTable,
TableAction,
ViewDrawer,
},
setup() {
const data = initData();
// 设置table
const [registerTable, {
reload }] = useTable({
title: '查询结果',
dataSource: data,
columns: columns,
bordered: true,
useSearchForm: true, //开启搜索区域
formConfig: formConfig,
actionColumn: {
width: 120,
title: '操作',
dataIndex: 'action',
slots: {
customRender: 'action' },
},
rowSelection: {
type: 'radio' },
pagination: {
pageSize: 10 },
showTableSetting: true,
tableSetting: {
fullScreen: true },
showIndexColumn: true,
indexColumnProps: {
fixed: 'left' },
});
// 注册Drawer
const [registerDrawer, {
openDrawer }] = useDrawer();
// 查看按钮
function handleView({
data }) {
// 弹出抽屉，传递data
openDrawer(true, data);
}
function handleReload() {
reload();
}
return {
registerTable,
reload,
registerDrawer,
handleView,
handleReload,
};
},
});
</script>
<style scoped></style>
页面效果
Drawer抽屉