PopConfirm 问答泡

演示

使用方式：

popConfirm的使用可以用传统插槽方式和虚拟元素触发

<template>
  <div class="row">
    <cl-pop-confirm
      @cancel="cancel"
      @confirm="confirm"
      title="确定删除订单？"
      content="此操作不可撤回，数据将不会保存。"
    >
      <template #reference>
        <cl-button>普通用法</cl-button>
      </template>
    </cl-pop-confirm>
    <cl-pop-confirm
      :openDelay="1000"
      :virtualRef="buttonRef"
      title="确定删除订单？"
      content="此操作不可撤回，数据将不会保存。"
    >
    </cl-pop-confirm>
    <cl-button ref="buttonRef">virtualRef用法</cl-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const buttonRef = ref<HTMLElement | null>(null)
function cancel() {
  console.log('cancel')
}
function confirm() {
  console.log('confirm')
}
</script>

<style lang="scss" scoped>
@import '../popup/popup-demo.scss';
</style>

自定义内容：

传入content插槽，自定义内容,title:自定义标题

<template>
  <div class="row">
    <cl-pop-confirm hideIcon hideConfirm hideCancel>
      <template #reference>
        <cl-button>普通用法</cl-button>
      </template>
      <template #content>
        <table>
          <tr>
            <td>缸号</td>
            <td>卷数</td>
            <td>数量</td>
          </tr>
          <tr>
            <td>11</td>
            <td>10</td>
            <td>100</td>
          </tr>
          <tr>
            <td>12</td>
            <td>10</td>
            <td>100</td>
          </tr>
        </table>
      </template>
      <template #title>
        <div>明细</div>
      </template>
    </cl-pop-confirm>
    <cl-pop-confirm :virtualRef="buttonRef" hideIcon hideConfirm hideCancel>
      <template #reference>
        <cl-button>80</cl-button>
      </template>
      <template #content>
        <table>
          <tr>
            <td>缸号</td>
            <td>卷数</td>
            <td>数量</td>
          </tr>
          <tr>
            <td>11</td>
            <td>10</td>
            <td>100</td>
          </tr>
          <tr>
            <td>12</td>
            <td>10</td>
            <td>100</td>
          </tr>
        </table>
      </template>
      <template #title>
        <div>明细</div>
      </template>
    </cl-pop-confirm>
    <cl-button ref="buttonRef">virtualRef用法</cl-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const buttonRef = ref<HTMLElement | null>(null)
</script>

<style lang="scss" scoped>
@import '../popup/popup-demo.scss';
table {
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}
tr {
  border-top: 1px solid #dfe2e5;
}

tr:nth-child(2n) {
  background-color: #f6f8fa;
}

td,
th {
  border: 1px solid #dfe2e5;
  padding: 0.6em 1em;
}
</style>

popConfirm 参数描述

参数	描述	类型	可选值	默认值
title	标题	string	-	-
content	内容	string	-	-
confirmText	确定按钮文案	String	-	-
cancelText	取消按钮文案	String	-	-
icon	自定义 icon	String	-	cl-icon-warning
iconColor	自定义 icon 颜色	String	-	#FE352D
hideIcon	隐藏 icon	Boolean	-	false
hideClose	隐藏关闭按钮	Boolean	-	false
hideConfirm	隐藏确定按钮	Boolean	-	false
hideCancel	隐藏取消按钮	Boolean	-	false

如下参数：参考 popup

参数	描述	类型	可选值	默认值
v-model / modelValue	默认状态是否可见	Boolean	-	false
disabled	pop 是否可用	Boolean	-	false
trigger	触发方式	String	click hover manual	click
placement	出现位置	String	-	top-center
preRender	是否需要预渲染	Boolean	-	false
enterable	鼠标是否可进入到泡中	Boolean	-	true
popupClass	自定义 pop 样式	String	-	-
offset	泡偏移量（px）	Number	-	0
visibleArrow	是否显示箭头	Boolean	-	true
arrowOffset	箭头偏移	Number	-	0
openDelay	延迟出现（hover 触发)	Number	-	100 ms
closeDelay	延迟隐藏（hover 触发)	Number	-	100 ms
virtualRef	虚拟触发的元素	ComponentPublicInstance<HTMLElement>|<HTMLElement>	-	-
outsideAutoCloseWithManual	手动触发模式下，是否点击内容外自动关闭	boolean	-	false

popConfirm 插槽

参数	描述
title	标题
content	内容
footer	操作区
reference	触发 popConfirm 显示的 元素

popConfirm 事件

事件名称	描述	回调参数
confirm	点击确认按钮时触发	-
cancel	点击取消按钮时触发	-