uni-app的组件uni-drawer简单使用方法

逃离我推掉我的手 2022-12-24 09:58 345阅读 0赞

> uni-app的组件uni-drawer文档上很简单模糊，so简单写写用法

<template>
        <view>
            <unidrawer ref="draw" :mask="mask" :width="drawWid" :mode='mode'>
    			<view style="padding:30rpx;">
    				<view class="uni-title">抽屉式导航</view>
    			</view>
    			<button type="warn" @tap="hide()" style="margin-top: 100rpx;">关闭</button>
    		</unidrawer>
            <button type="primary" @tap="show()">显示</button>
        </view>
    </template>
    
    <script>
    	import unidrawer from "@/components/uni-drawer/uni-drawer.vue"
    	export default {
    		components: {unidrawer},
    	    data() {
    			return {
    				mask: true,
    				left:'left',
    				drawWid:'50%',//最好把uni-drawer组件里的参数width的type改为String，不然想用百分比报错烦
    				maskClick:true,
    				mode:'right'
    			};
    		},
    		methods: {
    			//显示抽屉
    			show(){
    				this.$refs.draw.open();
    			},
    			hide(){
    				this.$refs.draw.close();
    			}
    		}
    	}
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3ODg1NjUx_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3ODg1NjUx_size_16_color_FFFFFF_t_70]: /images/20221120/3095296cc3404343a2b94435d9699795.png

发表评论取消回复

表情：

评论列表（有 0 条评论，345人围观）

还没有评论，来说两句吧...

相关阅读

相关 Uniapp使用Vue3应用组件教学

Vue3是Vue.js的最新版本，它带来了许多新的特性和改进，包括更好的性能、更好的类型支持和更好的开发体验。在Uniapp中使用Vue3，可以让我们更好地开发应用组件，提高开

灰太狼/ 2024年03月23日 16:23/ 0 赞/ 137 阅读

相关 uni-app的组件uni-drawer简单使用方法

> uni-app的组件uni-drawer文档上很简单模糊，so简单写写用法 <template> <view> <unid

逃离我推掉我的手/ 2022年12月24日 09:58/ 0 赞/ 346 阅读

相关 uniapp 简单的ToDoList

<template> <view class="content"> <view class="todo-header"> <!--

柔光的暖阳◎/ 2022年12月21日 02:23/ 0 赞/ 231 阅读

相关 uniapp自定义简单弹窗组件

前面写android混编学到了很多，没有时间全部积累起来，后面会慢慢记录的。最近很久没有记录了，因为一个新的uniapp的项目。最近在做这个。看了智慧团建上的弹窗很喜欢

超、凢脫俗/ 2021年11月02日 07:30/ 0 赞/ 945 阅读

相关 uniapp基本语法/组件使用

条件渲染 v-if 指令用于条件性地渲染一块内容 <template> <view> <view v-if="now"

悠悠/ 2021年09月13日 15:54/ 0 赞/ 968 阅读

相关 uniapp使用树状组件插件

第一步，下载组件包 [uni app 插件下载 ][uni app _] 复制到项目里，根据目录里README.md 文档进行需求配置 view部分: <tem

心已赠人/ 2021年09月07日 06:12/ 0 赞/ 1520 阅读

相关基于uniapp的一个方便、好用的简单组件库

好的今天是可以写博客的一天呀同事 louis最近写了一个基于uniapp的样式库内容包含字体色彩布局盒模型以及图标让编写uniapp前端样式的时候更方便

怼烎@/ 2021年09月01日 03:18/ 0 赞/ 711 阅读

相关 uniapp——组件的创建使用和组件的生命周期函数

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

蔚落/ 2021年07月26日 01:54/ 0 赞/ 476 阅读

相关 uniapp——button按钮组件的使用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

痛定思痛。/ 2021年07月26日 00:39/ 0 赞/ 1920 阅读

相关 uniapp - 组件的创建使用和组件的生命周期函数

组件的创建使用和组件的生命周期函数一. 组件的创建使用二. 组件的生命周期函数 > 更多组件使用请查看 uniapp 官网：[https://uniap

一时失言乱红尘/ 2021年07月25日 23:58/ 0 赞/ 677 阅读