PopupModal 模态弹出框

使用指南

模态弹出框组件，可用于快速实现的上滑蒙层弹出框；

且实现了一个picker式的头部组件 可以通过 H3PopupModal.Header 来获取

TIP

此组件基于h3-popup组件实现 , 属于Popup家族组件，查看这篇blogPopup家族, 了解更多

代码演示

查看代码

<template>
  <div>
    <p>popup-modal 组件</p>

    <h3-button @click="popupmodalvisible2 = true">
      单选列表
    </h3-button>
    <br />

    <h3-button @click="popupmodalvisible3 = true">
      复选列表
    </h3-button>
    <!-- <h3-button @click="popupmodalvisible = true">
      show popupmodal
    </h3-button>
    <h3-button @click="popupmodalvisible1 = true">
      show popupmodal(closable=flase)
    </h3-button>
    <h3-button @click="popupmodalvisible2 = true">
      show popupmodal title slot
    </h3-button> -->
    <h3-popup-modal v-model="popupmodalvisible" maskClosable title="test">
      <div class="popup-modal-demo">
        内容区
      </div>
    </h3-popup-modal>

    <h3-popup-modal
      v-model="popupmodalvisible1"
      :closable="false"
      maskClosable
      title="test"
    >
      <div class="popup-modal-demo">
        内容区
      </div>
    </h3-popup-modal>

    <h3-popup-modal v-model="popupmodalvisible2" maskClosable>
      <template #header>
        <h3-popup-modal-header
          clearText=""
          @cancel="popupmodalvisible2 = false"
          @clear="popupmodalvisible2 = false"
          @confirm="popupmodalvisible2 = false"
          @extra="popupmodalvisible2 = false"
        />
      </template>
      <div class="popup-modal-demo">
        <div class="cont-header">
          自定义头部区域
        </div>
        <div class="cont-container">
          <h3-radio-group v-model="radioOption" align="right">
            <h3-radio
              v-for="item in listOpions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
              :disabled="item.disabled"
            />
          </h3-radio-group>
        </div>
      </div>
    </h3-popup-modal>

    <h3-popup-modal v-model="popupmodalvisible3" maskClosable>
      <template #header>
        <h3-popup-modal-header
          title="标题"
          clearText=""
          @cancel="popupmodalvisible3 = false"
          @clear="popupmodalvisible3 = false"
          @confirm="popupmodalvisible3 = false"
          @extra="popupmodalvisible3 = false"
        />
      </template>
      <div class="popup-modal-demo">
        <div class="cont-header">
          自定义头部区域
        </div>
        <div class="cont-container">
          <h3-checkbox-group
            v-model="checkOption"
            layout="vertical"
            align="right"
            :all="false"
          >
            <h3-checkbox
              v-for="item in listOpions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </h3-checkbox-group>
        </div>
      </div>
    </h3-popup-modal>
  </div>
</template>

<script>
import H3PopupModal from '@/components/h3-popup-modal/';
import H3Button from '@/components/h3-button/';
import H3Radio from '@/components/h3-radio';
import H3Checkbox from '@/components/h3-checkbox';

export default {
  name: 'Picker',
  components: {
    H3PopupModal,
    H3PopupModalHeader: H3PopupModal.Header,
    H3Button,
    H3Radio,
    H3RadioGroup: H3Radio.Group,
    H3Checkbox,
    H3CheckboxGroup: H3Checkbox.Group,
  },
  data () {
    return {
      popupmodalvisible: false,
      popupmodalvisible1: false,
      popupmodalvisible2: false,

      popupmodalvisible3: false,

      radioOption: 'key1',
      checkOption: ['key2'],
      listOpions: [
        {
          value: 'key1',
          label: '选项一',
        },
        {
          value: 'key2',
          label: '选项二',
        },
        {
          value: 'key3',
          label: '选项三',
        },
        {
          value: 'key4',
          label: '选项四',
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
p {
  margin: 10px 0;
  font-size: 14px;
}
.picker-buttons {
  margin: 0 15px;
}
.cont-header {
  height: 48px;
  background: #f5f6f9;
  padding: 0 16px;
  display: flex;
  align-items: center;
}
.popup-modal-demo {
  width: 100%;
}
</style>

与h3-mobile-vue组件的区别以及迁移

新组件

API

Prop

属性	说明	类型	默认值
visible	是否显示，v-model绑定值	Boolean	false
maskClosable	点击蒙层是否可触发关闭	Boolean	false
mask	是否显示透明蒙层，防止触摸穿透	Boolean	true
round	是否圆角	boolean	false
maskCls	mask蒙层自定义class	string	无
wrapCls	wrap弹窗内容区域的自定义class	string	无
getRenderContainer	把组件挂载某个地方,函数请返回节点,字符串默认通过document.querySelector查找	Function=> Node / String	document.body
title	弹窗标题, 若无值或slot:header被使用，将不出现默认头部	string	-
closable	头部关闭按钮是否显示，默认显示	boolean	true

Slot

属性	说明	参数
header	弹窗头部插槽	-

Event

事件名	说明	参数
toggle	切换显示时触发，v-model绑定事件	value
show	显示时回调	-
hide	关闭时回调	-
maskClick	点击蒙层回到	-

H3PopupModal.Header

Prop

属性	说明	类型	默认值
title	标题	string	-
cancelText	第一个按钮文本	string	'取消'
clearText	第二个按钮文本	string	'清空'
extraText	第三个按钮文本	string	-
confirmText	第四个按钮文本	string	'确定'

Event

事件名	说明	参数
cancel	第一个按钮点击时回调	-
clear	第二个按钮点击时回调	-
extra	第三个按钮点击时回调	-
confirm	第四个按钮点击时回调	-