136 lines
3.4 KiB
Plaintext
136 lines
3.4 KiB
Plaintext
import { message } from '../dist/message.js'
|
||
import { DialogModal } from '@kevisual/system-ui'
|
||
import '@kevisual/system-ui/dist/index.css'
|
||
|
||
# Modal
|
||
|
||
> 使用原生js实现的弹窗组件
|
||
|
||
安装 `npm i @kevisual/system-ui`
|
||
|
||
|
||
export const ShowModal = () => {
|
||
const url = 'https://kevisual.xiongxiao.me/system/ui/index.js'
|
||
|
||
const onClick = async () => {
|
||
console.log('theme', DialogModal)
|
||
// console.log('clicked')
|
||
// message.info('Hello, this is a message')
|
||
const content = document.createElement('div');
|
||
content.innerHTML = `
|
||
<div class="bg-white p-8 rounded shadow-md w-full max-w-md text-center">
|
||
<h2 class="text-2xl font-bold mb-4">Token 无效</h2>
|
||
<p class="mb-6">您的登录凭证已失效，请重新登录。</p>
|
||
<a href="/user/login" class="inline-block bg-red-500 text-white py-2 px-4 rounded hover:bg-red-600 transition duration-200">确定</a>
|
||
</div>
|
||
`;
|
||
const modal = DialogModal.render(content, {
|
||
id: 'redirect-to-login',
|
||
contentStyle: {
|
||
width: 'unset',
|
||
},
|
||
dialogTitleStyle: {
|
||
display: 'none',
|
||
padding: '0',
|
||
},
|
||
dialogContentStyle: {
|
||
padding: '0',
|
||
},
|
||
mask: true,
|
||
open: false,
|
||
});
|
||
modal.setOpen(true)
|
||
}
|
||
return <div onClick={onClick}>点击显示弹窗</div>
|
||
}
|
||
|
||
<ShowModal />
|
||
|
||
*使用方法*
|
||
|
||
```js
|
||
// import { DialogModal, loadCss } from 'https://kevisual.xiongxiao.me/system/ui/index.js'
|
||
// loadCss('https://kevisual.xiongxiao.me/system/ui/index.css')
|
||
|
||
import { DialogModal } from '@kevisual/system-ui';
|
||
import '@kevisual/system-ui/dist/index.css';
|
||
|
||
const content = document.createElement('div');
|
||
content.innerHTML = `
|
||
<div class="bg-white p-8 rounded shadow-md w-full max-w-md text-center">
|
||
<h2 class="text-2xl font-bold mb-4">Token 无效</h2>
|
||
<p class="mb-6">您的登录凭证已失效，请重新登录。</p>
|
||
<a href="/user/login" class="inline-block bg-red-500 text-white py-2 px-4 rounded hover:bg-red-600 transition duration-200">确定</a>
|
||
</div>
|
||
`;
|
||
export const modal = DialogModal.render(content, {
|
||
id: 'redirect-to-login',
|
||
contentStyle: {
|
||
width: 'unset',
|
||
},
|
||
dialogTitleStyle: {
|
||
display: 'none',
|
||
padding: '0',
|
||
},
|
||
dialogContentStyle: {
|
||
padding: '0',
|
||
},
|
||
mask: true,
|
||
open: false,
|
||
});
|
||
|
||
```
|
||
|
||
类型
|
||
```typescript
|
||
export type ModalOpts<
|
||
T = {
|
||
[key: string]: any;
|
||
},
|
||
U = {
|
||
[key: string]: any;
|
||
},
|
||
> = {
|
||
root?: HTMLDivElement | string;
|
||
id?: string;
|
||
mask?: boolean;
|
||
maskClassName?: string;
|
||
maskStyle?: ElStyle;
|
||
maskClose?: boolean;
|
||
|
||
contentClassName?: string;
|
||
contentStyle?: ElStyle;
|
||
destroyOnClose?: boolean; // 关闭，把Element移动到cacheFragment中
|
||
hideOnClose?: boolean; // 关闭后是否销毁，设置display:none
|
||
open?: boolean;
|
||
|
||
onClose?: () => void;
|
||
defaultStyle?: DefaultStyle<U>;
|
||
} & T;
|
||
export type DefaultStyle<T> = {
|
||
defaultContentStyle?: ObjCss;
|
||
defaultMaskStyle?: ObjCss;
|
||
} & T;
|
||
|
||
type DialogModalOpts = {
|
||
dialogTitle?: string;
|
||
dialogTitleClassName?: string;
|
||
dialogTitleStyle?: ElStyle;
|
||
dialogTitleEl?: HTMLElement;
|
||
dialogTitleCloseIcon?: boolean;
|
||
|
||
dialogContentClassName?: string;
|
||
dialogContentStyle?: ElStyle;
|
||
|
||
dialogFooterClassName?: string;
|
||
dialogFooterStyle?: ElStyle;
|
||
} & ModalOpts<KV, DialogDefaultStyle>;
|
||
|
||
type DialogDefaultStyle = {
|
||
defaultDialogTitleStyle?: ObjCss;
|
||
defaultDialogContentStyle?: ObjCss;
|
||
defaultDialogFooterStyle?: ObjCss;
|
||
};
|
||
|
||
|
||
``` |