QinUi

该组件用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义，强扩展性。

# 基础用法

<template>
  <view>
    <qinui-popup title="图片标题" ref="thePopup">
      <div style="height: 300rpx; overflow: auto">
        <div style="height: 1500rpx; background-color: #f5f6fa">11</div>
        <div>底部了</div>
      </div>
    </qinui-popup>
    <button @click="onOpen">打开 Popup</button>
  </view>
</template>
<script>
  export default {
    methods: {
      onOpen() {
        this.$refs.thePopup.open();
      },
    }
  }
</script>

# 灰度标题使用

设置 titleTheme="gray"

<template>
  <view>
    <qinui-popup
      title="灰度标题"
      ref="thePopup"
      titleTheme="gray"
    >
      <div style="height: 70vh; overflow: auto">
        <div style="height: 1500rpx; background-color: #fff">11</div>
        <div>底部了</div>
      </div>
    </qinui-popup>
    <button @click="onOpen">打开 Popup</button>
  </view>
</template>
<script>
  export default {
    methods: {
      onOpen() {
        this.$refs.thePopup.open();
      },
    }
  }
</script>

# 标题

设置 :closeable="false" 不显示关闭 icon 。

<template>
  <view>
    <qinui-popup
      title="标题"
      ref="thePopup"
      :closeable="false"
    >
      <div style="height: 70vh; overflow: auto">
        <div style="height: 1500rpx; background-color: #fff">11</div>
        <div>底部了</div>
      </div>
    </qinui-popup>
    <button @click="onOpen">打开 Popup</button>
  </view>
</template>
<script>
  export default {
    methods: {
      onOpen() {
        this.$refs.thePopup.open();
      },
    }
  }
</script>

# 顶部弹出

设置 placement="top" 控制方向。

<template>
  <view>
    <qinui-popup
      ref="thePopup"
      placement="top"
    >
      <div style="height: 70vh; overflow: auto">
        <div style="height: 1500rpx; background-color: #fff">11</div>
        <div>底部了</div>
      </div>
    </qinui-popup>
    <button @click="onOpen">打开 Popup</button>
  </view>
</template>
<script>
  export default {
    methods: {
      onOpen() {
        this.$refs.thePopup.open();
      },
    }
  }
</script>

# 右侧弹出

设置 placement="right" 控制方向。

<template>
  <view>
    <qinui-popup
      ref="thePopup"
      placement="right"
    >
      <div style="height: 70vh; overflow: auto">
        <div style="height: 1500rpx; background-color: #fff">11</div>
        <div>底部了</div>
      </div>
    </qinui-popup>
    <button @click="onOpen">打开 Popup</button>
  </view>
</template>
<script>
  export default {
    methods: {
      onOpen() {
        this.$refs.thePopup.open();
      },
    }
  }
</script>

# 底部弹出

设置 placement="bottom" 控制方向。

<template>
  <view>
    <qinui-popup
      ref="thePopup"
      placement="bottom"
    >
      <div style="height: 70vh; overflow: auto">
        <div style="height: 1500rpx; background-color: #fff">11</div>
        <div>底部了</div>
      </div>
    </qinui-popup>
    <button @click="onOpen">打开 Popup</button>
  </view>
</template>
<script>
  export default {
    methods: {
      onOpen() {
        this.$refs.thePopup.open();
      },
    }
  }
</script>

# 左侧弹出，点击遮罩不能关

设置 placement="left" 控制方向。设置 closeOnClickOverlay="false" 弹框不能关。

<template>
  <view>
    <qinui-popup
      ref="thePopup"
      placement="left"
      :closeOnClickOverlay="false"
      :closeable="false"
    >
      <div style="height: 70vh; overflow: auto">
        <div style="height: 1500rpx; background-color: #fff">11</div>
        <div>底部了</div>
      </div>
    </qinui-popup>
    <button @click="onOpen">打开 Popup</button>
  </view>
</template>
<script>
  export default {
    methods: {
      onOpen() {
        this.$refs.thePopup.open();
      },
    }
  }
</script>

# 居中弹出

设置 placement="center" 控制方向。

<template>
  <view>
    <qinui-popup
      ref="thePopup"
      placement="center"
    >
      <div style="height: 70vh; overflow: auto">
        <div style="height: 1500rpx; background-color: #fff">11</div>
        <div>底部了</div>
      </div>
    </qinui-popup>
    <button @click="onOpen">打开 Popup</button>
  </view>
</template>
<script>
  export default {
    methods: {
      onOpen() {
        this.$refs.thePopup.open();
      },
    }
  }
</script>

# API

# Props

参数 说明 类型 默认值 可选值
placement 方向 String - top | bottom | center | right | left
zIndex 层级 String | Number 997 -
bgColor 背景颜色 String #ffffff -
overlay 是否显示遮罩 Boolean true -
closeOnClickOverlay 点击遮罩是否可关闭 Boolean true -
title 标题 String - -
titleTheme 标题主题 String default default | gray
closeable 是否显示关闭图标 Boolean false -
diyStyle 自定义外部样式，如：设置边框等样式 String - -

# Methods

方法名 说明
open 显示组件
close 关闭组件

# Events

事件名 说明 回调参数
@change 改变显示状态触发 -
@maskClick 点击遮罩触发 -

← ActionSheet 操作菜单 →