代码拉取完成,页面将自动刷新
App(vue) | App(nvue) | H5 | 小程序 |
---|---|---|---|
√ | √ | √ | 微信 |
<template>
<view
class="popup__item"
@click="showPopup"
>
显示弹窗
</view>
<ku-popup
v-model:show="show"
type="bottom"
>
弹窗内容
</ku-popup>
</template>
<script lang="ts">
export default {
data() {
return {
show: false as boolean
}
},
methods: {
showPopup() {
this.show = true
}
}
}
</script>
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
show | 是否显示弹层,v-model:show双向绑定 | Boolean | false | true |
type | 弹出方式 | String | 'center' | 可选值列表 |
zIndex | 定位层级 | String|Number | 1000 | - |
duration | 弹出动画时长,单位ms | String|Number | 100 | - |
clickMaskClose | 点击遮罩层是否关闭 | Boolean | true | false |
safeAreaBottom | 是否适配底部安全区域(注意:type值为left和right时,该属性也有效,如不需要手动设置为false) | Boolean | true | false |
safeAreaBottomBg | 底部适配区域的背景颜色 | String | 'transparent' | css颜色值 |
safeAreaTop | 是否适配顶部状态栏高度(注意:type值为left和right时,该属性也有效,如不需要手动设置为false) | Boolean | true | false |
safeAreaTopBg | 顶部状态栏区域背景颜色 | String | 'transparent' | css颜色值 |
maskOpacity | 遮罩层透明度 | String\Number | 0.4 | 0-1 |
maskStyle | 遮罩层样式 | Object | - | - |
customStyle | 自定义样式 | Object | - | - |
事件名 | 说明 | 回调参数 |
---|---|---|
beforOpen | 弹层打开前触发 | - |
afterOpen | 弹层打开后触发 | - |
beforClose | 弹层关闭前触发 | - |
afterClose | 弹层关闭后触发 | - |
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。