WdView

用法

基本用法

对话框组件
Modal组件其实是对Dialog组件的封装，默认会有一些操作按钮，并且新增了不同场景下的弹窗样式；弹出一个对话框，提示用户确认信息
点击查看代码
<wd-button @click="showModal">show Message</wd-button>
<script>
	import {WdMessage} from '@inagora/wd-view'
	cosnt showMessage = () => {
	  const wm = WdModal({
	    title: 'model',
	    content: '这里是内容',
	    cancelButtonText: 'OK',
	    cancelButtonText: 'Cancel',
	    isShowCancelButton: true,
	    onCancel() {
	      console.log('cancel');
	    },
	    onConfirm() {
	      console.log('confirm');
	    },
	  });
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

自定义内容

自定义内容
content是以slot方式渲染的，所以对于content的内容可以是html字符串，自定义组件
点击查看代码
<wd-button @click="showModal">show Message</wd-button>
<script>
	import {WdMessage} from '@inagora/wd-view'
	cosnt showMessage = () => {
	  const wm = WdModal({
	    title: 'model',
	    content: `<wd-button>点击</wd-button><div>自定义内容</div>`,
	    cancelButtonText: 'OK',
	    cancelButtonText: 'Cancel',
	    isShowCancelButton: true,
	  });
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

自定义按钮

自定义按钮
自定义按钮点击之后处理完逻辑，会自动关闭Modal；如果需要保持Modal，则需要return false;
点击查看代码
<wd-button @click="showModal">show Message</wd-button>
<script>
	import {WdMessage} from '@inagora/wd-view'
	cosnt showMessage = () => {
	  const wm = WdModal({
	    title: 'model',
	    content: '这里是内容',
	    cancelButtonText: 'OK',
	    cancelButtonText: 'Cancel',
	    isShowCancelButton: true,
	    buttons: [
	      {
					type: 'primary',
					text: '自定义按钮',
					size: 'small',
					click() {
						return new Promise((resolve, reject) => {
							setTimeout(() => {
								resolve(true);
							}, 2000);
						});
					},
				},
	    ]
	  });
	}
</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

属性

参数说明类型可选值默认值
buttons自定义底部按钮array-[]
confirmButtonText确定按钮文案string-''
cancelButtonText取消按钮文案string-''
contentModal 内容string-''
isShowCancelButton是否显示取消按钮booleantrue / falsetrue
onCancel取消按钮点击function--
onConfirm确定按钮点击function--
contentModal 内容string-''
titleModal 标题string-''

destroy 方法

WdModal()方法返回一个 wm 实例，可以调用实例方法 destroy 让 WdModal 消失