一个错误提示框,后台需要有换行,默认没有换行,做一个支持换行的全局错误提示函数。

代码只展示原理,直接不能使用,里面有getAc,有需要参考 https://www.cnblogs.com/pengchenggang/p/17037428.html

modalError代码

<template>
    <Modal v-model="confirmZenVmodel"
           :mask-closable="false"
           width="700px"
           footer-hide
           :closable="false">
      <div style="padding: 10px 40px 10px 20px;">
          <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>
          <Button type="primary"
                  style="float: right; margin-top: 10px;"
                  @click="okBtnHandle">确定</Button>
        <div style="clear: both;"></div>
    </Modal>
</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>
</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>')
    ---------------------------------------------
生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!

https://pengchenggang.gitee.io/navigator/

SMART原则:

目标必须是具体的(Specific)
目标必须是可以衡量的(Measurable)
目标必须是可以达到的(Attainable)
目标必须和其他目标具有相关性(Relevant)
目标必须具有明确的截止期限(Time-based)