uniapp组件-uni-drawer抽屉

快来打我* 2021-07-25 12:31 1774阅读 0赞

官方示例：[https://ext.dcloud.net.cn/plugin?id=26][https_ext.dcloud.net.cn_plugin_id_26]

抽屉式导航，用于展示侧滑菜单，侧滑导航。

## 例1： ##

![20210302200542643.gif][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

这里的width属性可能会失效，具体参见官方示例

<template>
    	<view>
    		<button @click="showDrawer" type="primary">左侧弹出 显示Drawer</button>
    		<uni-drawer ref="showLeft" :width="320" mode="left">
    			<button @click="closeDrawer">关闭Drawer</button>
    		</uni-drawer>
    	</view>
    </template>
    <script>
    export default {
    	data() {
    		return {
    		};
    	},
    	methods: {
    		showDrawer() {
    			this.$refs["showLeft"].open();
    		},
    		closeDrawer() {
    			this.$refs["showLeft"].close();
    		}
    	}
    };
    </script>

## 例2： ##

这里只能通过按钮关闭，不能通过点击遮罩关闭

![20210302201139601.gif][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

<template>
    	<view>
    		<button @click="showDrawer" type="primary">右侧弹出 显示Drawer</button>
    		<uni-drawer ref="showRight" mode="right" :mask-click="false">
    			<scroll-view class="scroll-view-box" scroll-y="true">
    				<button @click="closeDrawer" type="primary">关闭Drawer</button>
    				<view v-for="item in 30" :key="item">可滚动内容 {
       { item }}</view>
    			</scroll-view>
    		</uni-drawer>
    	</view>
    </template>
    <script>
    export default {
    	data() {
    		return {};
    	},
    	methods: {
    		showDrawer() {
    			this.$refs['showRight'].open();
    		},
    		closeDrawer() {
    			this.$refs['showRight'].close();
    		}
    	}
    };
    </script>
    
    <style>
    .scroll-view-box {
    	position: absolute;
    	top: 0;
    	right: 0;
    	bottom: 0;
    	left: 0;
    }
    </style>

[https_ext.dcloud.net.cn_plugin_id_26]: https://ext.dcloud.net.cn/plugin?id=26
[20210302200542643.gif]: /images/20210725/ebdeb5eb15f842a4bd36eb2fde225f7d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/2ee94e8c640843b08398296ab83534e7.png
[20210302201139601.gif]: /images/20210725/024602c1fd5a41a6b235f65372bd6ff6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210302201212484.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70