v3-json-canvas
v0.1.13
Published
UI Components built on Vue3, Generating HTML 5 pages through JSON
Downloads
62
Maintainers
Readme
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>