前端vue2删除提示

雨点打透心脏的1/2处 2024-04-01 17:20 12阅读 0赞

有时候我们会有删除按钮，但是我们害怕误删除，所以再点击删除按钮后，我们会进行一个删除确认提示，当点击确认的时候，我们进行删除操作。效果图如下：

![0112cda7318346649bfbac157a45dcd0.jpeg][]

点击确认后我们才进行下一步操作，如果点击却取消，我们则不进行按钮操作。

前端代码如下：

async dataFormSubmit () {
          // 提示
          const isConfirm = await this.$confirm('是否确认提交?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          if (isConfirm !== 'confirm') {
            return
          }
          this.$refs.dataForm.validate((valid) => {
            if (valid) {
              // this.submitDisable = true
              this.$http({
                url: this.$http.adornUrl(`/good/type/${!this.dataForm.tid ? 'save' : 'update'}`),
                method: 'post',
                data: this.$http.adornData({
                  'tid': this.dataForm.tid,
                  'typeName': this.dataForm.typeName
                })
              }).then(({data}) => {
                if (data && data.code === 0) {
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                      this.dialogVisible = false
                      this.$emit('refreshDataList') // emit 回调父页面的方法
                    }
                  })
                }
              })
            }
          })
        },

[0112cda7318346649bfbac157a45dcd0.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/4cab4467404b4c039632e4382ba4c701.jpeg

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue2——前端笔记

Vue.js 是一个功能强大、易于学习和使用的前端框架，适用于构建各种规模的 Web 应用程序，并且在社区和生态系统方面拥有广泛的支持和资源。官网链接: https://...

冷不防/ 2024年05月06日 09:56/ 0 赞/ 28 阅读

相关前端vue2.0表格Table如何校验

我们知道表单form可以写rules进行校验，比如非空校验，那么表格table如何进行校验了，我们难道用form表单嵌套table来利用form的校验语法来校验吗? 其实不必

刺骨的言语ヽ痛彻心扉/ 2024年04月03日 10:31/ 0 赞/ 25 阅读

相关前端vue2删除提示

有时候我们会有删除按钮，但是我们害怕误删除，所以再点击删除按钮后，我们会进行一个删除确认提示，当点击确认的时候，我们进行删除操作。效果图如下： ![0112cda731834

雨点打透心脏的1/2处/ 2024年04月01日 17:20/ 0 赞/ 13 阅读

相关 [开发|前端] vue2 创建关联示例笔记

1. 创建 import Application from '@/active-resources/application'; import User fr

墨蓝/ 2024年03月16日 22:59/ 0 赞/ 7 阅读

相关前端(vue)提示框显示不全

问题效果如下： ![405e5327a8d642a2b8fc44459cc52e78.png][] 解决过程：最开始以为是提示被挡住了，于是查看了下元素（如下图操作），发现

你的名字/ 2024年03月16日 19:04/ 0 赞/ 47 阅读

相关微信小程序：删除时提示是否删除

代码如下： ![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png] wx.showModal({ ti

超、凢脫俗/ 2023年01月05日 12:46/ 0 赞/ 130 阅读

相关前端删除

//批量删除 deletedialogForm() { this.multipleSelectionForm.forEach(ite

青旅半醒/ 2022年12月28日 12:45/ 0 赞/ 8 阅读

相关 vue 删除数组

data(){ return{ seletImg:[], picName:[] } } if(this.select

蔚落/ 2022年11月25日 04:16/ 0 赞/ 93 阅读

相关 Vue 前端

目录什么是Vue 什么是渐进式框架？ Node.js 和npm是什么 HTML DOM 教程 Vue 教程 vue $ 作用： DIV是什么 Vue.

以你之姓@/ 2022年10月13日 12:46/ 0 赞/ 86 阅读

相关 Windows下提示无法删除文件

一、常规解决办法： 1，注消或重启电脑，然后再试着删除。 2，进入“安全模式删除”。 3，在纯DOS命令行下使用DEL，DELTREE和RD命令将其删除。

刺骨的言语ヽ痛彻心扉/ 2022年03月19日 03:48/ 0 赞/ 187 阅读