1.0.0 • Published 2 years ago
@dj-ui/dj-popup v1.0.0
安装
npm i @deji/dj-popup
使用
方式 1
<template>
<dj-popup v-model="visible"></dj-popup>
</template>
<script>
import djPopup from '@deji/dj-popup'
export default {
data() {
return {
visible: true,
}
},
components:{
djOverlay
},
}
</script>
方式2 (easyCom)
//pages.json
{
"easycom": {
"^dj-(.*)": "@deji/dj-$1/index.vue"
},
}
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
custom | 开启自定义模式 | Boolean | true / false | false |
maskClosable | 点击蒙层是否允许关闭 | Boolean | true / false | false |
visible(v-model、sync) | 是否可见 | Boolean | true / false | false |
duration | 动画过渡时长 (毫秒) | Number, String | - | 300 |
closable | 是否显示右上角关闭按钮(仅在mode=“bottom”有效) | Boolean | true / false | false |
zIndex | 显示层级 | Number, String | - | 10000 |
mode | 模式(top 顶部弹出 ; bottom 底部弹出) | String | bottom top | bottom |
isRadius | 是否显示圆角 | Boolean | true / false | false |
radius | 圆角大小(仅在isRadius时有效)单位:rpx | Number | 20 |
Events
事件名 | 说明 | 参数 |
---|---|---|
open | 当弹层被打开时会触发该事件 | - |
opened | 当弹层被打开时动画执行完毕会触发该事件 | |
close | 当弹层被关闭时会触发该事件 | |
closed | 当弹层被关闭时动画执行完毕会触发该事件 |
Slot
name | 说明 |
---|---|
title | 自定义title,可能需要用到这个 slot |
content | 自定义content,可能需要用到这个 slot |
1.0.0
2 years ago