# Popup 弹出层

弹出层容器,用于展示弹窗、信息提示等内容。

重要提示

  1. 组件只提供弹出容器,内容自行通过slot传入
  2. 弹出高度由内容自动撑开,可自行设置slot高度,比如 400rpx,50vh等具体的高度
  3. 如果需要设置百分比高度,需要设置弹出层的高度,可通过custom-class, custom-style,参照以下代码:
<!-- 弹出层高度由内容(slot)撑开 -->
<pi-popup v-model="customHeight.show">
  <view style="height: 560rpx;">
    设置内容高度为560rpx
  </view>
</pi-popup>
<!-- 设置弹出层高度为80px -->
<pi-popup
  v-model="customHeight.show"
  custom-class="pi-h-80"
/>
<!-- 设置弹出层高度为50% -->
<pi-popup
  v-model="customHeight.show"
  :custom-style="{
    height: '50%'
  }"
/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  1. ios h5平台下,vh单位会有兼容性问题,如需兼容,建议使用百分比设置弹出层高度

# 平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序

# 示例

# 基础用法

可通过v-model | value:设定是否显示弹出层

<template>
  <pi-button type="primary" @click="baseUsed.show = true">
    显示弹出层
  </pi-button>
  <pi-popup v-model="baseUsed.show">
    <view style="height: 800rpx;" />
  </pi-popup>
</template>

<script>
export default {
  data() {
    return {
      baseUsed: {
        show: false
      }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 设置弹出高度(非内容撑开)

可通过custom-class, custom-style 设置弹出窗样式

<template>
  <pi-button type="primary" @click="customHeight = true">
    显示弹出层
  </pi-button>
  <pi-popup
    v-model="customHeight"
    :custom-style="{
      height: '50%'
    }"
  />
</template>

<script>
export default {
  data() {
    return {
      customHeight: false
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 弹出位置

通过 position 属性设置弹出位置,默认居中弹出,有以下位置可供选择:

  1. top: 上方(默认)
  2. bottom: 下方
  3. left: 左侧
  4. right: 右侧

提示

当position为left | right的时候,slot可通过height: 100%;来设置占满高度

<template>
  <pi-grid col="2" gap="24" :border="false">
    <pi-grid-item :index="0">
      <pi-button type="primary" @click="handleShowPosition('top')">
        上方弹出
      </pi-button>
    </pi-grid-item>
    <pi-grid-item :index="1">
      <pi-button type="primary" @click="handleShowPosition('bottom')">
        下方弹出
      </pi-button>
    </pi-grid-item>
    <pi-grid-item :index="2">
      <pi-button type="primary" @click="handleShowPosition('left')">
        左侧弹出
      </pi-button>
    </pi-grid-item>
    <pi-grid-item :index="3">
      <pi-button type="primary" @click="handleShowPosition('right')">
        右侧弹出
      </pi-button>
    </pi-grid-item>
  </pi-grid>
  <pi-popup v-model="position.show" :position="position.position">
    <view :style="[position.style]" />
  </pi-popup>
</template>

<script>
export default {
  data() {
    return {
      position: {
        show: false,
        position: 'top',
        style: { width: '100%', height: '800rpx' }
      }
    }
  },
  methods: {
    handleShowPosition(position = 'top') {
      const positionStyleMap = {
        top: { width: '100%', height: '800rpx' },
        bottom: { width: '100%', height: '800rpx' },
        left: { width: '500rpx', height: '100%' },
        right: { width: '500rpx', height: '100%' }
      }
      this.position = {
        show: true,
        position,
        style: positionStyleMap[position]
      }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

# 背景颜色

可通过background:设置slot的背景颜色

<template>
  <pi-button type="primary" @click="background.show = true">
    显示弹出层
  </pi-button>
  <pi-popup v-model="background.show" background="rgba(0, 0, 0, 0.8)">
    <view style="height: 800rpx;" />
  </pi-popup>
</template>

<script>
export default {
  data() {
    return {
      background: {
        show: false
      }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 圆角设置

可通过borderRadius:设置slot的四个方向的圆角半径

<template>
  <pi-button type="primary" @click="borderRadius.show = true">
    显示弹出层
  </pi-button>
  <pi-popup v-model="borderRadius.show" border-radius="48rpx 48rpx 0 0">
    <view style="height: 800rpx;" />
  </pi-popup>
</template>

<script>
export default {
  data() {
    return {
      showCloseIcon: {
        show: false
      }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 是否显示关闭按钮

可通过showCloseIcon:设置是否显示关闭按钮

<template>
  <pi-button type="primary" @click="closeIcon.show = true">
    显示弹出层
  </pi-button>
  <pi-popup v-model="showCloseIcon.show" :show-close-icon="showCloseIcon.closeIcon">
    <view style="height: 800rpx;" />
  </pi-popup>
</template>

<script>
export default {
  data() {
    return {
      showCloseIcon: {
        show: false
      }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 自定义关闭按钮

可通过修改closeIcon对象,自定义关闭按钮

默认配置:

name: 'close', // 关闭图标的名称,默认(close) padding: '32rpx 32rpx', // 关闭图标的padding color: '#666666', // 关闭图标的颜色,默认('#666666') size: 42, // 关闭图标的大小,默认('42rpx') weight: 800, // 关闭图标font-weight,默认('800') position: '' // 关闭图标位置,tl为左上角,tr为右上角,bl为左下角,br为右下角,若不指定,则按照弹出位置自动显示在合适的位置

<template>
  <pi-button type="primary" @click="borderRadius.show = true">
    显示弹出层
  </pi-button>
  <pi-popup v-model="closeIcon.show" :close-icon="closeIcon.closeIcon">
    <view style="height: 100vh;" />
  </pi-popup>
</template>

<script>
export default {
  data() {
    return {
      closeIcon: {
        show: false,
        closeIcon: {
          name: 'back',
          padding: '32rpx 32rpx',
          color: '#666666',
          position: 'tl'
        }
      }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# Props

名称 描述 类型 必选 默认值
value 是否显示弹出层 false -
customStyle 自定义样式 Object false {}
customClass 自定义样式类 String false ''
position 弹出位置, 可选值为'top', 'bottom', 'right', 'left', 'center' String false 'bottom'
background 背景颜色 String false '#ffffff'
borderRadius 控制弹窗的四个角圆角效果 String/Number false 0 0 0 0
safeAreaInsetTop 顶部安全适配 Boolean false true
safeAreaInsetBottom 底部安全适配(iPhoneX 留出底部安全距离) Boolean false true
showCloseIcon 是否显示关闭图标 Boolean false true
closeIcon 关闭图标的配置 Object false closeIcon配置项
mask 弹窗蒙层的配置 Object false mask配置项

# CloseIcon Props

名称 描述 类型 必选 默认值
name 关闭图标的名称 String false 'close'
padding 关闭图标的padding String/Number false '32rpx 32rpx'
color 关闭图标的颜色 String false '#666666'
size 关闭图标的大小 单位默认rpx String/Number false 42
weight 关闭图标的font-weight String/Number false 800
position 关闭图标位置,'tl'为左上角,'tr'为右上角,'bl'为左下角,'br'为右下角,若不指定,则按照弹出位置自动显示在合适的位置 String false ''

# Events

事件名 描述 参数
close 弹窗即将关闭 -
closed 弹窗已经关闭 -
change 弹窗切换显示状态 -

# Slots

名称 描述 插槽内容
default 弹窗内容 -
Last updated: 2021/7/27 下午7:11:54
10:44