Popconfirm 气泡确认框

代码演示

TS Top TE

LS Left LE

RS Right RE

BS Bottom BE

基础用法

popconfirm是一个轻量级的确认框, 与tooltip、 popover 组件一样, popconfirm组件有十二个方向, 默认值为 placement = bottom-start。

查看代码 < />

<template>
  <div class="demo-wrapper">
    <div class="top">
      <w-popconfirm  title="确认删除这条内容吗? " placement="top-start">
        <span class="popconfirm-reference" slot="reference">TS</span>
      </w-popconfirm>
      <w-popconfirm  title="确认删除这条内容吗? " placement="top">
        <span class="popconfirm-reference" slot="reference">Top</span>
      </w-popconfirm>
      <w-popconfirm  title="确认删除这条内容吗? " placement="top-end">
        <span class="popconfirm-reference" slot="reference">TE</span>
      </w-popconfirm>
    </div>
    <div class="col-wrapper">
      <div class="left">
      <w-popconfirm  title="确认删除这条内容吗? " placement="left-start">
        <span class="popconfirm-reference" slot="reference">LS</span>
      </w-popconfirm>
      <w-popconfirm  title="确认删除这条内容吗? " placement="left">
        <span class="popconfirm-reference" slot="reference">Left</span>
      </w-popconfirm>
      <w-popconfirm  title="确认删除这条内容吗? " placement="left-end">
        <span class="popconfirm-reference" slot="reference">LE</span>
      </w-popconfirm>
      </div>
    <div class="right">
      <w-popconfirm  title="确认删除这条内容吗? " placement="right-start">
        <span class="popconfirm-reference" slot="reference">RS</span>
      </w-popconfirm>
      <w-popconfirm  title="确认删除这条内容吗? " placement="right">
        <span class="popconfirm-reference" slot="reference">Right</span>
      </w-popconfirm>
      <w-popconfirm  title="确认删除这条内容吗? " placement="right-end">
        <span class="popconfirm-reference" slot="reference">RE</span>
      </w-popconfirm>
    </div>
    </div>
    <div class="bottom">
      <w-popconfirm  title="确认删除这条内容吗? " placement="bottom-start">
        <span class="popconfirm-reference" slot="reference">BS</span>
      </w-popconfirm>
      <w-popconfirm  title="确认删除这条内容吗? " placement="bottom">
        <span class="popconfirm-reference" slot="reference">Bottom</span>
      </w-popconfirm>
      <w-popconfirm  title="确认删除这条内容吗? " placement="bottom-end">
        <span class="popconfirm-reference" slot="reference">BE</span>
      </w-popconfirm>
    </div>
  </div>
</template>

自定义图标

气泡确认框默认的图标是icon = w-icon-info, icon属性还接受其他任意通用字体图标。

查看代码 < />

<template>
  <w-popconfirm
    ref="popper"
    trigger="click"
    title="确认删除这个链接吗? "
    icon="w-icon-close-solid"
    placement="top-start"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  >
  </w-popconfirm>

  <w-button v-popconfirm:popper icon="w-icon-link" circle></w-button>
</template>
<script>
  export default {
    methods: {
      handleConfirm () {
        alert('删除成功!')
      },
      handleCancel () {
        alert('取消成功!')
      }
    }
  }
</script>

WARNING

注意：在table中使用带有reference的组件时，可能会出现因重复渲染多个实例造成多个气泡的问题。v1.5.9版本及以后，开发者需要手动设置reference-cell参数，来解决这个问题。

状态完全控制

如果在应用中想获得对气泡确认框状态的完全控制，需要使用到状态值的双向绑定，默认插槽插入额外的内容，且需要取消trigger默认事件，利用数据来控制气泡框的显示与隐藏。

查看代码 < />

<template>
  <w-table class="popconfirm-demo" :data="tableData">
    <w-table-column prop="time" label="就诊时间" width="200"></w-table-column>
    <w-table-column prop="name" label="姓名"></w-table-column>
    <w-table-column prop="status" label="签约状态"></w-table-column>
    <w-table-column prop="switch" label="是否禁用" reference-cell>
      <template slot-scope="scope">
        <!-- 给trigger传入空，取消默认绑定方法 -->
        <w-popconfirm v-model="scope.row.switchPopopver" trigger=""
          :title="scope.row.switch ? '请选择禁用原因：' : '请输入启用原因：'"
          icon="w-icon-warning" placement="bottom" immediately
          @document-click="handleCancel(scope.$index)"
          @confirm="handleConfirm" @cancel="handleCancel(scope.$index)">
          <div class="content-wrapper">
            <template v-if="scope.row.switch">
              <!-- 禁用时选择 -->
              <w-select v-model="select" placeholder="请选择">
                <w-option label="数据重复" value="1"></w-option>
                <w-option label="数据错误" value="2"></w-option>
                <w-option label="数据失效" value="3"></w-option>
              </w-select>
            </template>
            <template v-else>
              <!-- 启用时输入 -->
              <w-input v-model="input" type="textarea" placeholder="请输入启用原因"
                :rows="4" :maxlength="60" showCounter />
            </template>
          </div>
          <template slot="reference">
          <w-switch v-model="scope.row.switch"
            active-color="#13ce66" inactive-color="#ff4949" slot="reference"
            @click="handleSwitchClick"
            @change="val => handleChange(scope.$index, val)"></w-switch>
          </template>
        </w-popconfirm>
      </template>
    </w-table-column>
    <w-table-column fixed="right" label="操作" width="100">
      <template slot-scope="scope">
        <w-button type="text" size="small">查看</w-button>
      </template>
    </w-table-column>
  </w-table>
</template>
<script>
export default {
  data () {
    return {
    select: '',
    input: '',
    cancelManually: false,
    tableData: [{
      time: '2019.05.12 11:02:33',
      status: '其他区签约',
      name: '赵宇翔',
      type: '其他',
      address: '上海市普陀区金沙江路 1518 弄',
      switch: true,
      switchPopopver: false
    }, {
      time: '2019.05.12 12:24:30',
      status: '未签约',
      name: '肖新宇',
      type: '本地医保',
      address: '上海市普陀区金沙江路 1519 弄',
      switch: false,
      switchPopopver: false
    }]
  },
  methods: {
    handleSwitchClick () {
      this.cancelManually = false
    },
    handleChange (index, val) {
      if (this.cancelManually) return
      this.tableData[index].switchPopopver = true
      this.cancelManually = false
    },
    handleConfirm () {
      // 确认
      this.$message({
        message: '确认修改状态!',
        type: 'success'
      })
    },
    handleCancel (index) {
      // 手动取消
      this.cancelManually = true
      setTimeout(() => {
        this.tableData[index].switch = !this.tableData[index].switch // 恢复状态
      }, 200) // 等关闭气泡后修改状态， 避免出现数据状态过度，影响体验
    }
  }
}
</script>
<style>
.content-wrapper {
  margin-top: 15px;
}
</style>

API

Attributes

参数	说明	类型	可选值	默认值
cancelText	左边按钮的文本值	String	—	取消
hiddenPopperOnClickDocument	点击其他文档时关闭气泡(仅当trigger为空时有效)	Boolean	—	true
icon	气泡框中的icon的class名	String	—	w-icon-info
immediately	是否需要气泡关闭延迟（300ms）	Boolean	—	false
okText	右边按钮的文本值	String	—	确定
popper-class	为 popper 添加类名	String	—	—
placement	出现位置	String	top/right/bottom/left 及各方向的修饰符(-start, -end)	bottom-start
show-icon	是否显示气泡框中的icon	Boolean	—	true
title	气泡框询问信息文本	String	—	—
trigger	打开气泡框的触发方式	String	hover/click	hover
visible-arrow	是否显示popover的箭头	Boolean	—	true
v-model/value	气泡状态（显示-true，隐藏-false）	Boolean	—	false

Slot

参数	说明	Version
reference	popconfirm触发dom

Popper Methods

事件名称	说明	回调参数	Version
updatePopper	更新popper（当相对定位元素发生位置或宽高变化时，需要更新popper的位置时调用）	—

Events

事件名称	说明	回调参数
confirm	确定时(点击右边按钮时)触发	—
cancel	确定时(点击左边按钮时)触发	—
document-click	气泡状态完全由value/v-model控制时有效(在value为true时绑定文档点击事件,为false时解绑)	—

贡献者

类型	参与者
设计者	UED视觉组
维护者	UED前端组

# Popconfirm 气泡确认框

# 代码演示

基础用法

查看代码 < />

自定义图标

查看代码 < />

状态完全控制

查看代码 < />

# API

# Attributes

# Slot

# Popper Methods

# Events

# 贡献者

Popconfirm 气泡确认框

代码演示

API

Attributes

Slot

Popper Methods

Events

贡献者