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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import {
CreateElement,
defineComponent,
getCurrentInstance,
PropType,
reactive,
ref,
VNode,
} from 'vue';
import { useNamespace } from '@ibiz-template/vue-util';
import { isNumber } from 'lodash-es';
import { IDrawerOptions, IOverlayContainer } from '@ibiz-template/runtime';
import { useUIStore } from '@/store';
import '@ibiz-template/theme/style/components/util/drawer/drawer.scss';
import { OverlayContainer } from '../overlay-container/overlay-container';
export const AppDrawerComponent = defineComponent({
props: {
opts: {
type: Object as PropType<IDrawerOptions>,
default: () => ({}),
},
},
setup(props, ctx) {
const ns = useNamespace('drawer');
const { proxy } = getCurrentInstance()!;
const isShow = ref(false);
const { zIndex } = useUIStore();
const drawerZIndex = zIndex.increment();
// 处理自定义样式
const customStyle = reactive<IData>({});
const { width, height } = props.opts;
if (width) {
customStyle.width = isNumber(width) ? `${width}px` : width;
}
if (height) {
customStyle.height = isNumber(height) ? `${height}px` : height;
}
// 所有关闭方式最终都走这个
const onVisibleChange = (state: boolean) => {
if (!state) {
zIndex.decrement();
ctx.emit('dismiss');
document.body.removeChild(proxy.$el);
}
};
const dismiss = () => {
isShow.value = false;
};
const present = () => {
isShow.value = true;
};
return {
ns,
isShow,
drawerZIndex,
customStyle,
dismiss,
present,
onVisibleChange,
};
},
render() {
return (
<i-drawer
value={this.isShow}
on-input={(val: boolean) => {
this.isShow = val;
}}
width={this.opts.width}
height={this.opts.height}
class={[this.ns.b()]}
style={{ [this.ns.cssVarBlockName('z-index')]: this.drawerZIndex }}
styles={this.customStyle}
placement={this.opts.placement || 'right'}
on-on-visible-change={this.onVisibleChange}
>
{this.$slots.default}
</i-drawer>
);
},
});
/**
* 创建抽屉
*
* @author lxm
* @date 2022-11-09 18:11:57
* @export
* @param {(_h: CreateElement) => VNode} render
* @param {(IDrawerOptions | undefined)} [opts]
* @returns {*} {IOverlayContainer}
*/
export function createDrawer(
render: (_h: CreateElement) => VNode,
opts?: IDrawerOptions | undefined,
): IOverlayContainer {
return new OverlayContainer(AppDrawerComponent, render, opts);
}