[组件封装]API式调用-封装一个审核意见的组件Comments

<template>
  <my-dialog class="audit-dialog-wrapper" :title="title" :visible="visible" size="small" width="450px" @closed="closed">
    <div class="tips">
      <svg t="1667908308048" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4068" width="200" height="200">
        <path d="M512 1024c-281.6 0-512-230.4-512-512s230.4-512 512-512 512 230.4 512 512-230.4 512-512 512z m0-938.666667c-234.666667 0-426.666667 192-426.666667 426.666667s192 426.666667 426.666667 426.666667 426.666667-192 426.666667-426.666667-192-426.666667-426.666667-426.666667z m0 725.333334c-25.6 0-42.666667-17.066667-42.666667-42.666667v-298.666667c0-25.6 17.066667-42.666667 42.666667-42.666666s42.666667 17.066667 42.666667 42.666666v298.666667c0 21.333333-17.066667 42.666667-42.666667 42.666667z m0-567.466667c25.6 0 46.933333 21.333333 46.933333 46.933333s-21.333333 46.933333-46.933333 46.933334-46.933333-21.333333-46.933333-46.933334 21.333333-46.933333 46.933333-46.933333z" p-id="4069" />
      </svg>
      <span> 请填写审核意见</span>
    </div>
    <el-input v-model="content" type="textarea" :autosize="{ minRows: 3, maxRows: 6 }" :rows="3" placeholder="请输入" />
    <span slot="footer" class="dialog-footer">
      <my-button type="close" title="取消" @click="closed" />
      <my-button type="submit" title="确认" @click="submit" />
    </span>
  </my-dialog>
</template>
<script>
export default {
  data() {
    return {
      content: '',
      visible: false,
      title: '审核意见'
    }
  },
  methods: {
    closed() {
      this.content = ''
      this.visible = false
    },
    submit() {}
  }
}
</script>

<style lang="scss" scoped>
.audit-dialog-wrapper {
  ::v-deep .el-dialog__body {
    padding-top: 0 !important;
    min-height:100px!important;
  }
}
.tips {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 10px 0;
  svg {
    height: 16px;
    width: 16px;
    display: inline-block;
    fill: #e6a23c;
  }
  span {
    color: #e6a23c;
    margin-left: 5px;
    letter-spacing: 1px;
  }
}
</style>

import Vue from 'vue'
import Comments from './index.vue'
const CommentsConstructor = Vue.extend(Comments)
const instance = new CommentsConstructor({
  el: document.createElement('div')
})
const comments = function(title, content = '') {
  return new Promise((resolve, reject) => {
    instance.visible = true
    instance.content = content
    instance.title = title || '审核意见'
    document.body.appendChild(instance.$el)
    instance.submit = function() {
      resolve(instance.content)
      instance.closed()
    }
    instance.closed = function() {
      instance.content = ''
      instance.visible = false
      reject()
    }
  })
}
export default comments

import comments from '@/components/Comments/index.js' // comments
Vue.prototype.$comments = comments

this.$comments("测试").then(res=>{
  //res为内容
})