在使用switch开关使用Popconfirm气泡确认框二次确认

<template>
  <div>
    <a-popconfirm
      title="选择否将清除数据?"
      :visible="visible"
      ok-text="是"
      cancel-text="否"
      @visibleChange="handleVisibleChange"
      @confirm="confirm"
      @cancel="cancel"
    >
      <a-switch :checked="iscolse">
        <a-icon slot="checkedChildren" type="check" />
        <a-icon slot="unCheckedChildren" type="close" />
      </a-switch>
    </a-popconfirm>
    <br />
    <div v-if="iscolse">
      这里是通过开关控制显示与隐藏的
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      visible: false,
      iscolse: false
    }
  },
  created () {
    // 请求判断条件
    this.iscolse = true
  },
  methods: {
    // 确认
    confirm () {
      this.visible = false
      this.iscolse = false
    },
    // 取消
    cancel () {
      this.visible = false
    },
    // 	显示隐藏的回调
    handleVisibleChange (visible) {
      if (!visible) {
        this.visible = false
        return
      }
      if (this.iscolse) {
        this.visible = true
      } else {
        this.iscolse = true
        console.log('isclose', this.iscolse)
      }
    }
  }
}
</script>

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐