web架构师编辑器内容-完成属性设置的优化

这篇具有很好参考价值的文章主要介绍了web架构师编辑器内容-完成属性设置的优化。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

对于业务组件来说,其属性是有很多的,如果把所有属性都平铺在页面上,就会非常长,而且想要更改其中的某些属性,可能需要向下滚动很久才能找到,对于UI的交互不是很友好,需要对属性的不同特性进行分组。
改造前:
web架构师编辑器内容-完成属性设置的优化,慕课网-Web前端架构师,前端,编辑器,microsoft
改造后:
web架构师编辑器内容-完成属性设置的优化,慕课网-Web前端架构师,前端,编辑器,microsoft
先来看一下通用属性:

// 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一开始就是按照不同的属性进行分类的,所以比较符合我们的一个需求。
首先,组件总属性分两大类:业务组件(独特属性),通用属性(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;
}

将组件通用属性分类分多个小类: size,border type,shadow…
然后创建一个新的组件 EditGroup,
<EditGroups :props="currentElement.props">
在EditGroup 中的目的就是 props 转换成数组的多项,每个数组对应一个选项卡:

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

通用属性这里是定死的,我们手动添加这样的关系即可。

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

数据的前期准备:
这里的属性需要使用默认属性完成一个混入,也就是将属性添加完整:

// 完成数据的一个混入
// defaultProps.ts
const imageDefaultProps: ImageComponentProps = {
  src: 'test.url',
  ...commonDefaultProps
}
const textDefautlProps: TextComponentProps = {
  // basic props - font styles
  text: "正文内容",
  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 对应关系的继续添加,这里也要将对应关系添加完整。
业务组件 - 独特属性 需要经过计算
其实就是所有属性的数组(全集) 通用属性的数组(子集)求差集 的得出的结果:
specialProps = Object.keys(props.props) - allNormalProps
然后将 specialProps 得出的内容,添加到数组的第一项去
最终循环数组得出对应的界面
代码实现:文章来源地址https://www.toymoban.com/news/detail-814922.html

  1. 将属性数据混入补充完整
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' }},
]
  1. 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>

到了这里,关于web架构师编辑器内容-完成属性设置的优化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React 框架下自己写一个braft编辑器,然后将编辑器内容展示在网页端

    1.首先自己写一个编辑器 输入文字; 支持选择表情; 可添加小程序链接;可添加网页链接;并且可以编辑删除;效果如下 2.输入完毕后,点击文本输入框保存,将便携式内容回显, 渲染时,因为是html格式,所以采用dangerouslySetInnerHTML属性来渲染 添加样式,渲染后里面的链接

    2024年02月16日
    浏览(61)
  • AJAX + PHP 编辑器内容自动备份草稿保存到本地 (适用ueditor百度编辑器或其它) 内容变化后自动触发备份txt文件

    百度自带的自动备份功能enableAutoSave存在问题, 比如第一个文章他自动备份了.等发表第二个文章时,结果把第一个文章的内容自动填充进去了.关键你还不知情!出现过多次这种情况了. 一, 百度原版的 ,具体使用方法,看这里个文章 Ueditor百度编辑器内容自动保存到本地防数据丢失

    2024年02月10日
    浏览(55)
  • 【HTML】标签读取富文本编辑器的内容

    1.正确读取富文本内容示例: 代码:  显示结果:  在这个例子中, {$row.content}  是直接输出从数据库中获取的富文本内容,包括可能存在的HTML标签和属性,这样可以确保富文本能够按照预期样式呈现。 2. 错误读取富文本内容示例及其原因分析:  代码:  显示结果: 分析

    2024年02月02日
    浏览(47)
  • Unity 编辑器-创建模板脚本,并自动绑定属性,添加点击事件

    当使用框架开发时,Prefab挂载的很多脚本都有固定的格式。从Unity的基础模板创建cs文件,再修改到应有的模板,会浪费一些时间。尤其是有大量的不同界面时,每个都改一遍,浪费时间不说,还有可能遗漏或错改。写个脚本创建指定的模板代替C#基础模板。 注:当前脚本使用

    2024年02月13日
    浏览(60)
  • 工业组态 物联网组态 组态编辑器 web组态 组态插件 编辑器

     体验地址:by组态[web组态插件] BY组态是一款非常优秀的纯前端的【web组态插件工具】,可无缝嵌入到vue项目,react项目等,由于是原生js开发,对于前端的集成没有框架的限制。同时由于BY组态只是一个插件,不能独立运行,必须嵌入到你方软件平台才能使用,所以你方软件

    2024年04月15日
    浏览(43)
  • 利用三维内容编辑器制作VR交互课件,简单好用易上手

    随着虚拟现实技术的不断发展,越来越多的教育机构开始尝试将其应用于教育教学中。然而,要实现这一目标并不容易,需要专业的技术支持和开发团队。 为了解决这一问题, 广州华锐互动 研发了 三维内容编辑器 ,它是一种基于虚拟现实技术的教育内容编辑器,可以帮助

    2024年02月12日
    浏览(45)
  • Unity快手上手【熟悉unity编辑器,C#脚本控制组件一些属性之类的】

    首先了解unity相关概述,快速认识unity编辑器,然后抓住重点的学:游戏对象、组件|C#脚本、预制体、UI ☺ 学习过程你会发现,其实Unity中主要是用c#进行开发。 因为在这个过程中,无非就是,对游戏对象通过挂载的C#脚本,修改一下组件的一些属性,控制一下激活之类的操作

    2023年04月13日
    浏览(59)
  • idea设置编辑器背景颜色

    在File-Settings-Editor-Color Scheme-General 豆沙绿:R:199, G: 237, B:204 给所有新打开项目配置maven默认配置目录和本地仓库目录 给所有新打开项目配置jdk等配置 :encoding :serialVersionUID

    2024年01月19日
    浏览(73)
  • ruby - ckeditor 设置编辑器高度

    参考:Blogs %= f.cktext_area :zh_content, ckeditor: { height: 1000} %

    2024年02月14日
    浏览(37)
  • Godot VisualStudio外部编辑器设置

    Godot专栏地址 Godot本质上只是一个游戏引擎,对C#只做了最小的适配,就是能打开,但是不能Debug。Godot支持许多外部编辑器,比如vs code和 visual studio 。但是我看网上说 vs code 的godot C# debug支持极差,别人踩过坑了那我就不去继续踩坑了。 【Godot】基础C#脚本入门以及vs调试设置

    2024年02月07日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包