mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-08-26 08:36:19 +08:00
refactor(drawer): refactor props detailType to isDetail
This commit is contained in:
@@ -5,6 +5,11 @@
|
|||||||
- 面包屑支持显示图标
|
- 面包屑支持显示图标
|
||||||
- 新增 tinymce 富文本组件
|
- 新增 tinymce 富文本组件
|
||||||
- 表单新增 submitOnReset 控制是否在重置时重新发起请求
|
- 表单新增 submitOnReset 控制是否在重置时重新发起请求
|
||||||
|
- 表格新增`sortFn`支持自定义排序
|
||||||
|
|
||||||
|
### ✨ Refactor
|
||||||
|
|
||||||
|
- Drawer 组件的 detailType 修改为 isDetail
|
||||||
|
|
||||||
### 🎫 Chores
|
### 🎫 Chores
|
||||||
|
|
||||||
|
@@ -16,7 +16,7 @@ import { FullLoading } from '/@/components/Loading/index';
|
|||||||
|
|
||||||
import { getSlot } from '/@/utils/helper/tsxHelper';
|
import { getSlot } from '/@/utils/helper/tsxHelper';
|
||||||
|
|
||||||
import { DrawerInstance, DrawerProps, DrawerType } from './types';
|
import { DrawerInstance, DrawerProps } from './types';
|
||||||
|
|
||||||
import { basicProps } from './props';
|
import { basicProps } from './props';
|
||||||
import { isFunction, isNumber } from '/@/utils/is';
|
import { isFunction, isNumber } from '/@/utils/is';
|
||||||
@@ -54,7 +54,7 @@ export default defineComponent({
|
|||||||
};
|
};
|
||||||
opt.title = undefined;
|
opt.title = undefined;
|
||||||
|
|
||||||
if (opt.drawerType === DrawerType.DETAIL) {
|
if (opt.isDetail) {
|
||||||
if (!opt.width) {
|
if (!opt.width) {
|
||||||
opt.width = '100%';
|
opt.width = '100%';
|
||||||
}
|
}
|
||||||
@@ -157,7 +157,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
function renderHeader() {
|
function renderHeader() {
|
||||||
const { title } = unref(getMergeProps);
|
const { title } = unref(getMergeProps);
|
||||||
return props.drawerType === DrawerType.DETAIL ? (
|
return props.isDetail ? (
|
||||||
getSlot(slots, 'title') || (
|
getSlot(slots, 'title') || (
|
||||||
<Row type="flex" align="middle" class={`${prefixCls}__detail-header`}>
|
<Row type="flex" align="middle" class={`${prefixCls}__detail-header`}>
|
||||||
{() => (
|
{() => (
|
||||||
|
@@ -1,5 +1,4 @@
|
|||||||
import type { PropType } from 'vue';
|
import type { PropType } from 'vue';
|
||||||
import { DrawerType } from './types';
|
|
||||||
// import {DrawerProps} from './types'
|
// import {DrawerProps} from './types'
|
||||||
export const footerProps = {
|
export const footerProps = {
|
||||||
confirmLoading: Boolean as PropType<boolean>,
|
confirmLoading: Boolean as PropType<boolean>,
|
||||||
@@ -41,9 +40,9 @@ export const footerProps = {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
export const basicProps = {
|
export const basicProps = {
|
||||||
drawerType: {
|
isDetail: {
|
||||||
type: Number as PropType<number>,
|
type: Boolean as PropType<boolean>,
|
||||||
default: DrawerType.DEFAULT,
|
default: false,
|
||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
type: String as PropType<string>,
|
type: String as PropType<string>,
|
||||||
|
@@ -20,10 +20,6 @@ export interface ReturnInnerMethods extends DrawerInstance {
|
|||||||
|
|
||||||
export type UseDrawerReturnType = [RegisterFn, ReturnMethods];
|
export type UseDrawerReturnType = [RegisterFn, ReturnMethods];
|
||||||
export type UseDrawerInnerReturnType = [RegisterFn, ReturnInnerMethods];
|
export type UseDrawerInnerReturnType = [RegisterFn, ReturnInnerMethods];
|
||||||
export enum DrawerType {
|
|
||||||
DETAIL,
|
|
||||||
DEFAULT,
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface DrawerFooterProps {
|
export interface DrawerFooterProps {
|
||||||
showOkBtn: boolean;
|
showOkBtn: boolean;
|
||||||
@@ -69,7 +65,7 @@ export interface DrawerFooterProps {
|
|||||||
footerHeight: string | number;
|
footerHeight: string | number;
|
||||||
}
|
}
|
||||||
export interface DrawerProps extends DrawerFooterProps {
|
export interface DrawerProps extends DrawerFooterProps {
|
||||||
drawerType: DrawerType;
|
isDetail?: boolean;
|
||||||
loading?: boolean;
|
loading?: boolean;
|
||||||
showDetailBack?: boolean;
|
showDetailBack?: boolean;
|
||||||
visible?: boolean;
|
visible?: boolean;
|
||||||
|
@@ -1,15 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<BasicDrawer v-bind="$attrs" :drawerType="DrawerType.DETAIL" title="Drawer Title5">
|
<BasicDrawer v-bind="$attrs" :isDetail="true" title="Drawer Title5">
|
||||||
<p class="h-20">Content Message</p>
|
<p class="h-20">Content Message</p>
|
||||||
</BasicDrawer>
|
</BasicDrawer>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
import { BasicDrawer, DrawerType } from '/@/components/Drawer';
|
import { BasicDrawer } from '/@/components/Drawer';
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: { BasicDrawer },
|
components: { BasicDrawer },
|
||||||
setup() {
|
setup() {},
|
||||||
return { DrawerType };
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
Reference in New Issue
Block a user