vue3 低代码实现分享

LText.vue

<template>
  <component
    :is="tag"
    :style="styleProps"
    @click="handleClick"
    class="l-text-component"
    >{{ text }}</component
  >
</template>

<script>
import { defineComponent } from "vue";

import {
  transformToComponentProps,
  textDefaultProps,
  textStylePropNames,
} from "../defaultProps";
import useComponentCommomn from "../hooks/useComponentCommomn";

const defaultProps = transformToComponentProps(textDefaultProps);

export default defineComponent({
  name: "l-text",
  props: {
    tag: {
      type: String,
      default: "div",
    },
    ...defaultProps,
  },
  setup(props) {
    const { styleProps, handleClick } = useComponentCommomn(
      props,
      textStylePropNames
    );

    return {
      styleProps,
      handleClick,
    };
  },
});
</script>

<style scoped>
h2.l-text-component,
p.l-text-component {
  margin-bottom: 0;
}
button.l-text-component {
  padding: 5px 10px;
  cursor: pointer;
}
.l-text-component {
  box-sizing: border-box;
  white-space: pre-wrap;
  position: relative !important;
}
</style>

propsMap.js

import { h } from "vue";

const fontFamilyArr = [
  { text: "宋体------", value: '"SimSun","STSong"' },
  { text: "微软雅黑--", value: '"Microsoft YaHei","微软雅黑"' },
  {
    text: "苹方/黑体-简",
    value: '"PingFang SC","Hiragino Sans GB","Microsoft YaHei"',
  },
  {
    text: "系统默认--",
    value: 'system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI"',
  },
  { text: "楷体-----", value: '"KaiTi","STKaiti"' },
  { text: "仿宋-----", value: '"FangSong","STFangsong"' },
  { text: "新宋体----", value: '"NSimSun"' },
  { text: "华文细黑----", value: '"STXihei","华文细黑"' },
  { text: "幼圆-----", value: '"YouYuan","幼圆"' },
];

const fontFamilyOptions = fontFamilyArr.map((font) => {
  return {
    value: font.value,
    text: h("span", { style: { fontFamily: font.value } }, font.text),
  };
});

export const mapPropsToForms = {
  text: {
    text: "文本",
    component: "a-textarea",
    extraProps: { rows: 3 },
    afterTransform: (e) => e.target.value,
  },
  fontSize: {
    text: "字号",
    component: "a-input-number",
    initalTransForm: (v) => parseFloat(v),
    afterTransform: (e) => (e ? e + "px" : ""),
  },
  lineHeight: {
    text: "行高",
    component: "a-slider",
    extraProps: { min: 0, max: 3, step: 0.1 }, // a-slider组件里的属性
    initalTransForm: (v) => parseFloat(v),
    afterTransform: (e) => e.toString(),
  },
  textAlign: {
    component: "a-radio-group",
    subComponent: "a-radio-button",
    text: "对齐",
    options: [
      { value: "left", text: "左" },
      { value: "center", text: "中" },
      { value: "right", text: "右" },
    ],
    afterTransform: (e) => e.target.value,
  },
  fontFamily: {
    component: "a-select",
    subComponent: "a-select-option",
    text: "字体",
    options: [{ text: "无--------", value: "" }, ...fontFamilyOptions],
  },
  color:{
    component:'color-picker',
    text: "字体颜色",
  }
};

EditorView.vue

<script>
import { computed, defineComponent } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";

import LText from "./components/LText.vue";
import LImage from "./components/LImage.vue";
import ComponentList from "./components/ComponentList.vue";
import defaultTextTemplates from "./defaultTextTemplates";
import EditWrapper from "./components/EditWrapper.vue";
import PropsTable from "./components/PropsTable.vue";
import Uploader from "./components/Uploader.vue";
export default defineComponent({
  components: { LText, ComponentList, EditWrapper, PropsTable, Uploader ,LImage},
  setup() {
    const store = useStore();
    const editorComponents = computed(() => store.state.editor.components);
    const currentElement = computed(() => store.getters.getCurrentElement);

    const addItem = (props) => {
      console.log(props);
      store.commit("addComponent", props);
    };

    const setActive = (id) => {
      store.commit("setActive", id);
    };

    const handleChange = (it) => {
      console.log(it);
      store.commit("updateComponent", it);
    };
    return {
      editorComponents,
      defaultTextTemplates,
      addItem,
      setActive,
      currentElement,
      handleChange,
    };
  },
});
</script>

<template>
  <!-- <h2>AboutView</h2>
  <label>
    Search: <input v-model.trim="search" maxlength="20">
  </label> -->
  <a-row :gutter="16" type="flex" style="width: 100vw">
    <a-col class="gutter-row" :span="8" style="width: 100%">
      <div class="gutter-box">
        <div>组件列表</div>
        <div>
          <component-list :list="defaultTextTemplates" @onItemClick="addItem" />
        </div>

        <div>
          <uploader @onItemClick="addItem" />
        </div>
      </div>
    </a-col>
    <a-col class="gutter-row" :span="8" style="width: 100%">
      <div class="gutter-box">
        <div>画布区域</div>
        <div class="huabu">
          <edit-wrapper
            v-for="c in editorComponents"
            :key="c.id"
            :id="c.id"
            :active="c.id === (currentElement && currentElement.id)"
            @setActive="setActive"
          >
            <component v-bind="c.props" :is="c.name" />
          </edit-wrapper>
        </div>
      </div>
    </a-col>

    <a-col class="gutter-row" :span="8" style="width: 100%">
      <div class="gutter-box">
        <div>组件属性</div>
        <div>
          <PropsTable
            v-if="currentElement && currentElement.props"
            :props="currentElement.props"
            @change="handleChange"
          />
        </div>
        <pre>          {{ currentElement && currentElement.props }}</pre>
      </div>
    </a-col>
  </a-row>
</template>

<style scoped>
.huabu {
  background: #c4c1c1;
  height: 500px;
}
</style>

等等等