vue 指令调用组件

1、selectRecipeDate.vue

<template>
  <div>
    <zs-dialog zIndex="101" v-model="show" :title="$t('请选择处方提交时间')">
      <div style="width:7rem;padding-top:.5rem;">
        <div style="    text-align: center;">
          <el-date-picker
            v-model="value1"
            :editable="false"
            :clearable="false"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
          <el-time-picker
            :editable="false"
            :clearable="false"
            v-model="value2"
            :picker-options="{
            selectableRange: '00:00:00 - 23:59:59'
          }"
            placeholder="任意时间点"
          ></el-time-picker>
        </div>
        <div style="text-align: center;padding: .25rem;">
          <button class="zs-btn mini" @click="sure" :disabled="!value1 || !value2">{{$t('确定')}}</button>
        </div>
      </div>
    </zs-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      value1: Date.now(),
      value2: Date.now()
    };
  },
  methods: {
    open() {
      this.show = true;
    },
    exit(v) {
      this.show = false;
      this.$emit("close", v);
    },
    sure() {
      let val =
        this.$dateFormat(this.value1, "YYYY-MM-DD") +
        this.$dateFormat(this.value2, " HH:mm:ss");
      val = new Date(val) / 1000;
      this.exit(val);
    }
  },
  watch: {
    show(v) {
      if (!v) this.exit(null);
    }
  }
};
</script>
<style lang="less" scoped>
.dynamic {
  width: 4rem;
  margin: 0 auto;
}
</style>

2、gui.js

import Vue from "vue";
export default (model) => {
  return (options) => {
    let vm = new (Vue.extend({
      ...model,
      store: require("../store").default //状态
    }))
    vm.$mount();
    document.body.appendChild(vm.$el);
    vm.$on('close', () => {
      vm.$el.parentNode.removeChild(vm.$el);
      vm.$destroy();
    })
    // vm.$emit('open',options); 
    return vm;
  }
}

//提交处方选择提交时间
import gui from "@/libs/gui";
  var selectRecipeDate = gui(require("@/components/selectRecipeDate"));
  Vue.prototype.$selectRecipeDate = () => {
    return new Promise((resolve, reject) => {
      var vm = selectRecipeDate();    
      vm.open();
      vm.$on("close", e => {
        if (e == null) return reject();
        resolve(e);
      });
    });
  };