vue => Element Popconfirm气泡确认框 事件无法实现问题

  • Element的最新版本(20年5月更新版本)中,添加了新控件:Popconfirm 气泡确认框,感觉使用与操作交互很方便和人性化,就毅然决然地选择使用了,然后问题就不出意外地来了…先看官方展示图:

2.13版本我提交到了github源码 ,element社区合并到主分支了

在这里插入图片描述

在这里插入图片描述

  • 实现弹窗交互的事件,如图中的"确定"和"取消",否则这个控件就毫无用处

组件源码

<template>
  <el-popover
    v-bind="$attrs"
    v-model="visible"
    trigger="click"
  >
  <div class="el-popconfirm">
    <p class="el-popconfirm__main">
    <i
      v-if="!hideIcon"
      :class="icon"
      class="el-popconfirm__icon"
      :style="{color: iconColor}"
    ></i>
      {{title}}
    </p>
    <div class="el-popconfirm__action">
      <el-button 
        size="mini" 
        :type="cancelButtonType" 
        @click="cancel"
      >
        {{cancelButtonText}}
      </el-button>
      <el-button 
        size="mini" 
        :type="confirmButtonType" 
        @click="confirm"
      >
        {{confirmButtonText}}
      </el-button>
    </div>
  </div>
  <slot name="reference" slot="reference"></slot>
</el-popover>
</template>

<script>
import ElPopover from 'element-ui/packages/popover';
import ElButton from 'element-ui/packages/button';
import {t} from 'element-ui/src/locale';

export default {
  name: 'ElPopconfirm',
  props: {
    title: {
      type: String
    },
    confirmButtonText: {
      type: String,
      default: t('el.popconfirm.confirmButtonText')
    },
    cancelButtonText: {
      type: String,
      default: t('el.popconfirm.cancelButtonText')
    },
    confirmButtonType: {
      type: String,
      default: 'primary'
    },
    cancelButtonType: {
      type: String,
      default: 'text'
    },
    icon: {
      type: String,
      default: 'el-icon-question'
    },
    iconColor: {
      type: String,
      default: '#f90'
    },
    hideIcon: {
      type: Boolean,
      default: false
    }
  },
  components: {
    ElPopover,
    ElButton
  },
  data() {
    return {
      visible: false
    };
  },
  methods: {
    confirm() {
      this.visible = false;
      this.$emit('onConfirm');
    },
    cancel() {
      this.visible = false;
      this.$emit('onCancel');
    }
  }
};
</script>

可以发现,源码和文档不一样,

所以需要改成下面这个样子的事件名称才能去执行事件
 <el-popconfirm
              title="确定删除吗?"
              cancel-button-text="取消"
              confirm-button-text="确定"
              @onConfirm="rePushProduct(row.id)"
            >
              <el-button  slot="reference" type="danger" size="mini" plain>删除</el-button>
            </el-popconfirm>

2.15版本以及最新版本,又改回来了

在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue3 后台项目中使用 Arco Design Vue气泡Popconfirm,有以下几种使用方式: 1. 基本用法: ```vue <template> <div> <a-popconfirm title="确定要删除吗?" @confirm="handleDelete"> <a-button>Delete</a-button> </a-popconfirm> </div> </template> <script> import { defineComponent } from 'vue'; import { Popconfirm, Button } from '@arco-design/web-vue'; export default defineComponent({ components: { Popconfirm, Button }, methods: { handleDelete() { // 处理删除逻辑 }, }, }); </script> ``` 2. 自定义触发元素: ```vue <template> <div> <a-popconfirm title="确定要删除吗?" trigger-slot> <a-button slot="trigger">Delete</a-button> <template #content> <p>确定要删除吗?</p> <a-button type="primary" size="small" @click="handleDelete">确定</a-button> <a-button size="small">取消</a-button> </template> </a-popconfirm> </div> </template> <script> import { defineComponent } from 'vue'; import { Popconfirm, Button } from '@arco-design/web-vue'; export default defineComponent({ components: { Popconfirm, Button }, methods: { handleDelete() { // 处理删除逻辑 }, }, }); </script> ``` 3. 控制弹出框的显示和隐藏: ```vue <template> <div> <a-button @click="visible = true">Open</a-button> <a-popconfirm title="确定要删除吗?" v-model:visible="visible"> <template #content> <p>确定要删除吗?</p> <a-button type="primary" size="small" @click="handleDelete">确定</a-button> <a-button size="small" @click="visible = false">取消</a-button> </template> </a-popconfirm> </div> </template> <script> import { defineComponent, ref } from 'vue'; import { Popconfirm, Button } from '@arco-design/web-vue'; export default defineComponent({ components: { Popconfirm, Button }, setup() { const visible = ref(false); const handleDelete = () => { // 处理删除逻辑 visible.value = false; }; return { visible, handleDelete, }; }, }); </script> ``` 4. 自定义样式: 可以通过 `style` 和 `class` 属性来自定义气泡框和触发元素的样式。 以上就是在 Vue3 后台项目中使用 Arco Design Vue气泡Popconfirm 的几种使用方式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不停喝水

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值