vue之弹框

已于 2023-06-28 08:13:27 修改
阅读量2.6k 收藏 4
点赞数
文章标签： vue.js javascript 前端
于 2023-06-27 16:53:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ramsey17/article/details/131419974
版权

实现如下需求，点击新增或者行中的编辑按钮，弹出弹框编辑数据。

列表中的操作栏：通过slot-scope="scope"来接收作用域插槽的数据（添加属性slot-scope，并且定义对象scope），scope.row拿到对应行的数据；

<el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="editRolesB(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="delRolesB(scope.row)"
            ></el-button>
          </template>
        </el-table-column>

弹框的“新增/修改角色”标题根据states的值来控制，编辑时，“人员名称”处于禁用状态；由于弹框的参数（只有id）满足不了（少于）请求接口的参数（id和name），通过@change="pickDepartment2"事件来操作数据；

<el-dialog
        :title="states ? '新增角色' : '修改角色'"
        :visible.sync="dialogFormVisible"
        v-if="dialogFormVisible"
        width="600px"
      >
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item
            label="部门名称"
            :label-width="formLabelWidth"
            prop="dpt_name"
          >
            <el-select
              @change="pickDepartment2"
              v-model="form.dpt_name"
              placeholder="请选择部门"
            >
              <el-option
                v-for="item in options[0]"
                :key="item.id"
                :label="item.name"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="人员名称"
            :label-width="formLabelWidth"
            prop="tester_name"
          >
            <el-select
              @change="pickPerson2"
              v-model="form.tester_name"
              placeholder="请选择人员"
              :disabled="!states"
            >
              <el-option
                v-for="item in options[1]"
                :key="item.id"
                :label="item.name"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="人员角色"
            :label-width="formLabelWidth"
            prop="tester_role"
          >
            <el-select
              @change="pickRoles2"
              v-model="form.tester_role"
              placeholder="请选择角色"
            >
              <el-option
                v-for="item in options[2]"
                :key="item.id"
                :label="item.name"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="备注"
            :label-width="formLabelWidth"
            prop="desc_msg"
          >
            <el-col :span="18">
              <el-input v-model="form.desc_msg" autocomplete="off"></el-input>
            </el-col>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="sureDia('form')">提 交</el-button>
          <el-button @click="cancelDia('form')">取 消</el-button>
        </div>
      </el-dialog>

methods：接口的字段定义不规范，id对应多个XXX_id，作了个兼容😔


    pickDepartment2(val) {
      this.form.dpt_name = val.name;
      //兼容不同接口定义的部门id
      this.form.department_id = val.id;
      this.form.dpt_id = val.id;
    },
    pickPerson2(val) {
      this.form.tester_name = val.name;
      //兼容不同接口定义的部门id
      this.form.id = val.id;
      this.form.person_id = val.id;
    },
    pickRoles2(val) {
      this.form.tester_role = val.name;
      //兼容不同接口定义的角色id
      this.form.person_role_id = val.id;
      this.form.tester_role_id = val.id;
    },

 确定/取消/编辑/取消按钮的方法：

    sureDia(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (this.states) {
            //新增角色入口
            auth
              .createRoles({
                department_id: this.form.dpt_id || "",
                person_name: this.form.tester_name || "",
                person_id: this.form.person_id || "",
                person_role_id: this.form.tester_role_id || "",
                desc_msg: this.form.desc_msg || "",
              })
              .then((res) => {
                if (res.code === 200) {
                  this.rolesDepartmentPersonShow();
                  this.dialogFormVisible = false;
                  this.$refs[form].resetFields();
                  this.$message({ message: "新增角色成功", type: "success" });
                } else if (res.code === 605) {
                  this.dialogFormVisible = true;
                  this.$message({ message: "重复操作", type: "warning" });
                } else if (res.code === 705) {
                  this.dialogFormVisible = true;
                  this.$message({ message: "值不存在", type: "warning" });
                } else {
                  this.dialogFormVisible = true;
                  this.$message({ message: "值无效", type: "warning" });
                }
              });
          } else {
            //编辑角色入口
            auth
              .updateRoles({
                department_id: this.form.dpt_id || "",
                person_name: this.form.tester_name || "",
                person_id: this.form.id || "",
                person_role_id: this.form.tester_role_id || "",
                desc_msg: this.form.desc_msg || "",
              })
              .then((res) => {
                if (res.code === 200) {
                  this.rolesDepartmentPersonShow();
                  this.dialogFormVisible = false;
                  this.$refs[form].resetFields();
                  this.$message({ message: "修改角色成功", type: "success" });
                } else if (res.code === 605) {
                  this.dialogFormVisible = true;
                  this.$message({ message: "重复操作", type: "warning" });
                } else if (res.code === 705) {
                  this.dialogFormVisible = true;
                  this.$message({ message: "值不存在", type: "warning" });
                } else {
                  this.dialogFormVisible = true;
                  this.$message({ message: "值无效", type: "warning" });
                }
              });
          }
        }
      });
    },

    cancelDia(form) {
      this.$refs[form].resetFields();
      this.dialogFormVisible = false;
    },

    editRolesB(rows) {
      this.states = false;
      this.form = { ...rows };
      this.dialogFormVisible = true;
    },

    delRolesB(rows) {
      this.$confirm("你确定删除该条数据吗？", "提示", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          auth.delRoles({ person_id: rows.id }).then((res) => {
            if (res.code === 200) {
              this.rolesDepartmentPersonShow();
              this.$message({ message: "删除成功", type: "success" });
            }
          });
        })
        .catch(() => {
          this.$message({ message: "取消删除", type: "info" });
        });
    },

默认情况下，当用户触发取消（点击取消按钮）和触发关闭（点击关闭按钮或遮罩层、按下 ESC 键）时，Promise 的 reject 回调和callback回调的参数均为 ‘cancel’（普通弹出框中的点击取消时的回调参数）。如果将distinguishCancelAndClose属性设置为 true，则上述两种行为的参数分别为 ‘cancel’ 和 ‘close’。（注意：如果没有设置distinguishCancelAndClose为true，则都默认为取消），这样就可以在catch中拿到回调参数action进行判断做什么操作了。这里没有做取消和关闭判断，都视为取消操作。
 

省略其它代码......

ramsey17
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue - 详细完美解决 ElementUI MessageBox “多次“ 弹框问题，让其无论执行多少次都只弹出来一次（常见于请求拦截器多次触发弹框，导致弹出来很多个）详细示例代码，保证完美解决！
王佳斌
05-09 5865
vue 如何防止 ElementUI MessageBox多次弹框，vue element弹框弹出来很多次怎么办，element vue MessageBox 解决执行多次后出现多次弹框的问题，elementUI如何阻止MessageBox多次弹出来，vue+element 解决多个请求同时报错,弹出多个消息框message，饿了么组件库MessageBox 弹框频繁弹出解决方法，vue调用MessageBox出现多次弹框，vue element MessageBox 怎么只弹出一次，vue之axios请求
前端Vue自定义弹框、自定义弹框内容 alertView showModel popup 组件
chenchuang0128的博客
07-19 1987
随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。今天给大家介绍的一款组件:快速实现前端Vue自定义弹框、自定义设置弹框内容alertView popup组件， 附完整源码下载地址：https://ext.dcloud.net.cn/plugin?id=12491。
VUE弹框组件（dialog组件）封装（基础功能、可传富文本）
qq_45447899的博客
02-22 891
【代码】VUE弹框组件（dialog组件）封装（基础功能、可传富文本）
基于Vue的前端自定义询问弹框与输入弹框组件的设计与实践
最新发布
chenchuang0128的博客
05-26 466
基于Vue的前端自定义询问弹框与输入弹框组件的设计与实践摘要随着技术的不断进步，前端开发面临越来越多的挑战，其中之一就是如何有效管理复杂的业务逻辑和用户体验。传统的整块应用开发方式在面对频繁的功能变更和用户体验优化时，往往显得捉襟见肘。为了解决这个问题，组件化开发成为了前端领域的重要趋势。本文介绍了一款基于Vue的前端自定义询问弹框和输入弹框组件，通过组件化开发的思想，实现了功能的独立开发和灵活组合，从而提高了开发效率和可维护性。一、引言。
vue实现按钮弹框【弹出图片、视频、表格、表单等】
热门推荐
在写作的路上持续输出。
04-14 1万+
vue实现弹框【弹视频、图片、表单、表格等】总之，你想弹啥就弹啥。一💫
vue点击按钮显示弹窗写法
m0_49714202的博客
05-16 1万+
源码如下 <template> <div class="box"> <div> <div class="mask" v-if="showModal" @click="showModal=false"></div> <div class="pop" v-if="showModal"> <!-- 关闭 --> 内容区域 </.
Vue 可自定义弹框组件实现
PorkCanteen的博客
12-21 2914
组件特点 1. 可自定义弹框内容、大小、按钮类型、主题颜色、过渡效果等 2. 可通过插槽自定义弹框主体内容
Vue组件——弹框组件案例
沐小侠
04-22 2905
页面效果 实现代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>组件-弹框</title> <style> * { margin: 0; padding: 0; } .dialog { position: fixed; top: 0; left: 0; widt
vue移动端弹框组件的实例
10-17
本文将深入讲解一个基于 Vue 的移动端弹框组件——vue-layer-mobile，帮助开发者更好地理解和使用这个组件。 vue-layer-mobile 是一个模仿 layer-mobile 的 Vue 组件，提供了丰富的弹框样式和功能，简化了移动端...
vue多种弹框的弹出形式的示例代码
12-08
products.vue引入dlAddProd弹框（dlAddProd.vue），由于”visible”>，所以在products页面加载时，dlAddProd会被加载。但是el-dialog中的body部分不会被加载（不管有没有加v-if指令）；dlAddProd弹框中又引入了...
vue 弹框实现移动效果
04-25
Vue 弹框实现移动效果 vue 弹框实现移动效果是指在 vue 项目中实现弹框的移动效果，使其可以被拖动和悬浮。下面将对实现这种效果的知识点进行详细的解释。 1. 自定义指令 在 vue 中，可以使用自定义指令来实现...
vue 弹框产生的滚动穿透问题的解决
01-21
程序员不能被业务绑架，有时间还是花点在代码，开始这次的vue尝试吧。 首先定义一个全局样式： .noscroll{ position: fixed; left: 0; top: 0; width: 100%; } 创建一个dom.js文件，定义几个方法： export ...
vue教程之toast弹框全局调用示例详解
08-29
Vue 教程之 Toast 弹框全局调用示例详解 本文主要讲解了 Vue 教程之 Toast 弹框全局调用示例的实现方法，旨在帮助读者更好地理解 Vue 框架在弹框全局调用示例中的应用。 标题解释 标题 "Vue 教程之 Toast 弹框...
Vue项目实战之一----实现分类弹框效果
sccd2009的专栏
11-25 710
Vue项目实战之一----实现分类弹框效果
vue实现弹出框内嵌页面展示，添加tab切换展示实时加载
码码码码码码农的博客
03-29 4432
vue实现弹出框内嵌页面展示，添加tab切换展示实时加载
VUEJS项目实践五之Dialog弹出框MessageBox（超好看的bootstrap样式）
Yolanda_NuoNuo的专栏
03-16 4738
这次需要写一个弹出层dialog，有确认和取消按钮的那种。 先看下弹出层的效果吧～ 其实我是写成深黑透明底的，可能因为我在mac本上截的图，跟我在 windows里做出的效果不太一样，不过也是好看的。 一、src/components/messagebox下新建messagebox.js import messageBoxVue from './messageBox.vue' // 定义插件...
VueDialog弹窗诟病轻松解决
梅花寺
01-18 1316
本质其实本次分享页并没有很多新意,这种引用式的封装,很多人也早都想到了,只不过感觉针对弹窗这块的封装,很多走了极端，要么就追求layer那种写法兼容习惯,要么干脆还是保留原样,只做一些特殊处理，属性还是原样保留了。至于回调,我之前虽然用过一段,但还是觉得不慎习惯，因为偶然有个共享弹窗存在确认后逻辑不同的问题给我造成了困扰,觉得写法有点儿变态,因此做了一些尝试和延展,觉得算是比较良性的一个调用方式吧。
vue：vant实现弹框
qq_36413371的博客
10-31 6497
单个弹出层及picker选择器（实现） // 只要通过一种行为（点击页面的某个按钮）来showPicker=true，让弹框显示出来 。功能：选择性别,学历等都会用到 <template > <div class="vantdemon"> <!-- 单级别选择框：选择性别。学历 --> <div @click="clickFn()......
vue全局弹框js控制
09-09
### 回答1： 要在Vue应用程序中实现全局弹框的控制，你可以使用Vue.js提供的全局事件总线（Event Bus）机制。 以下是一个简单的实现： 1.在Vue实例中创建一个事件总线： ``` // main.js import Vue from 'vue' export const EventBus = new Vue() ``` 2.在需要弹出框的组件中，通过事件总线触发一个事件： ``` // MyComponent.vue import { EventBus } from '@/main' methods: { showModal () { EventBus.$emit('show-modal') } } ``` 3.在包含弹出框的组件中，监听事件并控制弹出框的显示与隐藏： ``` // ModalComponent.vue import { EventBus } from '@/main' data () { return { showModal: false } }, created () { EventBus.$on('show-modal', () => { this.showModal = true }) }, methods: { closeModal () { this.showModal = false } } ``` 通过这种方式，你可以在任何组件中触发事件并控制全局弹出框的显示与隐藏。当然，你也可以通过传递参数来实现更复杂的逻辑。 ### 回答2： Vue全局弹框JS控制主要包括以下几个步骤： 第一步，导入Vue和第三方弹框插件，可以使用import语句导入。 第二步，创建一个Vue实例，用于管理全局弹框相关的数据和方法。 第三步，定义全局弹框的属性和方法，如弹框的显示状态、标题、内容、确认按钮、取消按钮等。 第四步，将全局弹框挂载到Vue实例上，并使用Vue的插件机制将该实例注册为全局组件。 第五步，使用组件的方式来调用全局弹框，可以直接在Vue实例中使用该组件，或者通过事件触发、计算属性、方法等方式来控制弹框的显示和隐藏。 第六步，根据实际需求，可以在全局弹框中添加一些自定义配置项，如弹框的宽度、高度、位置等。 第七步，封装全局弹框的方法，使其支持链式调用，方便在代码中使用。 第八步，对全局弹框的样式进行自定义，可以通过CSS样式文件或者内联样式灵活地修改弹框的样式。 总而言之，通过上述步骤，我们可以在Vue中实现全局弹框的JS控制，方便在整个项目中管理和调用弹框组件，提高开发效率和代码复用性。 ### 回答3： Vue全局弹框JS控制是通过Vue.js的全局对象$emit和$on来实现的。为了实现统一的弹框控制，可以借助Vue的事件总线机制。 首先，在main.js中创建一个Vue实例，作为事件总线： ``` import Vue from 'vue' export const EventBus = new Vue() Vue.prototype.$bus = EventBus ``` 然后，在需要弹框的组件中，可以通过以下方式触发一个全局事件： ``` this.$bus.$emit('show-dialog', dialogData) ``` 其中，'show-dialog'是自定义的事件名称，dialogData是传递给弹框的数据。 接着，在根组件或全局组件中监听该事件，并根据需求进行处理。可以通过以下方式在组件中监听事件： ``` this.$bus.$on('show-dialog', (dialogData) => { // 处理弹框逻辑，比如弹出一个全局弹框组件，并将dialogData传递给它 }) ``` 在监听到事件后，在组件中进行相应的处理，比如将dialogData传递给全局弹框组件，并弹出。 通过以上步骤，就可以实现Vue全局弹框的控制了。无论在哪个组件中需要弹框，只需要触发全局事件，然后在根组件或全局组件中进行监听和处理，实现了弹框的统一控制。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值