vue的自定义指令中，如何向el中插入一段html（如<div></div>"）？

Question

<div class="content-wrapper" v-insert-div>
  <div v-for="item in list" :key="item" class="item-wrapper">
    <div class="img-wrapper">
      <img src="./a01.png" class="response-img">
    </div>
    <p class="text-wrapper">
      <span>YINAGU 2019气质连衣裙...</span>
      <span>¥ 299</span>
    </p>
  </div>
</div>

如上，要用 v-insert-div 这个指令向 div.content-wrapper 后面插入几个空的 div

指令的el不能 appendChild，vnode上不知道有什么方法没？

Answer 1

http://jsrun.net/K4XKp/edit
是可以appendChild的呀。他本来提供的就是操作底层api的功能

Answer 2

// flex的space-between布局中最后补位空div，用法：v-insert-div:margin-left:11px
export default {

inserted(el, binding, vnode) {
    let item = el.children[0]
    let len = el.children.length
    let clearance =
        el.children[1].getBoundingClientRect().right -
        item.getBoundingClientRect().right -
        item.clientWidth // 两个item的间隙
    // 算出一行有多少个item
    let everyItemNum = Math.floor(
        (el.clientWidth + clearance) / (item.clientWidth + clearance)
    )
    let num = everyItemNum - (len % everyItemNum)
    let div = document.createElement('div')
    div.setAttribute(
        'style',
        'width:' + item.clientWidth + 'px;' + (binding.arg || '')
    )
    for (let i = 0; i < num; i++) {
        el.appendChild(div.cloneNode())
    }
}

}