v3-json-canvas

demo

http://kgm0515.gitee.io/v3-json-canvas

introduce

Generating pages by dragging and dropping based on vue3.0

install

npm install v3-json-canvas -S

Use in Vue

Introducing local components

import { createApp } from 'vue'
import App from './App.vue'
import KButton from 'v3-json-canvas/dist/lib/button'
import KIcon from 'v3-json-canvas/dist/lib/icon'
import KInput from 'v3-json-canvas/dist/lib/input'
import 'v3-json-canvas/dist/kui.css'
createApp(App).use(KButton).use(KIcon).use(KInput).mount('#app')

Global introduction

import { createApp } from 'vue'
import App from './App.vue'
import Kui from 'v3-json-canvas'
import 'v3-json-canvas/dist/kui.css'
createApp(App).use(Kui).mount('#app')

About component

KJsonEdit

Used to drag and drop edit pages

The internal "KJsonParse" component is used to display the page effect in real time

• Property: "layout" - > generate page layout

• Property: "mock" - > static simulation data used in the page

• Method: "closecanvas" - > called when the editor page is closed

• Method: "submitoption" - > called when submitting editor data

  You can also pass in other attributes, such as "someattr". In the editor, you can use the "_ctx.attrs.someattr "got the attribute value

<KJsonEdit :layout="layout" :mock="mock" @close-canvas="closeCanvas" @submit-option="submitOption" />

KJsonParse

This component can generate pages by parsing configuration

• Property: "layout" - > generate page layout

• Property: "mock" - > static simulation data used in the page

• Property: "editor" - > Whether it is in editing state or not. The default is false

  You can also pass in other attributes, such as "someattr". In the editor, you can use the "_ctx.attrs.someattr "got the attribute value

<KJsonParse :layout="layout" :mock="mock" :editor="false" />

About api

registerLayout

Register additional components or labels that can be dragged by configuration

import Kui from 'v3-json-canvas'
const registerObj = Kui.registerLayout()
registerObj.register(key: srting, obj:IContainerMenuitem)

// Components registered in the left menu
interface IContainerMenuitem {
  compLabel: string
  dropedInfo: IContainer
}

// Interface description of dropedinfo
interface IContainer {
  tag: string // Component or tag name
  isroot?: boolean // Root node (a page can only have one root node)
  isfixed?: boolean // Can the initial state be dragged
  iscontainer: string | boolean // Can other components or labels be included
  children?: Array<IContainer> | null // Child node
  styleConfig?: IStyleConfig // Style configuration will appear in the operation bar on the right side of the editor
  attrsConfig?: string[] // Other properties will appear in the operation bar on the right side of the editor
  vmodel?: string // Binding data, For input
  text?: string // Text node
  style?: string // Style configuration
  className?: string // Element class name
  placeholder?: string // For input
  vfor?: string // Cyclic element，Similar to v-for
  vif?: string // Display，Similar to v-if
  eventConfig?: string[] // Does the right side of the editor display an array of event attribute keys['onClick', 'onChange', ...]
  onClick?: string // Click event
  [propName: string]: any
}
// Style configuration will appear in the operation bar on the right side of the editor
interface IStyleConfig {
  width?: number | string
  height?: number | string
  left?: number | string
  right?: number | string
  position?: number | string
  [prop: string]: any
}

getBasicLayout

Get a basic page "layout" configuration

const layout = Kui.getBasicLayout()

disposeConfig

Configuration that might be used in the generated page

// You can also configure APIs related to axios or router here
Kui.disposeConfig.set('key', 'value')

Use examples

如果使用 TS 开发，项目提示类型错误，请拷贝 node_modules/v3-json-canvas/v3-json-canvas.d.ts 到根目录

entrance

/** main.js **/
import { createApp } from 'vue'
import App from './App.vue'
import Kui from 'v3-json-canvas'
import 'v3-json-canvas/dist/kui.css'
import router from './router'
createApp(App).use(Kui).mount('#app')

// Configure additional objects that need to be used in the editor
// You can also configure APIs related to axios or router here
Kui.disposeConfig.set('router', router)
Kui.disposeConfig.set('store', store)

// Register additional components or labels that can be dragged by configuration
const registerObj = Kui.registerLayout()
registerObj.register('b', {
  compLabel: 'b　用户注册标签',
  dropedInfo: {
    tag: 'b',
    iscontainer: false,
    styleConfig: { position: 'absolute', 'z-index': 200, color: '#333', 'font-size': 14, width: 'auto', height: 'auto' },
    attrsConfig: ['text'],
    text: '这是一个用户注册b标签',
    eventConfig: ['onClick']
  }
})

Build a separate page or component

<template>
  <div>
    <div v-if="!isEdit && screenWidth >= 480" style="margin: 0px; position: fixed; right: 30px; top: 10px; z-index: 1000">
      <KButton @Click="closeCanvas">edit</KButton>
    </div>
    <KJsonEdit :layout="layout" :mock="mock" @close-canvas="closeCanvas" @submit-option="submitOption" v-if="isEdit" />
    <KJsonParse :layout="layout" :mock="mock" :editor="false" v-else />
  </div>
</template>

<script lang="ts">
  import { defineComponent, onBeforeMount, reactive, toRefs } from 'vue'
  import Kui from 'v3-json-canvas'

  export default defineComponent({
    name: 'JsonTest',
    setup() {
      const state = reactive({
        isEdit: true, // Is it in editing state
        layout: Kui.getBasicLayout(), // Get basic layout configuration
        mock: {} // Initial mock data
      })
      onBeforeMount(async () => {
        // Simulate remote data acquisition
        try {
          state.layout = await require('./layout.json')
          state.mock = await require('./data.json')
        } catch (error) {
          // ...
        }
      })
      // Close canvas
      function closeCanvas() {
        console.log(state)
        state.isEdit = !state.isEdit
      }
      // Submit editing results
      function submitOption(arg: { mock: any; layout: any }) {
        state.mock = arg.mock || {}
        state.layout = arg.layout
        console.log('submit data：', arg)
      }
      return {
        closeCanvas,
        submitOption,
        ...toRefs(state),
        screenWidth: window.innerWidth
      }
    }
  })
</script>