dialog

对话框自定义内容

dialog内容

显示代码

<div class="open-demo">
	<div class="open-dialog" id="dialogone">
	    <p>dialog内容</p>
	</div>
	<button class="open-btn open-btn-primary" bg @click="show">显示</button>
</div>

<script setup>
	import { onMounted } from 'vue'
	import opener from '../public/opener.esm.js'

	let dialog;
	onMounted(()=>{
		// 通过id进行初始化
		dialog = opener.dialog({
		    id: '#dialogone',
		    title: '标题',
		    width: '800px',
		    height: '800px',
		    cover: true,// 显示遮罩，默认显示true
		    // 配置按钮文本
		    lang: {
		        ok: 'ok',
		        cancel: 'cancel'
		    },
		    // 控制按钮和标题显示
		    show: {
		        ok: true,
		        cancel: true,
		        title: true
		    }, 
		    click: (res)=>{
		        console.log(res); // close|ok|cancel
		    }
		})

	})
	const show = ()=>{
		// 显示
		dialog.show();
	}

</script>