vue中this.$confirm的使用及说明

 更新时间:2024年08月22日 09:52:05   作者:皮皮皮皮克斯  
这篇文章主要介绍了vue中this.$confirm的使用及说明方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue中this.$confirm

笔记整理:

之前项目中比较常见的confirm确认框写法,(与this.$router相似)

VUE+elementUI写法

  onStopClick(row: any) {
    **this.$confirm**('确定停用该条消息吗 ?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        this.requestSwitchStatus(row)
      })
      .catch(() => {})
  }

换成ant Design Vue时写法

handleDelete(record) {
  this.$confirm({
    title:'确认删除吗?',
    okText: '是',
    cancelText: '否',
    icon: 'exclamation-circle',
    confirm: this.handleClear()
  })
}

VUE+VUX 写法:(参考VUX文档~)

            this.$vux.confirm.show({
              title: 标题,
              content: content,
              onCancel() {
                let url = window.location.href
                if (url.indexOf('isApp') > -1) {
                  _this.goNV({type: ''})
                } else {
                  _this.$router.push('/home')
                }
              },
              onConfirm() {
                _this.crushEggRequest(param)
              }
            })```

vue项目中this.$confirm中,确定和取消执行不同的逻辑

效果图片


在这里插入图片描述

【确定】按钮执行逻辑A,【取消】按钮执行逻辑B。

[x]按钮关闭confirm,和取消按钮执行不同的逻辑

代码如下:

this.$confirm("是否确定删除选中的数据?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    distinguishCancelAndClose: true,    // 重要,设置为true才会把右上角X和取消区分开来
    closeOnClickModal: false
}).then(function () {
    // TODO 确认通过执行逻辑
 
}).catch(function (e) {
    if (e == 'cancel') {
        // TODO 确认不通过执行逻辑
         
    } else if(e == 'close') {
        // TODO 右上角X的执行逻辑
 
    }
})


总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3的watch用法以及和vue2中watch的区别

    vue3的watch用法以及和vue2中watch的区别

    这篇文章主要介绍了vue3的watch用法以及和vue2中watch的区别,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • electron中使用本地数据库的方法详解

    electron中使用本地数据库的方法详解

    众所周知,electron是可以开发桌面端的框架,那我们有一些数据不想让别人看到,只能在自己的电脑上展示时怎么办呢,这个时候就可以用到本地数据库,本文将以sqlite3为例介绍一下electron如何使用本地数据库
    2023-10-10
  • 前端vue3中的ref与reactive用法及区别总结

    前端vue3中的ref与reactive用法及区别总结

    这篇文章主要给大家介绍了关于前端vue3中的ref与reactive用法及区别的相关资料,关于ref及reactive的用法,还是要在开发中多多使用,遇到响应式失效问题,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-08-08
  • Vuex(多组件数据共享的Vue插件)搭建与使用

    Vuex(多组件数据共享的Vue插件)搭建与使用

    Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享,数据缓存等等,下面这篇文章主要给大家介绍了关于Vuex(多组件数据共享的Vue插件)搭建与使用的相关资料,需要的朋友可以参考下
    2022-10-10
  • 基于Vue3+Element Plus 实现多表单校验demo

    基于Vue3+Element Plus 实现多表单校验demo

    表单校验在日常的开发需求中是一种很常见的需求,通常在提交表单发起请求前校验用户输入是否符合规则,通常只需formRef.value.validate()即可校验,本文给大家介绍基于Vue3+Element Plus 实现多表单校验demo,感兴趣的朋友一起看看吧
    2024-06-06
  • 一款移动优先的Solid.js路由solid router stack使用详解

    一款移动优先的Solid.js路由solid router stack使用详解

    这篇文章主要为大家介绍了一款移动优先的Solid.js路由solid router stack使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • Vue双向数据绑定与响应式原理深入探究

    Vue双向数据绑定与响应式原理深入探究

    本节介绍双向数据绑定以及响应式的原理,回答了双向数据绑定和数据响应式是否相同,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-08-08
  • Vant如何自定义组件适配iphone底部安全区

    Vant如何自定义组件适配iphone底部安全区

    这篇文章主要介绍了Vant如何自定义组件适配iphone底部安全区问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue perfect-scrollbar(特定框架里使用非该框架定制库/插件)

    vue perfect-scrollbar(特定框架里使用非该框架定制库/插件)

    这篇文章主要为大家介绍了vue perfect-scrollbar在特定框架里使用一款并非为该框架定制的库/插件如何实现,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪<BR>
    2023-05-05
  • 在vue3中动态加载远程组件的流程步骤

    在vue3中动态加载远程组件的流程步骤

    在一些特殊的场景中(比如低代码、减少小程序包体积、类似于APP的热更新),我们需要从服务端动态加载.vue文件,然后将动态加载的远程vue组件渲染到我们的项目中,今天这篇文章我将带你学会,在vue3中如何去动态加载远程组件,感兴趣的小伙伴跟着小编一起来看看吧
    2024-08-08

最新评论