PIUI 高质量开源组件库

# 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

← PopupSelect 弹出选择 →

10:44