526互联

modalError.vue 错误提示框 vue2 iview

发布时间 2023-06-21 16:06:11作者: 彭成刚

需求

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

注意

代码只展示原理，直接不能使用，里面有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>')
    })
}