更新记录
1.0.7(2024-08-27) 下载此版本
[修复] 默认未展示闪一下问题 [修复] app、微信小程序 底部安全区问题 [新增] open 与 close 方法控制显示与隐藏
1.0.6(2024-08-06) 下载此版本
[修复] sass @use 打包小程序兼容性问题 (只允许在顶部使用)
1.0.5(2024-07-25) 下载此版本
[修复] 参数改为非必填,避免过多提示警告
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
× | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.0 app-vue | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
√ | √ | √ | √ |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | × | √ | √ | √ |
y-drawer
抽屉组件,仅支持 Vue3
[图2] 效果参考插件 【Vue3】微信授权登录,用户信息设置,微信头像弹框
Example
示例
<template>
<y-drawer
ref="drawerRef"
:borderRadius="20"
:showClose="true"
:showMask="true"
:maskClosable="true"
:length="300"
title="示例标题"
>
<!-- <template #title>标题插槽</template> -->
<!-- 在这里插入内容 -->
<view>抽屉内容</view>
</y-drawer>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const drawerRef = ref();
setTimeout(() => {
drawerRef.value.open()
}, 1000);
</script>
Props
参数
参数名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
borderRadius | number | 20 | 圆角大小,单位:rpx |
showClose | boolean | false | 显示关闭按钮,默认false |
showMask | boolean | true | 显示遮罩,默认true |
maskClosable | boolean | true | 点击遮罩关闭,默认true |
direction | 'top' | 'right' | 'bottom' | 'left' | 'bottom' | 方向 |
length | number | 200 | 宽度/高度,默认 200rpx |
closeIcon | string | 'closeempty' | 关闭图标,参考:https://zh.uniapp.dcloud.io/component/uniui/uni-icons.html |
closeBefore | () => boolean | () => true | 关闭前处理,返回 true 允许关闭,否则不可关闭 |
title | string | '' | 标题 |
Methods
方法
defineExpose({
// 打开
open: () => {},
// 关闭
close: () => {}
})
Slot
插槽
name | 作用 |
---|---|
default | 自定义抽屉内容 |
title | 标题插槽 |
常见问题
滚动视图问题
弹出层默认插槽里套个 scroll-view
实现,记得设置宽度和高度;
问题反馈
若在使用过程中发现 BUG,请与我反馈,不胜感激。
- 去 Github Issues
- 评论区、插件群里
- 发邮件 yuxiaobo64@gmail.com