QinUi

弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。

# 基础用法

<template>
  <view>
    <qinui-modal
      ref="modal"
      content="模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作"
      title="标题"
    />
    <button @click="onOpen">打开 Modal</button>
  </view>
</template>
<script>
  export default {
    methods: {
      onOpen() {
        this.$refs.modal.open();
      },
    }
  }
</script>

# 无标题

<template>
  <view>
    <qinui-modal
      ref="modal"
      content="模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作"
    />
    <button @click="onOpen">打开 Modal</button>
  </view>
</template>
<script>
  export default {
    methods: {
      onOpen() {
        this.$refs.modal.open();
      },
    }
  }
</script>

# 带取消按钮

设置 :showCancelButton="true"

<template>
  <view>
    <qinui-modal
      ref="modal"
      content="模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作"
      :showCancelButton="true"
    />
    <button @click="onOpen">打开 Modal</button>
  </view>
</template>
<script>
  export default {
    methods: {
      onOpen() {
        this.$refs.modal.open();
      },
    }
  }
</script>

# 异步关闭

设置 :asyncClose="true"

<template>
  <view>
    <qinui-modal
      ref="modal"
      content="模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作"
      :asyncClose="true"
      @ok="onConfirm"
    />
    <button @click="onOpen">打开 Modal</button>
  </view>
</template>
<script>
  export default {
    methods: {
      onOpen() {
        this.$refs.modal.open();
      },
      onConfirm() {
        setTimeout(() => {
          this.$refs.modal.close();
        }, 2000);
      },
    }
  }
</script>

# 对调取消和确认按钮

设置 :buttonReverse="true"

<template>
  <view>
    <qinui-modal
      ref="modal"
      content="模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作"
      :showCancelButton="true"
      :buttonReverse="true"
    />
    <button @click="onOpen">打开 Modal</button>
  </view>
</template>
<script>
  export default {
    methods: {
      onOpen() {
        this.$refs.modal.open();
      },
    }
  }
</script>

# 禁止点击遮罩关闭

设置 :closeOnClickOverlay="false"

<template>
  <view>
    <qinui-modal
      ref="modal"
      content="模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作"
      :closeOnClickOverlay="false"
    />
    <button @click="onOpen">打开 Modal</button>
  </view>
</template>
<script>
  export default {
    methods: {
      onOpen() {
        this.$refs.modal.open();
      },
    }
  }
</script>

# 自定义按钮

<template>
  <view>
    <qinui-modal
      ref="modal"
      title="标题"
      content="模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作"
    >
      <template v-slot:okButton>
        <view style="padding: 0px 25px 15px 25px">
          <qinui-button
            type="success"
            shape="circle"
            @click="confirmClickHandler"
            >确定</qinui-button
          >
        </view>
      </template>
    </qinui-modal>
    <button @click="onOpen">打开 Modal</button>
  </view>
</template>
<script>
  export default {
    methods: {
      onOpen() {
        this.$refs.modal.open();
      },
    }
  }
</script>

# API

# Props

参数 说明 类型 默认值 可选值
title 标题 String - -
content 内容 String - -
okText 确认文案 String 确认 -
cancelText 取消文案 String 取消 -
width modal宽度，不支持百分比，可以数值，px，rpx单位 String 500rpx -
showOkButton 是否显示确认按钮 Boolean true -
showCancelButton 是否显示取消按钮 Boolean false -
buttonReverse 对调确认和取消的位置 Boolean false -
asyncClose 是否异步关闭，只对确定按钮有效 Boolean false -
closeOnClickOverlay 是否允许点击遮罩关闭 modal Boolean true -
okColor 确认按钮颜色 String var(--qinuiPrimaryColor, #ff361f) -
cancelColor 取消按钮颜色 String rgba(0,0,0,0.45) -

# Methods

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

# Events

事件名 说明 回调参数
@ok 点击确认触发 -
@cancel 点击取消触发 -
@close 关闭触发 -

← Popup 弹出层 →