對于業(yè)務(wù)組件來說，其屬性是有很多的，如果把所有屬性都平鋪在頁面上，就會非常長，而且想要更改其中的某些屬性，可能需要向下滾動(dòng)很久才能找到，對于UI的交互不是很友好，需要對屬性的不同特性進(jìn)行分組。
改造前：

改造后：

先來看一下通用屬性：

// defaultProps.ts
export interface CommonComponentProps {
  // actions
  actionType: string;
  url: string;
  // size
  height: string;
  width: string;
  paddingLeft: string;
  paddingRight: string;
  paddingTop: string;
  paddingBottom: string;
  // border type
  borderStyle: string;
  borderColor: string;
  borderWidth: string;
  borderRadius: string;
  // shadow and opacity
  boxShadow: string;
  opacity: string;
  // position and x,y
  position: string;
  left: string;
  top: string;
  right: string;
}

CommonComponentProps一開始就是按照不同的屬性進(jìn)行分類的，所以比較符合我們的一個(gè)需求。
首先，組件總屬性分兩大類：業(yè)務(wù)組件(獨(dú)特屬性)，通用屬性(CommonComponentProps)

// 文本組件
export interface TextComponentProps extends CommonComponentProps {
  text: string;
  fontSize: string;
  fontFamily: string;
  fontWeight: string;
  fontStyle: string;
  textDecoration: string;
  lineHeight: string;
  textAlign: string;
  color: string;
  backgroundColor: string;
}
// 圖片組件
export interface ImageComponentProps extends CommonComponentProps {
  src: string;
}

將組件通用屬性分類分多個(gè)小類： size，border type，shadow…
然后創(chuàng)建一個(gè)新的組件 EditGroup，
<EditGroups :props="currentElement.props">
在EditGroup 中的目的就是 props 轉(zhuǎn)換成數(shù)組的多項(xiàng)，每個(gè)數(shù)組對應(yīng)一個(gè)選項(xiàng)卡:

[
  {
  	text: '基礎(chǔ)屬性',
  	// specialProps = Object.keys(props.props) - allNormalProps
    items: specialProps,
  },
  {
 	text: '尺寸',
    items: [...]
  }
]

通用屬性這里是定死的，我們手動(dòng)添加這樣的關(guān)系即可。

[
  {
    text: '尺寸',
    items: ['height', 'width', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']
  },
  ...
]

數(shù)據(jù)的前期準(zhǔn)備：
這里的屬性需要使用默認(rèn)屬性完成一個(gè)混入，也就是將屬性添加完整：

// 完成數(shù)據(jù)的一個(gè)混入
// defaultProps.ts
const imageDefaultProps: ImageComponentProps = {
  src: 'test.url',
  ...commonDefaultProps
}
const textDefautlProps: TextComponentProps = {
  // basic props - font styles
  text: "正文內(nèi)容",
  fontSize: "14px",
  fontFamily: "",
  fontWeight: "normal",
  fontStyle: "normal",
  textDecoration: "none",
  lineHeight: "1",
  textAlign: "left",
  color: "#000000",
  backgroundColor: "",
  ...commonDefaultProps,
}
// store.ts
export const testComponents: ComponentData[] = [
{ id: uuidv4(), name: 'l-text', layerName:'圖層3', props: { ...textDefaultProps, text: 'hello3', fontSize: '15px', actionType: 'url', url: 'https://www.baidu.com', 'lineHeight': '3', textAlign: 'left', fontFamily: '' }},
{ id: uuidv4(), name: 'l-image', layerName:'圖層4', props: { ...imageDefaultProps, src: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5f3e3a17c305b1070f455202.jpg', width: '100px' }},
]

propsMap 對應(yīng)關(guān)系的繼續(xù)添加，這里也要將對應(yīng)關(guān)系添加完整。
業(yè)務(wù)組件 - 獨(dú)特屬性 需要經(jīng)過計(jì)算
其實(shí)就是所有屬性的數(shù)組（全集） 通用屬性的數(shù)組（子集）求差集 的得出的結(jié)果:
specialProps = Object.keys(props.props) - allNormalProps
然后將 specialProps 得出的內(nèi)容，添加到數(shù)組的第一項(xiàng)去
最終循環(huán)數(shù)組得出對應(yīng)的界面
代碼實(shí)現(xiàn)：文章來源地址http://www.zghlxwxcb.cn/news/detail-814922.html

1. 將屬性數(shù)據(jù)混入補(bǔ)充完整

export const testComponents: ComponentData[] = [
  { id: uuidv4(), name: 'l-text', layerName:'圖層1', props: { ...textDefaultProps, text: 'hello', fontSize: '20px', color: '#000000', 'lineHeight': '1', textAlign: 'left', fontFamily: '' }},
  { id: uuidv4(), name: 'l-text', layerName:'圖層2', props: { ...textDefaultProps, text: 'hello2', fontSize: '10px', fontWeight: 'bold', 'lineHeight': '2', textAlign: 'left', fontFamily: '' }},
  { id: uuidv4(), name: 'l-text', layerName:'圖層3', props: { ...textDefaultProps, text: 'hello3', fontSize: '15px', actionType: 'url', url: 'https://www.baidu.com', 'lineHeight': '3', textAlign: 'left', fontFamily: '' }},
  { id: uuidv4(), name: 'l-image', layerName:'圖層4', props: { ...imageDefaultProps, src: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5f3e3a17c305b1070f455202.jpg', width: '100px' }},
]

2. EditGroup.vue

<template>
  <div class="edit-groups">
    <div v-for="item in newGroups" :key="item.text">
      <h1>{{item.text}}</h1>
      <pre>{{item.items}}</pre>
    </div>
  </div>
</template>

<script lang="ts">
import { AllComponentProps } from 'lego-bricks-sea';
import { difference } from 'lodash'
import { defineComponent, PropType, computed } from 'vue';
export interface GroupProps {
  text: string;
  items: string[];
}
const defaultEditGroups: GroupProps[] = [
  {
    text: '尺寸',
    items: [
      'height',
      'width',
      'paddingLeft',
      'paddingRight',
      'paddingTop',
      'paddingBottom',
    ],
  },
  {
    text: '邊框',
    items: ['borderStyle', 'borderColor', 'borderWidth', 'borderRadius'],
  },
  {
    text: '陰影與透明度',
    items: ['opacity', 'boxShadow'],
  },
  {
    text: '位置',
    items: ['left', 'top'],
  },
  {
    text: '事件功能',
    items: ['actionType', 'url'],
  },
];
export default defineComponent({
  props: {
    props: {
      type: Object as PropType<AllComponentProps>,
      required: true,
    },
    groups: {
      type: Array as PropType<GroupProps[]>,
      default: defaultEditGroups,
    },
  },
  setup(props) {
    const newGroups = computed(() => {
      const allNormalProps = props.groups.reduce((prev, current) => {
        return [...prev, ...current.items]
      }, [] as string[])
      const specialProps = difference(Object.keys(props.props), allNormalProps)
      return [
        {
          text: '基本屬性',
          items: specialProps
        },
        ...props.groups
      ]
    })
    return {
      newGroups
    }
  },
});
</script>

<style></style>

到了這里，關(guān)于web架構(gòu)師編輯器內(nèi)容-完成屬性設(shè)置的優(yōu)化的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！