vue：自定义组件（messageTips）挂载原型上(三)

vue：自定义组件（messageTips）挂载原型上(三)

此版本为对二版本优化
messageTipsCallBack.vue

<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :width="width"
    :center="center"
    :close-on-click-modal="false"
    :before-close="handleClose"
    append-to-body
  >
    <div class="message" v-if="!Array.isArray(message)">{{ message }}</div>
    <ol v-else-if="Array.isArray(message) && type != 'table'" class="messageList">
      <li v-for="(v, i) in message" :key="i">
        <span>{{ v.projectName }}</span
        >{{ v.errorMsg }}
      </li>
    </ol>
    <el-table border v-else-if="Array.isArray(message) && type == 'table'" :data="message" style="width: 100%">
      <el-table-column align="center" prop="projectName" label="项目名称"></el-table-column>
      <el-table-column align="center" prop="errorMsg" label="有误字段">
        <template slot-scope="scope">
          <div v-html="scope.row.errorMsg"></div>
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button v-if="showConfirm" type="primary" size="small" @click="confirm">{{ confirmTxt }}</el-button>
      <el-button v-if="showCancel" @click="close">{{ closeTxt }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  },
  props: {
    width: {
      //  宽度
      type: String,
      default: '25%'
    },
    title: {
      // 标题
      type: String,
      default: '温馨提示'
    },
    showCancel: {
      // 是否显示取消按钮
      type: Boolean,
      default: false
    },
    showConfirm: {
      // 是否显示确认按钮
      type: Boolean,
      default: true
    },
    center: {
      //header、footer是否居中对齐
      type: Boolean,
      default: true
    },
    message: '',
    confirmTxt: {
      // 确定按钮文字
      type: String,
      default: '确定'
    },
    closeTxt: {
      // 关闭按钮文字
      type: String,
      default: '取消'
    },
    type: {
      // dom展示类型  table表格形式
      type: String,
      default: ''
    }
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
    },
    confirm() {
      this.$emit('confirm')
      // this.dialogVisible=false;
    },
    close() {
      this.$emit('close')
      // this.dialogVisible=false;
    }
  }
}
</script>
<style lang="scss" scoped>
ul li {
  list-style: none;
}
// /deep/ .el-dialog__header{
//   text-align: center;
// }
/deep/ .el-dialog__body {
  padding: 20px 15px;
}
/deep/ .el-dialog__footer {
  text-align: center;
}
.message {
  text-align: center;
}
.messageList,
.message {
  min-height: 40px;
}
.messageList li {
  line-height: 30px;
}
.messageList span {
  color: #c70019;
}
/deep/ .el-button--small,
/deep/ .el-button--mini {
  padding: 5px 8px;
}
/deep/ .el-button--primary,
/deep/ .el-button--danger {
  padding: 5px 8px;
  height: 30px;
  background: linear-gradient(180deg, #f79999 0%, #c70019 60%);
  border-radius: 6px;
  border: 1px solid #c70019;
  color: #fff;
  font-size: 14px;
  &:hover {
    color: #ffe300;
    background: linear-gradient(180deg, #f79999 0%, #c70019 60%);
    border: 1px solid #c70019;
  }
  &:focus {
    color: #fff;
    background: linear-gradient(180deg, #c50018 0%, #960000 60%);
    border: 1px solid #c8001a;
  }
  &.is-disabled {
    background: linear-gradient(180deg, #dfdfdf 0%, #ffffff 100%) !important;
    color: #333333 !important;
  }
}
/deep/ .el-button--default {
  padding: 0 10px;
  height: 30px;
  background: linear-gradient(180deg, #dddddd 0%, #ffffff 100%);
  border-radius: 6px;
  border: 1px solid #e5e5e5;
  color: #333333;
  font-size: 14px;
  &:hover {
    color: #c70019;
    border: 1px solid #e5e5e5;
  }
}

.el-button.is-disabled,
.el-button.is-disabled:hover,
.el-button.is-disabled:focus {
  color: #979797 !important;
  cursor: not-allowed;
  background-image: none;
  background: linear-gradient(180deg, #dddddd 0%, #ffffff 100%) !important;
  border: 1px solid #e5e5e5;
}
/deep/ .el-table__header th,
/deep/ .el-table thead.is-group th {
  background-color: #fff8f2 !important;
}
</style>

同级目录新建index.js
index.js

import Vue from 'vue';
import messageTips from '@/components/investCommon/messageTips/messageTipsCallBack.vue';
// 返回一个 扩展实例构造器
const DialogConstructor = Vue.extend(messageTips);

// 定义弹出组件的函数
function messageTipsFn(options = {}) {
  return new Promise((resolve, reject) => {
    let message = new DialogConstructor({
      el: document.createElement('div')
    });
    message.width = options.width || message.width;
    message.title = options.title || message.title;
    message.message = options.message || message.message;
    message.showCancel = options.showCancel || message.showCancel;
    if (options.showConfirm !== undefined) {
      message.showConfirm = options.showConfirm === false ? false : options.showConfirm || message.showConfirm;
    } else {
      message.showConfirm = true;
    }
    message.center = options.center || message.center;
    message.confirmTxt = options.confirmTxt || message.confirmTxt;
    message.closeTxt = options.closeTxt || message.closeTxt;
    message.type = options.type || message.type;
    // message._props =  {...message._props,...options}
    message.dialogVisible = true;
    document.body.appendChild(message.$el);
    message.confirm = function() {
      // 确定按钮
      resolve();
      message.dialogVisible = false;
    };
    message.close = function() {
      // 取消按钮
      reject();
      message.dialogVisible = false;
    };
  });
}

export default messageTipsFn;

main.js引用

import messageTips from '@/components/investCommon/messageTips/index.js';
Vue.prototype.$messageTips = messageTips;

组件使用方式

1、函数式使用

  this.$messageTips({ 
            message:'审核建议与反馈建议不一致，要继续提交吗？',
            showCancel:true,
        }).then(()=>{
          console.log("确认按钮回调")
        }).catch(()=>{
          console.log("取消按钮回调")
        })

2、引入dom的方式使用

   <message-tips
    :show="showDialog"
    showCancel
    message="确认要删除吗？"
    @confirm="deleteFn"
    />