更新记录
1.1.0(2023-09-23)
下载此版本
改为Option API,支持VUE2
1.0.0(2023-09-16)
下载此版本
发布了组件
平台兼容性
uni-app
Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
√ |
√ |
√ |
- |
√ |
- |
- |
- |
- |
微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
其他
gscosmos-dialog
GSCOSMOS·一款支持VUE3带动效的弹窗
style类型
参数 |
类型 |
必填 |
说明 |
width |
number |
否 |
宽度(最终计算为%) |
height |
number |
否 |
高度(最终计算为%) |
borderRadius |
string |
否 |
圆角度 |
Options 参数说明
参数 |
类型 |
必填 |
说明 |
默认值 |
modelValue |
boolean |
是 |
控制是否弹出弹窗 |
|
duration |
number |
否 |
弹窗 弹出/弹回 动画时间(毫秒) |
300 |
title |
string |
否 |
弹窗的标题 |
|
fromPoi |
string[] |
否 |
弹窗最开始的位置 |
['0%','0%'] |
title |
string |
否 |
弹窗的标题 |
|
backgroundColor |
string |
否 |
弹窗的背景色 |
#f5f5f5 |
startStyle |
style |
否 |
弹窗开始的样式 |
{'width': 0, height: 0, borderRadius: '0px'} |
endStyle |
style |
否 |
弹窗最终的样式 |
{'width': 80, height: 80, borderRadius: '8px'} |
Events 回调
回调名称 |
说明 |
返回参数类型 |
closed |
关闭弹窗时的回调函数 |
NULL |
使用说明
<template>
<view class="content">
<gscosmos-dialog
v-model="dialogData.visiable"
:endStyle="dialogData.endStyle"
:fromPoi="dialogData.fromPoi"
:title="'添加旅程规划'"
@closed="closed">
<view class="content">
弹窗的内容
</view>
</gscosmos-dialog>
<view @click="dialogData.visiable = true">
打开弹窗
</view>
</view>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
const dialogData = reactive({
visiable: false,
fromPoi: ['0','0'],
endStyle: {
height: 50
}
})
const closed = () => {
console.log('关闭弹窗后的回调函数');
}
</script>