VUE - 动态渲染组件

VUE - 动态渲染组件

 环境： vue2

1. 创建组件 

　　创建文件：wbsgrap.vue

<template>
  <div class="cbox">模型构件cc</div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped>
.cbox {
  width: 135px;
  height: 46px;
  border-radius: 6px;
  padding: 10px 21px 10px 12px;
  background-color: #5d6268;
  color: #ffffff;
  font-size: 12px;
}
</style>

 

 

 2. 创建js文件

　　JS文件：wbsgrap.js

export function addWbsTag(_position, _tagId, _text = '构件', moveY = 0) {

    // 创建一个div元素
    let div = document.createElement('div');
    div.id = _tagId ?? (`wbs_grap_${Math.round(Math.random() * 10000000000)}`);
    div.style.position = 'absolute';
    // div.style.width = '100px';
    // div.style.height = '40px';
    // div.style.background = 'red';
    div.style.display = 'none';
    // div.textContent = _text;


    // 将div添加到Cesium的container中
    viewer.container.appendChild(div);

    let divChi = document.createElement('div');

    div.appendChild(divChi)

    // 创建Vue实例
    new Vue({
        render: (h) => h(wbsgrap)
    }).$mount(divChi);
}

 

 

3. 增加测试文件，按钮调用js方法

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

end.