drawer

抽屉
drawer内容
显示代码
html
<div class="open-demo">
	<div class="open-drawer" id="drawerleft">
	    <p>drawer内容</p>
	</div>
	<button class="open-btn open-btn-primary" bg @click="leftShow">显示</button>
	<div class="open-drawer" id="drawertop">
	    <p>drawer内容</p>
	</div>
	<button class="open-btn open-btn-primary" bg @click="topShow">顶部显示</button>
	<div class="open-drawer" id="drawerright">
	    <p>drawer内容</p>
	</div>
	<button class="open-btn open-btn-primary" bg @click="rightShow">右侧显示</button>
	<div class="open-drawer" id="drawerbottom">
	    <p>drawer内容</p>
	</div>
	<button class="open-btn open-btn-primary" bg @click="bottomShow">底部显示</button>
</div>

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

	let left;
	let top;
	let right;
	let bottom;
	onMounted(()=>{
		// 通过id进行初始化
		left = opener.drawer({
		    id: '#drawerleft',
		    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
		    }
		})

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

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

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

	const leftShow = ()=>{
		// 显示
		left.show();
	}
	const topShow = ()=>{
		// 显示
		top.show();
	}
	const rightShow = ()=>{
		// 显示
		right.show();
	}
	const bottomShow = ()=>{
		// 显示
		bottom.show();
	}

</script>
drawer ​

drawer
