设计时 JS 文件

设计时 JS 文件的文件名和运行时 JS 文件的文件名相同，但是内部写法不同。此文件使用 AMD 规范，编写组件设计时的渲染逻辑及内容。如声明该文件，需要在设计器 JS 文件中注册。antd、ant-design-vue、@antmjs/vantui、vant 等第三方库，已通过加载 *.min.js 的方式注册到全局变量中，可以直接使用。

基础文件内容

React 体系文件内容

组件继承自 BaseComponent 类，代码如下：

define(function (require) {
    let BaseComponent = require('babel!$UI/wxsys/comps/reactContainer/designer/BaseComponent');
    let { 组件名, 组件名2 } = antd;

    class 组件名Pro extends BaseComponent {
        constructor(...args) {
            super(...args);
        }

        render() {
            return <组件名 {...this.props}></组件名>
        }
    }
    return 组件名Pro;
})

“时段”组件在设计器中需要有自己渲染的逻辑,所以需要写设计时 Js，代码如下

define(function (require) {
    let {Space, Radio, DatePicker} = antd;
    const {Group, Button} = Radio;
    const {RangePicker} = DatePicker;
    let BaseComponent = require('babel!$UI/wxsys/comps/reactContainer/designer/BaseComponent');

    class PeriodPro extends BaseComponent {
        constructor(props) {
            super(props);
            this.mockData = [
                {value: "today", label: "今日"},
                {value: "week", label: "本周"},
                {value: "month", label: "本月"},
                {value: "year", label: "本年"},
            ]
        }

        render() {
            let {onChange, className = "", ...other} = this.props;
            other.className = className + " ant-period "
            return <Space {...other}>
                <Group value={"none"}>
                    {
                        this.mockData.map(item => <Button renderIcon={<></>} value={item.value}>{item.label}</Button>)
                    }
                </Group>
                <RangePicker open={false}></RangePicker>
            </Space>
        }
    }
    return PeriodPro;
});

Vue 体系文件内容

使用 JSX 语法，代码如下：

<script setup lang="jsx">
let {hoistNonVueStatic, commonProps, omitProps, useRefData, useUse, useFireEvent} = vueContainer;
let {组件名,组件名2} = antdv;
let {useAttrs, useSlots, reactive, onMounted, isVNode} = Vue;
let props = defineProps({
  ...commonProps
})

let emits = defineEmits([]);
let fireEvent = useFireEvent(emits);
let attrs = useAttrs();
let slots = useSlots();

let use = useUse(props);
let refData = useRefData(props);

let 组件名ProRender = () => {
    let {...vSlots} = slots;
    let omittedProps = omitProps(props, commonProps)
    return <组件名 {...attrs} {...omittedProps} vSlots={vSlots}/>
};

</script>
<template>
  <组件名ProRender />
</template>

“时段”组件需要有自己渲染的逻辑,所以需要写设计时 Js，代码如下

<script lang="jsx">
let {commonProps, useRefData, useUse, useFireEvent, useData, omitProps} = window.vueContainer;
let {Space, Radio, DatePicker} = antd;
const {Group, Button} = Radio;
const {RangePicker} = DatePicker;
</script>
<script setup lang="jsx">
let {useAttrs, useSlots, reactive, watch} = Vue;

let props = defineProps({
  class: {type: String, default: ""},
  ...commonProps
})
let emits = defineEmits([]);
let fireEvent = useFireEvent(emits);
let attrs = useAttrs();
let slots = useSlots();

let use = useUse(slots);
let refData = useRefData(props);
let mockData = [
  {value: "today", label: "今日"},
  {value: "week", label: "本周"},
  {value: "month", label: "本月"},
  {value: "year", label: "本年"},
]
let PeriodProRender = () => {
  let {class:className,...others} = props;
  others.class = className + " ant-period "
  let omittedProps = omitProps(others, commonProps);

  return <Space {...omittedProps} {...attrs}>
    <Group value={"none"}>
      {
        mockData.map(item => <Button renderIcon={<></>} value={item.value}>{item.label}</Button>)
      }
    </Group>
    <RangePicker open={false}></RangePicker>
  </Space>
}
</script>

<template>
  <PeriodProRender/>
</template>

引用组件

在设计时 JS 文件中，引用组件是用于渲染，不需要运行时能力，因此一般不用引用系统组件，引用基础组件和第三方组件即可

引用基础组件

例如：引用“输入框”组件，代码如下

// React 体系
let {Input} = antd;

// Vue 桌面端
let {Input} = antdv;

// React 移动端
let {Field} = vantui;

// Vue 移动端
let {Field} = vant;

引用第三方组件

在设计器中渲染的第三方组件，需要提供 min 包，不支持使用 npm 安装的散文件。

例如：“图表”组件引用 echarts-for-vue 组件，将 echarts-for-vue 组件提供的 echarts-for-vue.js 和 echarts 提供的 echarts.min.js 放到组件设计时 lib 目录下，即放到 UI2/comps/chartv/components/Echarts/designer/lib 目录下，即可引用，代码如下

import { createComponent } from "./lib/echarts-for-vue.js";
import { h, reactive, watch, useAttrs } from "vue";
let ECharts = createComponent({ echarts, h });

//组件渲染方法
let EChartsRender = () => {
    return <ECharts {...attrs} {...other} option={getOption()} initTheme={themeName} />
}

API

系统为了实现在设计器中的模拟显示，在设计页面上获得了一些数据，用于组件渲染，在组件中获取数据的方法和运行时 JS 方法相同，具体使用参考《组件运行时 JS 文件》

通常先开发组件运行时 JS，将运行时 JS 复制到设计时 JS 文件中，修改引用、去掉事件等属性即可

results matching ""

    No results matching ""