50 lines
1.0 KiB
Vue
50 lines
1.0 KiB
Vue
<template>
|
|
<view>
|
|
<uni-section title="右侧滑出" type="line">
|
|
<view class="example-body">
|
|
<button type="primary" @click="showDrawer('showRight')">
|
|
<text class="word-btn-white">显示Drawer</text>
|
|
</button>
|
|
<uni-drawer ref="showRight" mode="right" :mask-click="false" >
|
|
<view class="close">
|
|
<button @click="closeDrawer('showRight')">
|
|
<text class="word-btn-white">关闭Drawer</text>
|
|
</button>
|
|
</view>
|
|
</uni-drawer>
|
|
</view>
|
|
</uni-section>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
// 创建 drawer 的 ref 引用
|
|
const showRight = ref(null)
|
|
|
|
// 打开窗口
|
|
const showDrawer = (e) => {
|
|
const drawer = showRight.value // 获取正确的 drawer 实例
|
|
drawer.open()
|
|
}
|
|
|
|
// 关闭窗口
|
|
const closeDrawer = (e) => {
|
|
const drawer = showRight.value // 获取正确的 drawer 实例
|
|
drawer.close()
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.example-body {
|
|
padding: 10px;
|
|
}
|
|
|
|
.close {
|
|
padding: 10px;
|
|
}
|
|
</style>
|