【前端开发】如何将vue组件转成自定义指令使用，（在自定义指令中使用element ui组件或常用组件方式）。

标签：el domClass 自定义 domType 指令 组件 const

// 导入组件
import Vue from 'vue'
import XxTips from 'packages/basic/xx-tips/src/XxTips.vue'
// 自定义指令
Vue.directive('tip', {
  bind(el, binding) {
    el.style.position = 'relative'
    console.log(el.getAttribute('class'), 'el')
   // 引入组件
    const TagItemClass = Vue.extend(XxTips)
    const { schema, term, module, position, tipsData } = binding.value
    let domType = ''
    const domClass = el.getAttribute('class')
    if (domClass && domClass.includes('el-input')) {
      domType = 'input'
    } else if (domClass && domClass.includes('el-button')) {
      domType = 'button'
    } else {
      domType = 'table'
    }
    const tagItemInstance = new TagItemClass({
     // 给组件传参
      propsData: {
        schema,
        term,
        tipsType: domType,
        module,
        position,
        tipsData,
      },
    }).$mount()
    // tagItemInstance.$el.setAttribute('contenteditable', false)

    // 将引入的组件动态插入所在dom后面

    el.appendChild(tagItemInstance.$el)
  },
})

使用方式

     <el-input             placeholder="请输入"             v-tip="{               term: 'AppSecret',               position: 'left',               module: '应用接入',               tipsData: tipsDataVal,             }"           >           </el-input>         // 表格中使用         <el-table-column prop="name" width="180">           <template slot="header">             <span               v-tip="{                 term: 'AppId',                 module: '应用接入',                 tipsData: tipsDataVal,               }"             >               名称</span             >           </template>         </el-table-column>      

 

标签：el,domClass,自定义,domType,指令,组件,const
From： https://www.cnblogs.com/xiaohuizhang/p/16866607.html