Vue框架在项目开发中如何实现组件的复用？

本文共计777个文字，预计阅读时间需要4分钟。

目录 + Element插件this.$confirm用法 + 场景：弹出框的两个按钮都能分别请求接口 + Vue项目如何使用this.$confirm + Element插件this.$confirm用法 + 场景：弹出框的两个按钮都能分别请求接口 + 最简单的弹出框

目录

• element插件this.$confirm用法
• 场景：弹出框的两个按钮都能分别请求接口
• vue项目如何使用this.$confirm

element插件this.$confirm用法

场景：弹出框的两个按钮都能分别请求接口

最简单的弹出框就是“确定”“取消”，一般用户点击确定才会继续接下来的动作，点击取消则不做任何动作（即不会请求接口）。

如：

<template>   <el-button type="text" @click="open">点击打开 Message Box</el-button> </template> <script>   export default {     methods: {       open() {         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {           confirmButtonText: '确定',           cancelButtonText: '取消',           type: 'warning'         }).then(() => {           this.$message({             type: 'success',             message: '删除成功!'           });         }).catch(() => {           this.$message({             type: 'info',             message: '已取消删除'           });                   });       }     }   } </script>

两个按钮都请求，则：

//任务下线  offline(data){      this.$confirm('是否开启保存点？', {          distinguishCancelAndClose: true,          confirmButtonText: '是',          cancelButtonText: '否', //相当于 取消按钮          type: 'warning'      }).then(() => {          api.taskOffline({taskId: data.taskId, isSavepoint: '1'}).then(res => {              if (res.data.code === "100") {                  this.$message({type: 'success', message: '下线成功!'})                  this.getTableData()              } else {                  this.$message({type: 'error', message: res.data.msg})                  this.getTableData()              }          })      }).catch(action => {      //判断是 cancel (自定义的取消) 还是 close （关闭弹窗）          if (action === 'cancel'){              api.taskOffline({taskId: data.taskId, isSavepoint: '0'}).then(res => {                  if (res.data.code === "100") {                      this.$message({type: 'success', message: '下线成功!'})                      this.getTableData()                  } else {                      this.$message({type: 'error', message: res.data.msg})                      this.getTableData()                  }              })          }      })

默认情况下，当用户触发取消（点击取消按钮）和触发关闭（点击关闭按钮或遮罩层、按下 ESC 键）时，Promise 的 reject 回调和callback回调的参数均为 ‘cancel’（普通弹出框中的点击取消时的回调参数）。

如果将distinguishCancelAndClose属性设置为 true，则上述两种行为的参数分别为 ‘cancel’ 和 ‘close’。（注意：如果没有设置distinguishCancelAndClose为true，则都默认为取消）

这样就可以在catch中拿到回调参数action进行判断做什么操作了

vue项目如何使用this.$confirm

首先在element-ui中的el-table下的el-table-column中引入插槽（相当于占位符）

 <template slot-scope="scope">             <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"               >编辑</el-button             >             <el-button               size="mini"               type="danger"               @click="handleDelete(scope.$index, scope.row)"               >删除</el-button             >           </template>

 handleDelete(index, item) {       this.$confirm("你确定要删除吗，请三思,后果自负", {         confirmButtonText: "确定",         cancelButtonText: "取消",         type: "warning",       })         .then(() => {           console.log("确定了，要删除");         })         .catch(() => {           console.log("放弃了");         });     },

此时，需要在main.js中注册组件

import {MessageBox} from 'element-ui'; // Vue.use(MessageBox);//与其他引用不同的是，这里“不能”加Vue.use(MessageBox),不然会出现问题，达不到想要的效果 Vue.prototype.$confirm = MessageBox.confirm;

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。