基于element UI自定义dialog框

71 阅读1分钟

可自定义内容,并且可以根据是否填写内容判断是否需要关闭dialog弹窗,并且支持一键粘贴图片,获取图片url地址,主要用于自定义弹窗确认按钮,可以给确认弹窗进行补充信息调整。

import Vue from "vue";
import uploadImage from "./components/uploadImage.vue";

function show(options = {}) {
  let { title, content, type, required } = options;
  title = title || "提示";
  required = required || false;

  let temVm = new Vue({
    data() {
      return {
        uploadImageShow: true,
        uploadImageKey: new Date().getTime(),
        tag15: "",
        itsmUrl: "",
        imagePath: "",
      };
    },
    components: { uploadImage },
    methods: {
      changeTag15(tag15) {
        this.tag15 = tag15;
      },
      changeImagePath(imagePath) {
        this.imagePath = imagePath;
      },
    },
  });

  // 应对打包报错(h  is not defined)
  const h = this.$createElement;

  return this.$msgbox({
    title: title,
    message: (
      <uploadImage
        key={temVM.uploadImageKey}
        ref="uploadImage"
        content={content}
        type={type}
        required={required}
        v-on:changeTag15={temVM.changeTag15}
        v-on:changeImagePath={temVM.changeImagePath}
      ></uploadImage>
    ),
    showConfirmButton: true,
    showCancelButton: true,
    closeOnClickModal: false,
    closeOnPressEscape: flase,
    beforeClose: (action, instance, done) => {
      if (action === "confirm") done()
      else done()
    }
  }).then(res => [
    const itsmUrl = temVM.tag15;
    return {itsmUrl}

  ])
}

Vue.use({
  install(Vue) {
    vue.prototype.$dialogUpload = show
  }
})