combination-tall/src/components/Plugin/Plugin.vue

<template>
  <view v-if="pluginContent && pluginContent.html" style="height: 100%">
    <!-- <view> {{ pluginContent.html }} </view> -->
    <view v-if="item && item.name">
      <p-task-title :item="item" v-if="pluginId === '1'" />
      <p-task-description :item="item" v-if="pluginId === '2'" />
      <p-task-duration-delay :item="item" v-if="pluginId === '3'" />
      <p-task-start-time-delay :item="item" v-if="pluginId === '4'" />
      <p-deliverable :item="item" v-if="pluginId === '5'" />
      <p-subtasks :item="item" v-if="pluginId === '6'" />
      <p-subproject :item="item" v-if="pluginId === '7'" />
      <p-task-countdown :item="item" v-if="pluginId === '8'" />
    </view>
    <view v-html="pluginContent.html" style="height: 100%"> </view>
    <!-- <u-parse :html="pluginContent.html" ref="ht-box"></u-parse> -->
  </view>
</template>

<script>
export default {
  name: 'Plugin',
  props: {
    item: {
      default: () => {},
      type: Object,
    },
    pluginId: {
      default: '0',
      type: String,
    },
    styleType: {
      default: 0,
      type: Number,
    },
  },
  data() {
    return { pluginContent: null };
  },
  async mounted() {
    await this.getPlugin();
    console.log(this.pluginContent.js);
  },
  methods: {
    async getPlugin() {
      const { pluginId, styleType } = this;
      const res = await this.$u.api.getOtherPlugin({
        pluginId,
        styleType,
      });
      this.pluginContent = res;
    },
  },
};
</script>