增加自定义组件

增加自定义组件

增加自定义基本组件

1. 参考widgetDataType.ts中的组件定义，以widget_text对象为例

{
        name: "widget_text", 组件名字
        component: "WidgetText", 组件对应的文件名
        type: "baseWidget",
        icon: "text", 组件对应的icon
        title: "文本", 组件标题
        style: { 基本样式
            rotate: 0,
            opacity: 1,
            width: 260,
            height: 40,
            top: 0,
            left: 0,
            textStyle: {
                fontSize: 16,
                lineHeight: 1.8,
                color: "#ffffff",
                fontWeight: "normal",
                textAlign: "left",
                fontFamily: "Microsoft YaHei",
                textShadowColor: "rgba(140,207,255,1)",
                textShadowBlur: 1,
                textShadowSize: 100,
                letterSpacing: 1,
                wordSpacing: 1,
            }
        },
        options: toMerged(options, {linkUrl: '', autoLink: 0, linkTarget: '_blank'}), 额外配置
        data: [ 组件数据
            {
                "内容": "这是第一个文本，可以自动换行文本。"
            }
        ]
    },

2. 在src\components\canvasWidget创建对应的组件定义文件WidgetText.ts， 这个文件的作用是创建一个函数式组件，在使用的时候动态导入对应的vue组件，这样每个组件都会编译为一个单独的js文从而提高加载速度，只有组件被用到时才会加载。

import {defineAsyncComponent, type FunctionalComponent, h, type PropType} from "vue";
import type {IDesignWidget} from "@/common/interfaces/designWidget.ts";

const WidgetTextComponent: FunctionalComponent = (props:any) => {
  return h(defineAsyncComponent(()=>import('@/components/canvasWidget/WidgetText/WidgetText.vue')), {widgetData: props.widgetData})
}
WidgetTextComponent.props = {
  widgetData: {
    type: Object as PropType<IDesignWidget>,
    required: true
  }
}
export default WidgetTextComponent

3. 在src\components\canvasWidget\index.ts中增加对WidgetText.ts的引用，不然在项目中会找不到。

export {default as WidgetText} from './WidgetText.ts'

4. 创建真正的组件vue文件,src\components\canvasWidget\WidgetText\WidgetText.vue

<script lang="ts" setup>
import type {IDesignWidget} from "@/common/interfaces/designWidget.ts";
import {type PropType} from "vue";

// 这里创建组件属性
const props = defineProps({
  widgetData: {
    type: Object as PropType<IDesignWidget>,
    default: () => {
    },
    required: true
  }
})
</script>
<template>
  <!--注意这里必须使用<div class="widget-root">来作为根元素-->
  <div class="widget-root" style="overflow: hidden;">
    实际的组件显示内容
  </div>
</template>

<style scoped>
</style>

5. 创建文件src\components\canvasWidgetStyle\WidgetTextAttr.ts，这个是组件的属性面板，文件作用参考第2项说明

import {defineAsyncComponent, type FunctionalComponent, h, type PropType} from "vue";
import type {IDesignWidget} from "@/common/interfaces/designWidget.ts";

const WidgetTextAttrComponent: FunctionalComponent = (props: any) => {
    return h(defineAsyncComponent(()=>import('@/components/canvasWidgetStyle/WidgetTextAttr/WidgetTextAttr.vue')), {widgetData: props.widgetData})
}
WidgetTextAttrComponent.props = {
    widgetData: {
        type: Object as PropType<IDesignWidget>,
        required: true
    }
}
export default WidgetTextAttrComponent

6. 在src\components\canvasWidgetStyle\index.ts中引用src\components\canvasWidgetStyle\WidgetTextAttr.ts

export {default as WidgetTextAttr} from './WidgetTextAttr.ts'

7. 创建真正的属性面板vue组件

<template>
  <div class="widget-attr-panel-item">
    <!-- 基本属性 -->
    <widget-base-attr :widgetData="widgetData"/>
    <!-- 通用样式 -->
    <common-style :widgetData="widgetData"/>
    <!--    数据来源-->
    <WidgetDataSource :widgetData="widgetData" style="margin-left: 5px"/>
    <div class="widget-attr-items">
      <div class="widget-attr-items-title">字段引用</div>
      <div class="widget-attr-item-row">
        <span class="widget-attr-name">文字内容</span>
        <div class="widget-attr-value">
          <el-select v-model="widgetData.options.contentName" size="small">
            <el-option v-for="(item,index) in dataMapping" :key="index" :label="item" :value="item"/>
          </el-select>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {computed, type PropType} from 'vue'
import {createDataMapping} from "@/common/js/utils.ts";
import type {IDesignWidget} from "@/common/interfaces/designWidget.ts";
import WidgetDataSource from "@/components/common/WidgetDataSource.vue";
import WidgetBaseAttr from "@/components/canvasWidgetStyle/WidgetBaseAttr.vue";
import CommonStyle from "@/components/common/CommonStyle.vue";

const props = defineProps({
  widgetData: {
    type: Object as PropType<IDesignWidget>,
    required: true
  }
})
const dataMapping = computed(() => {
  return createDataMapping(props.widgetData.data)
})
</script>

<style scoped>
</style>