vue中对element的弹框messagebox的二次封装

在vue中对确认框的二次封装

使用场景:在页面中做某些需要警告的操作时的弹框提示


1、在utils文件夹下新建一个confirm.js文件来对messageBox的封装,内容如下:

/** confirm.js */
import { MessageBox } from 'element-ui'

export function handleCofirm(text = '确定执行此操作吗?', type = 'warning') {
  return MessageBox.confirm(text, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: type,
    center: true
  })
}

2、使用

import { handleCofirm } from '@/utils/confirm'
export default {
    deleteDomain(row) {
      handleCofirm('确认删除该标签吗?', 'warning',).then(res => {
         //
      }).catch(err => {
        console.log('err', err) // cancel
        //
      })
    }

}

原文地址:https://www.cnblogs.com/llff123/p/11309144.html

时间: 2024-08-28 14:57:29

vue中对element的弹框messagebox的二次封装的相关文章

vue中点击空白处隐藏弹框(用指令优雅地实现)

在写vue的项目的时候,弹框经常性出现,并要求点击弹框外面,关闭弹框,那么如何实现呢?且听我一一...不了,能实现效果就好 <template> <div> <div class="show" v-show="show" v-clickoutside="handleClose"> 显示 </div> </div> </template> <script> cons

ios中的三种弹框

目前为止,已经知道3种IOS弹框: 1.系统弹框-底部弹框 UIActionSheet (1)用法:处理用户非常危险的操作,比如注销系统等 (2)举例: UIActionSheet *sheet = [[UIActionSheet alloc] initWithTitle:@"确定要注销?" delegate:self cancelButtonTitle:@"取消" destructiveButtonTitle:@"确定" otherButton

eclipse中 Perspective switch job 弹框问题

Perspective switch job has encountered a problem弹框问题描述: 在eclipse开发web项目时,设置断点了,当运行到断点处代码时会弹出Perspective switch job has encountered a problem框,然后eclipse直接卡死,去掉所有断点后再运行,eclipse恢复正常.点击eclipse中window-->open Perspective-->debug 时,无法切换到debug模式,eclipse也是卡死

layui table中固定表头,弹框缩放之后,表头对不齐问题

问题描述: 在弹框中的表格,表格设置height属性 如果表格数据太多,表头会固定,只有表内容会滚动 拖动弹框右下角缩放弹框时,表格的头部对不齐 正常显示如图: 缩放之后如图: 解决办法: layer有一个resizing属性,是弹框缩放结束的回调放方法 在回调之后重新根据数据列设置表头的宽度. resizing: function (layero) { var tableDom = layero.find('.layui-table-box'); var theadTable = tableD

vue中使用Element主题自定义肤色

一.搭建好项目的环境. 二.根据ElementUI官网的自定义主题(http://element.eleme.io/#/zh-CN/component/custom-theme)来安装[主题生成工具]. 三.在 element-variables.scss 文件里修改 $–color-primary:#409EFF,即你想要的主题颜色.然后,执行主题编译命令生成主题(et),根目录会生成一个theme文件夹. 四.封装动态换肤色ThemePicker.vue组件. <template> <

vue中使用element来创建目录列表

之前按照项目需求使用element中的tree来创建目录列表,如今记录一下. 一.项目需求 1.完整展示目录列表 2.右击节点选择重命名,删除,创建文件夹三个选项 3.拖拽文件夹,其中拖拽文件夹有以下要求: a. 如果该文件夹内已存在上传文件,则其他文件夹不能拖拽进入该文件夹内 b.整个目录中有且仅有一个根目录,拖拽文件夹的范围只能在该根目录里面 4.重命名文件夹要求: a.重命名完成后按enter键完成 5.删除文件夹要求: a.如果该文件夹内已含有上传文件,则删除失败 6.创建文件夹要求:

vue拖拽插件(弹框拖拽)

// =======拖拽 插件 cnpm install vuedraggableimport draggable from 'vuedraggable' <draggable v-model="tags" :move="getdata" @update="datadragEnd"> <transition-group> <div class="testdiv" v-for="eleme

vue中axios 配置请求拦截功能 及请求方式如何封装

main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' import axios from 'axios' Vue.prototype.$http = axios //http request 封装请求头拦截器 axios.interceptors.request.use(config => { // console.log("request&quo

Dynamics CRM2016 关闭错误报告弹框提示

在之前的版本中错误报告的弹框提示是可以在隐私首选项中设置关闭的,如下图所示 但是在2016中这个设置没了 有人说在右上角的选项中设置,但那个只能是设置个人的无法修改系统级别的.在系统中找了半天还是没有找到可以设置的地方,既然前台没有入口那只有打后台的主意了,打开组织数据库中的Organization表,将ReportScriptErrors字段的值修改为3(默认值是0)即为关闭.