huikaifa/src/views/app/editor/index.vue

<!--
 * @Author: WangJiaCheng
 * @Date: 2021-08-20 09:10:36
 * @LastEditors: WangJiaCheng
 * @LastEditTime: 2021-08-20 18:12:06
 * @Description: 编辑器
-->
<template>
  <div class="editor-container">
    <div class="editor-menu">
      <el-tabs
        tab-position="left"
        style="width: 400px;height: 100%;"
      >
        <el-tab-pane>
          <span slot="label">
            <img :src="wcIconImg" alt="wc" style="width: 24px;">
          </span>
          WisdomUI
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label">
            <svg-icon icon-class="element-icon" style="font-size: 24px;" />
          </span>
          ElemenUI
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label">
            <svg-icon icon-class="component" style="font-size: 24px;" />
          </span>
          自定义
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="editor-main">
      编辑区
    </div>
    <div class="editor-prop">
      属性
    </div>
  </div>
</template>

<script>
import {
  inputComponents, selectComponents, layoutComponents, formConf
} from '@/components/generator/config'
import wcIcon from '@/assets/wc.png'

export default {
  name: 'Editor',
  data() {
    return {}
  },
  computed: {
    wcIconImg() {
      return wcIcon
    }
  }
}
</script>

<style lang="less">
  .editor-container {
    width: 100%;
    height: 100%;
    display: flex;
    .editor-menu {
      height: 100%;
    }
  }
</style>