更新记录
1.1.0(2023-09-27)
下载此版本
兼容了VUE2,目前支持VUE2及VUE3
1.0.3(2023-09-16)
下载此版本
取消引入lodash,将防抖函数内置
1.0.2(2023-09-16)
下载此版本
将less改回css,扩大兼容
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.8.12 app-vue |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
√ |
√ |
√ |
√ |
× |
√ |
√ |
× |
gscosmos-side-menu
GSCOSMOS·一款支持VUE2/3简洁好用的侧边栏
Options 参数说明
参数 |
类型 |
必填 |
说明 |
默认值 |
modelValue |
boolean |
是 |
控制是否弹出侧边栏 |
|
duration |
number |
否 |
侧边栏 弹出/弹回 动画时间(毫秒) |
500 |
width |
string |
否 |
侧边栏占宽度比 |
70% |
timingFunction |
string |
否 |
动画的加速度曲线函数 |
cubic-bezier(0.46, 0.46, 0.2, 0.99) |
Events 回调
回调名称 |
说明 |
返回参数类型 |
close |
关闭侧边栏时的回调函数 |
NULL |
VUE3使用说明
<template>
<sideMenu :width="'75%'" :duration="500" v-model="sideMneuVisiable" :timingFunction="'ease-in-out'" @close="close">
......
</sideMenu>
</template>
<script lang="ts" setup>
const sideMneuVisiable:Ref<boolean> = ref(false)
const close = () => {
......
}
</script>
VUE2使用说明
<template>
<sideMenu :width="'75%'" :duration="500" :modelValue.sync="sideMneuVisiable" :timingFunction="'ease-in-out'" @close="close">
......
</sideMenu>
</template>
<script lang="ts" setup>
export default {
data() {
return {
sideMenuVisiable: true
}
},
onLoad() {
},
methods: {
closed(){
console.log('关闭弹窗后的回调函数');
},
}
}
</script>