modalError.vue 错误提示框 vue2 iview
需求
一个错误提示框,后台需要有换行,默认没有换行,做一个支持换行的全局错误提示函数。
注意
代码只展示原理,直接不能使用,里面有getAc,有需要参考 https://www.cnblogs.com/pengchenggang/p/17037428.html
预览
modalError代码
<template>
<div>
<Modal v-model="confirmZenVmodel"
:mask-closable="false"
width="700px"
footer-hide
:closable="false">
<div style="padding: 10px 40px 10px 20px;">
<Row>
<Col span="2"><i class="ivu-icon ivu-icon-ios-close-circle"
style="color: #ed4014; font-size:28px; float: right; margin-right: 10px;"></i></Col>
<Col span="22">
<div style="font-size: 18px; font-weight: bold; margin-top: 2px; margin-bottom: 10px;">错误信息</div>
<div v-html="text" style="min-height: 70px; max-height: 380px; overflow: auto; font-size: 12px;"></div>
</Col>
</Row>
<div>
<Button type="primary"
style="float: right; margin-top: 10px;"
@click="okBtnHandle">确定</Button>
</div>
<div style="clear: both;"></div>
</div>
</Modal>
</div>
</template>
<script>
export default {
name: 'ConfirmZen',
data () {
return {
text: 'defaultText',
confirmZenVmodel: false,
baseOption: {
text: 'defaultText',
}
}
},
methods: {
cancelBtnHandle () {
this.cancelBtnHandleInner()
},
cancelBtnHandleInner (ctx, next) {
this.confirmZenVmodel = false
},
okBtnHandle () {
this.okBtnHandleInner()
},
okBtnHandleInner (ctx, next) {
this.confirmZenVmodel = false
},
open (option) {
const opt = { ...this.baseOption, ...option }
console.info('ConfirmZen open methods', opt)
if (option.cancelBtnHandle) {
this.cancelBtnHandle = () => {
this.$getAc()
.use(option.cancelBtnHandle)
.use(this.cancelBtnHandleInner)
.run()
}
}
if (option.okBtnHandle) {
this.okBtnHandle = () => {
this.$getAc()
.use(option.okBtnHandle)
.use(this.okBtnHandleInner)
.run()
}
}
this.text = opt.text
this.confirmZenVmodel = true
}
}
}
</script>
<style scoped>
</style>
App.vue 绑定
<template>
<div id="app">
<router-view />
<modalError ref="modalErrorRef"></modalError>
</div>
</template>
<script>
import modalError from '@/components/modalError/modalError.vue'
import Vue from 'vue'
export default {
name: 'App',
components: {
modalError,
},
mounted () {
Vue.prototype.$modalError = this.$refs.modalErrorRef
},
</script>
代码使用
if (res.status === 43) {
this.$modalError.open({
text: JSON.parse(res.msg).join('<br><br>')
})
}
modalError.vue 错误提示框 vue2 iview的更多相关文章
- vue错误提示 Cannot read property 'beforeRouteEnter' of undefined,刷新后跳到首页
vue错误提示 Cannot read property 'beforeRouteEnter' of undefined,刷新后跳到首页 因为vue-router版本太高了,我vue用的是2.3.4, ...
- vue 自定义 提示框(Toast)组件
1.自定义 提示框 组件 src / components / Toast / index.js /** * 自定义 提示框( Toast )组件 */ var Toast = {}; var sho ...
- PLSQL登录失败出现空白错误提示框的问题
安装win7后其他软件运行正常,可是数据库用cmd plsplus和plsql软件都连不上,plsql报一个空白提示框 重装n遍oracle客户端,都不行. 最后发现解决方式很简单,在plsql的图标 ...
- ValidationSummary控件不弹出错误提示框
采用VS2013 编写的前台,运用ValidationSummary控件时,不出现错误弹窗,网上找到了解决方法 发现是ASP.NET 4.5对验证控件的影响(兼容性),使用ASP.NET 4.5的解决 ...
- 安装软件(名称不记得了)后,系统开机提示 visual studio just-in-time debugger窗口(WINDOWS错误提示框)
出现这种情况,往往是因为原先安装有VS,后来因某些原因(比如:卸载)导致VS无法使用!!当系统中的有些软件出现错误时,会自动调用vs进行调试,但因为VS无法使用,就出现了visual studio j ...
- Process启动.exe,当.exe内部抛出异常时,总会弹出一个错误提示框,阻止Process进入结束
public class TaskProcess { [DllImport("kernel32.dll", SetLastError = true)] public static ...
- webstorm去掉vue错误提示
- WPF 设置WebBrowser控件不弹脚本错误提示框
using System.Reflection; using System.Windows; using System.Windows.Controls; using System.Windows.N ...
- Jquery 错误提示插件
这是一个简单的输入框错误提示插件,可拓展! .jq-error{ font-size:12px; min-width:150px; width:auto; max-width:350px; line- ...
- Java的awt包的使用实例和Java的一些提示框
一.awt的一些组件 Label l1=new Label("姓名:"); //标签 Label l2=new Label("密码:"); TextField ...
随机推荐
- 创建Vue项目,报错spawn yarn ENOENT
1. 使用 vue 创建项目的时候,报错 Error: spawn yarn ENOENT 1.1 用户自己设置了默认的包管理 yarn 1.2 没有安装 yarn 解决方式1: 打开 C盘 , 在 ...
- ESXi6.5导入虚拟机提示缺少所需的磁盘镜像
环境 esxi6.7 错误提示 解决方案 原因:这是因为导出虚拟机的时候,没有把"CD/DVD驱动器"删掉,在导入的时候,找不到这个磁盘映像. 编辑.ovf文件,找到ovf:hre ...
- 生活小技巧:Excel中PMT函数的使用
关于PMT函数,从百科中就可以搜到基本解释: PMT函数即年金函数,基于固定利率及等额分期付款方式,返回贷款的每期付款额. PMT(Rate, Nper, Pv, Fv, Type). 语法参数 ●R ...
- .NET 云原生架构师训练营(模块二 基础巩固 EF Core 关系)--学习笔记
2.4.4 EF Core -- 关系 一对多 一对一 多对多 示例 关系:https://docs.microsoft.com/zh-cn/ef/core/modeling/relationship ...
- Linux-expect(以交互形式输入命令,实现交互通信)
1.expect简介 expect是一种脚本语言,它能够代替人工实现与终端的交互,主要应用于执行命令和程序时,系统以交互形式要求输入指定字符串,实现交互通信. 安装命令: yum install ex ...
- angularjs国际化多语言,angular-translate教程详解,$translate.instant()为什么不生效
壹 ❀ 引 最近项目要求支持国际化多语言,由于项目用的还是angularjs,那么首当其冲的选择了angularjs封装的I18N插件angular-translate,本文主要会从三个方向展开讨论, ...
- CentOS 7.3 源码安装squid 4.12 及安装过程遇到的一些问题
一.源码安装squid 4.12 1.下载squid-4.12源码包 wget http://www.squid-cache.org/Versions/v4/squid-4.12.tar.gz tar ...
- Sentinel 源码学习
引入依赖 <dependency> <groupId>com.alibaba.csp</groupId> <artifactId>sentinel-co ...
- 老王电子的拆机 ESP32-SOLO-1 填坑报告
ESP32-SOLO-1 拆装 都是带板的, 长这个样子 需要用热风枪从背面吹, 因为中间有焊点, esp32朝下, 用280度大概2到3分钟, 四周需要均匀着风, 用镊子试探天线部分是否松动, 将外 ...
- STM32F401+nRF24L01无线传输音频(对讲机原型)
尝试结合STM32F401的ADC, PWM, SPI(NRF24L01)和TIM, 试验了一下音频的无线传输(对讲机原型) 工作机制 音频采样 因为硬件的限制, 包括STM32F401片内存储, 内 ...