vue directive 中如何渲染component

Question

最近有一个思路，点击图片的时候放大预览，实现 <img src='xxx.png' v-preview/> 点击自动发大预览，有没有办法在 directive 中直接添加一个 component 到 body 中。

Answer 1

可以的核心是利用指令的规则 在具体实现里面动态mount 一个vue 组件,以vue2.x 为例

dirv.vue

import pop from './pop.vue'
import Vue from "vue";

function showDiv(src) {
//继承一个组件
 const popup= Vue.extend(pop);
 
//实例化一个组件
  document.body.append(new popup({
//组件props
    propsData: {
      imgSrc: src
    }
//mount 不挂载，挂载交给外部 或者内部实现也可以
  }).$mount().$el)
}
//指令绑定事件和传值
export default {
  bind(el, binding) {
    let src = binding.value.src;
//这里没有考虑 update情况，可以后续优化
    el.addEventListener('click', () => {
      showDiv(src)
    })
    
  },
  unbind(el) {
    el.removeEventListener('click')
  }
}

pop.vue

<template>
  <div class="m-div">
    我是指令渲染插件 这里面你可以做任何你想做的事
  </div>
</template>

<script>
export default {
  name: "pop",
  props: {
    imgSrc: {
      type: String,
      default() {
        return ''
      }
    }
  }
}
</script>

<style scoped>

</style>

具体页面

<template>

<img src="https://cn.vuejs.org/images/logo.svg" alt="" v-dirv="{src:'https://cn.vuejs.org/images/logo.svg'}"/>
</template>
<script>
//注册指令
import dirv from "@/views/div/dirv";

export default {
  name: "create",
  directives:{dirv},
}
</script>