精通系列

Posted 蓝盒子itbluebox

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了精通系列相关的知识,希望对你有一定的参考价值。

Vue3+TypeScript 实现自己搭建低代码平台【一篇文章精通系列】

一、Vite创建Vue3 项目

这里已经有创建好的模板项目
执行使用即可

二、创建组件相关样式

1、创建data.json





  "container":
    "width": "550px",
    "height":"550px",
  ,
  "blocks":

  



2、在Home.vue当中引入组件

<script setup lang="ts">
import data from '../data.json';
import ref,reactive from "vue";
const state = ref(data)
</script>
<template >
  <div class="demo">

  </div>
</template>
<style scoped lang="sass">

</style>

3、创建自定义组件(使用jsx)


在vue3的工程中使用jsx

 npm i @vitejs/plugin-vue-jsx -s

import vueJsx from '@vitejs/plugin-vue-jsx'
 vueJsx(),



import defineComponent from "vue";
export default defineComponent(
    setup()
        return ()=> <div>editor</div>
    
)

Home.vue当中引入组件

<script setup lang="ts">
import data from '@/data.json';
import Editor from "@/packages/editor";
import ref,reactive from "vue";
const state = ref(data)
</script>
<template >
  <div class="demo">
      <Editor></Editor>
  </div>
</template>
<style scoped lang="sass">
</style>

运行测试


去掉默认样式


在Home.vue当中传递组件对应的值

<script setup lang="ts">
import data from '@/data.json';
import Editor from "@/packages/editor";
import ref,reactive from "vue";
const state = ref(data)
</script>
<template >
  <div class="demo">
      <Editor :data="state"></Editor>
  </div>
</template>
<style scoped lang="sass">
</style>

editor.jsx当中接受对应的值

import defineComponent from "vue";

export default defineComponent(
    props:
        data:
            type:Object
        
    ,
    setup(props)
        console.log(props.data)
        return ()=> <div>editor</div>
    
)

运行测试

4、完善基本样式

设置页面周围空白间隙

#app
    position: fixed;
    top:20px;
    left:20px;
    right:20px;
    bottom:20px;


import defineComponent from "vue";
import './editor.scss'
export default defineComponent(
    props:
        data:
            type:Object
        
    ,
    setup(props)
        console.log(props.data)
        return ()=> <div class="editor">
            <div class="editor-left">
                左侧物料区
            </div>
            <div class="editor-top">
                菜单栏
            </div>
            <div class="editor-right">
                属性控制栏目
            </div>
            <div class="editor-container">
                /*  负责参数滚动条 */
                <div class="editor-container-canvas">
                    /* 产生内容区域 */
                    <div class="editor-container-canvas_content">
                        内容区域
                    </div>
                </div>
            </div>
        </div>
    
)



在editor.jsx当中引入scss、

import './editor.scss'

.editor
  width: 100%;
  height: 100%;
  &-left,
  &-right
    position: absolute;
    width: 270px;
    background: red;
    top: 0;
    bottom: 0;
  
  &-left
    left: 0;
  
  &-right
    right: 0;
  
  &-top
    position: absolute;
    right: 280px;
    left: 280px;
    height: 80px;
    background: blue;
  
  &-container
    padding:80px 270px 0;
    height: 100%;
    box-sizing: border-box;
    &-canvas
      overflow: scroll;
      height: 86vh;
      &__content
        margin: 20px auto;
        width:550px;
        height:1550px;
        background: yellow;
      
    
  


三、设置组件动态数据

1、父组件向子组件传递值



  "container":
    "width": "550",
    "height":"550"
  ,
  "blocks":

  



<script setup lang="ts">
import data from '@/data.json';
import Editor from "@/packages/editor";
import ref,reactive from "vue";
const state = ref(data)
</script>
<template >
  <div class="demo">
      <Editor v-model="state"></Editor>
  </div>
</template>
<style scoped lang="sass">
</style>

import defineComponent,computed from "vue";
import './editor.scss'
export default defineComponent(
    props:
        modelValue:
            type:Object
        
    ,
    setup(props)
        const data = computed(
            get()
                return props.modelValue
            
        )
        console.log(props.modelValue)
        return ()=> <div class="editor">
            <div class="editor-left"> 左侧物料区 </div>
            <div class="editor-top"> 菜单栏 </div>
            <div class="editor-right"> 属性控制栏目 </div>
            <div class="editor-container">
                /*  负责参数滚动条 */
                <div class="editor-container-canvas">
                    /* 产生内容区域 */
                    <div class="editor-container-canvas__content">
                        内容区域
                    </div>
                </div>
            </div>
        </div>
    
)

2、设置动态数据

删除固定数据

渲染样式

import defineComponent,computed from "vue";
import './editor.scss'
export default defineComponent(
    props:
        modelValue:
            type:Object
        
    ,
    setup(props)
        const data = computed(
            get()
                return props.modelValue
            
        )
        console.log(props.modelValue)
        const containerStyles = computed( ()=>(
            
                width: data.value.container.width+'px',
                height: data.value.container.height+'px'
            
        ))
        return ()=> <div class="editor">
            <div class="editor-left"> 左侧物料区 </div>
            <div class="editor-top"> 菜单栏 </div>
            <div class="editor-right"> 属性控制栏目 </div>
            <div class="editor-container">
                /*  负责参数滚动条 */
                <div class="editor-container-canvas">
                    /* 产生内容区域 */
                    <div class="editor-container-canvas__content" style=containerStyles.value>
                        内容区域
                    </div>
                </div>
            </div>
        </div>
    
)


渲染内容



import defineComponent from "vue";


export default defineComponent(




)

在editor.jsx当中引入EditorBlock

import defineComponent,computed from "vue";
import './editor.scss'
import EditorBlock from "@/packages/editor-block.jsx";
export default defineComponent(
    props:
        modelValue:
            type:Object
        
    ,
    setup(props)
        const data = computed(
            get()
                return props.modelValue
            
        )
        console.log(props.modelValue)
        const containerStyles = computed( ()=>(
            
                width: data.value.container.width+'px',
                height: data.value.container.height+'px'
            
        ))
        return ()=> <div class="editor">
            <div class="editor-left"> 左侧物料区 </div>
            <div class="editor-top"> 菜单栏 </div>
            <div class="editor-right"> 属性控制栏目 </div>
            <div class="editor-container">
                /*  负责参数滚动条 */
                <div class="editor-container-canvas">
                    /* 产生内容区域 */
                    <div class="editor-container-canvas__content" style=containerStyles.value>
                        
                            (data.value.blocks.map( block=>(
                                <div>
                                    <EditorBlock block= block ></EditorBlock>
                                </div>
                            )))
                        
                    </div>
                </div>
            </div>
        </div>
    
)

完善editor-block.jsx


import defineComponent,computed from "vue";
import editor from "./editor.jsx";


export default defineComponent(
    props:
        block:type:Object
    ,
    setup(props)

        const blockStyles = computed(()=>(
            top:`$props.block.toppx`,
            left:`$props.block.leftpx`,
            zIndex:`$props.block.zIndexpx`,
        ))

        return ()=>
            return <div class="editor-block" style=blockStyles.value>这是一个代码块</div>
        
    
)

.editor-block
  position: absolute;

完善显示数据

"blocks":[
    
      "top": 100,
      "left": 100,
      "color": "red",
      "zIndex": 1,
      "key": "text"
    ,
    
      "top": 200,
      "left": 200,
      "color": "red",
      "zIndex": 1,
      "key": "button"
    ,
    
      "top": 300,
      "left": 300,
      "color": "red",
      "zIndex": 1,
      "key": "input"
    
  ]

3、使用组件替换

在项目当中已经引入了Element UI Plus

创建左侧要拖动的组件内容

Java之Spring Boot入门到精通IDEA版SpringBoot整合其他框架Junit,Redis,MyBatis(一篇文章精通系列)中

精通系列)

Java之Spring Boot入门到精通IDEA版SpringBoot原理分析,SpringBoot监控(一篇文章精通系列)下

Oracle 从入门到精通系列 - 资料下载

Infopath入门到精通系列-1 Infopath文件说明

redis入门到精通系列:redis操作的两个实践案例