bqy_fe
4 years ago
parent
925d71cc5a
commit
ea986f3e6e
@ -0,0 +1,19 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<router-view #="{ Component }"> |
||||||
|
<component :is="Component" /> |
||||||
|
</router-view> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts"> |
||||||
|
export default { |
||||||
|
name: 'App' |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
body::-webkit-scrollbar { |
||||||
|
width: 0; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8" /> |
||||||
|
<link rel="icon" href="/favicon.ico" /> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||||
|
<title>第二个页面</title> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="app"></div> |
||||||
|
<script type="module" src="./main.ts"></script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
import { createApp } from 'vue' |
||||||
|
import App from './App.vue' |
||||||
|
|
||||||
|
import router from './router' |
||||||
|
|
||||||
|
import '@/plugins/vant' |
||||||
|
|
||||||
|
const app = createApp(App) |
||||||
|
|
||||||
|
app.config.globalProperties.$$refs = {} |
||||||
|
|
||||||
|
// if (import.meta.env.DEV) {
|
||||||
|
window.$$refs = app.config.globalProperties.$$refs |
||||||
|
// }
|
||||||
|
|
||||||
|
app.use(router).mount('#app') |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router' |
||||||
|
|
||||||
|
const routes: Array<RouteRecordRaw> = [ |
||||||
|
{ |
||||||
|
path: '/:pathMatch(.*)*', |
||||||
|
component: () => import('./views/preview.vue') |
||||||
|
} |
||||||
|
] |
||||||
|
|
||||||
|
const router = createRouter({ |
||||||
|
history: createWebHashHistory(), |
||||||
|
routes |
||||||
|
}) |
||||||
|
|
||||||
|
export default router |
||||||
@ -0,0 +1,27 @@ |
|||||||
|
import { defineComponent } from 'vue' |
||||||
|
|
||||||
|
export default defineComponent({ |
||||||
|
name: 'CompRender', |
||||||
|
props: { |
||||||
|
element: { |
||||||
|
type: Object, |
||||||
|
default: () => ({}) |
||||||
|
}, |
||||||
|
config: { |
||||||
|
type: Object, |
||||||
|
default: () => ({}) |
||||||
|
} |
||||||
|
}, |
||||||
|
setup(props) { |
||||||
|
return () => { |
||||||
|
const component = props.config.componentMap[props.element.componentKey] |
||||||
|
return component.render({ |
||||||
|
size: {}, |
||||||
|
props: props.element.props || {}, |
||||||
|
model: {}, |
||||||
|
block: props.element, |
||||||
|
custom: {} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
@ -0,0 +1,67 @@ |
|||||||
|
<template> |
||||||
|
<template v-for="outItem in jsonData" :key="outItem._vid"> |
||||||
|
<slot-item :element="outItem" :config="visualConfig" /> |
||||||
|
</template> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="tsx"> |
||||||
|
import { defineComponent, PropType, reactive, toRefs } from 'vue' |
||||||
|
import { visualConfig } from '@/visual.config' |
||||||
|
import SlotItem from './slot-item.vue' |
||||||
|
/** |
||||||
|
* @name: preview |
||||||
|
* @author: 卜启缘 |
||||||
|
* @date: 2021/4/29 23:09 |
||||||
|
* @description：preview |
||||||
|
* @update: 2021/4/29 23:09 |
||||||
|
*/ |
||||||
|
export default defineComponent({ |
||||||
|
name: 'Preview', |
||||||
|
components: { |
||||||
|
SlotItem |
||||||
|
}, |
||||||
|
emits: ['update:visible'], |
||||||
|
setup(props) { |
||||||
|
const state = reactive({ |
||||||
|
jsonData: JSON.parse(sessionStorage.getItem('blocks') || '{}') |
||||||
|
}) |
||||||
|
|
||||||
|
// 渲染组件 |
||||||
|
const renderCom = (element) => { |
||||||
|
if (Array.isArray(element)) { |
||||||
|
return element.map((item) => renderCom(item)) |
||||||
|
} |
||||||
|
const component = props.config.componentMap[element.componentKey] |
||||||
|
|
||||||
|
return component.render({ |
||||||
|
size: {}, |
||||||
|
props: element.props || {}, |
||||||
|
block: element, |
||||||
|
model: {}, |
||||||
|
custom: {} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
...toRefs(state), |
||||||
|
visualConfig, |
||||||
|
renderCom |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.h5-preview { |
||||||
|
overflow: hidden; |
||||||
|
.el-dialog__header { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.simulator { |
||||||
|
padding-right: 0; |
||||||
|
&::-webkit-scrollbar { |
||||||
|
width: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,31 +0,0 @@ |
|||||||
import { NumberRange } from './number-range' |
|
||||||
import { VisualEditorComponent } from '@/visual-editor/visual-editor.utils' |
|
||||||
|
|
||||||
export default { |
|
||||||
key: 'number-range', |
|
||||||
moduleName: 'baseWidgets', |
|
||||||
label: '数字范围输入框', |
|
||||||
resize: { |
|
||||||
width: true |
|
||||||
}, |
|
||||||
preview: () => <NumberRange style={{ width: '100%' }} />, |
|
||||||
render: ({ model, size }) => { |
|
||||||
return ( |
|
||||||
<NumberRange |
|
||||||
style={{ |
|
||||||
width: size.width ? `${size.width}px` : null |
|
||||||
}} |
|
||||||
{...{ |
|
||||||
start: model.start.value, |
|
||||||
'onUpdate:start': model.start.onChange, |
|
||||||
end: model.end.value, |
|
||||||
'onUpdate:end': model.end.onChange |
|
||||||
}} |
|
||||||
/> |
|
||||||
) |
|
||||||
}, |
|
||||||
model: { |
|
||||||
start: '起始绑定字段', |
|
||||||
end: '截止绑定字段' |
|
||||||
} |
|
||||||
} as VisualEditorComponent |
|
||||||
@ -1,24 +0,0 @@ |
|||||||
.number-range { |
|
||||||
display: inline-flex; |
|
||||||
width: 225px; |
|
||||||
min-height: 40px; |
|
||||||
align-items: stretch; |
|
||||||
|
|
||||||
& > div { |
|
||||||
flex: 1; |
|
||||||
|
|
||||||
input { |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
box-sizing: border-box; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
span { |
|
||||||
margin: 0 8px; |
|
||||||
display: inline-flex; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,30 +0,0 @@ |
|||||||
import { defineComponent } from 'vue' |
|
||||||
import { useVModel } from '@vueuse/core' |
|
||||||
import './number-range.scss' |
|
||||||
|
|
||||||
export const NumberRange = defineComponent({ |
|
||||||
props: { |
|
||||||
start: { type: String }, |
|
||||||
end: { type: String } |
|
||||||
}, |
|
||||||
emits: { |
|
||||||
'update:start': (_?: string) => true, |
|
||||||
'update:end': (_?: string) => true |
|
||||||
}, |
|
||||||
setup(props) { |
|
||||||
const startModel = useVModel(props, 'start') |
|
||||||
const endModel = useVModel(props, 'end') |
|
||||||
|
|
||||||
return () => ( |
|
||||||
<div class="number-range"> |
|
||||||
<div> |
|
||||||
<input type="text" v-model={startModel.value} /> |
|
||||||
</div> |
|
||||||
<span>~</span> |
|
||||||
<div> |
|
||||||
<input type="text" v-model={endModel.value} /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
}) |
|
||||||
@ -1,37 +0,0 @@ |
|||||||
import { ElOption, ElSelect } from 'element-plus' |
|
||||||
import { createEditorTableProp } from '@/visual-editor/visual-editor.props' |
|
||||||
import { VisualEditorComponent } from '@/visual-editor/visual-editor.utils' |
|
||||||
|
|
||||||
export default { |
|
||||||
key: 'select', |
|
||||||
moduleName: 'baseWidgets', |
|
||||||
label: '下拉框', |
|
||||||
preview: () => <ElSelect />, |
|
||||||
render: ({ props, model, custom }) => ( |
|
||||||
<ElSelect |
|
||||||
{...custom} |
|
||||||
key={(props.options || []).map((opt: any) => opt.value).join(',')} |
|
||||||
{...model.default} |
|
||||||
> |
|
||||||
{(props.options || []).map((opt: { label: string; value: string }, index: number) => ( |
|
||||||
<ElOption label={opt.label} value={opt.value} key={index} /> |
|
||||||
))} |
|
||||||
</ElSelect> |
|
||||||
), |
|
||||||
props: { |
|
||||||
options: createEditorTableProp({ |
|
||||||
label: '下拉选项', |
|
||||||
option: { |
|
||||||
options: [ |
|
||||||
{ label: '显示值', field: 'label' }, |
|
||||||
{ label: '绑定值', field: 'value' }, |
|
||||||
{ label: '备注', field: 'comments' } |
|
||||||
], |
|
||||||
showKey: 'label' |
|
||||||
} |
|
||||||
}) |
|
||||||
}, |
|
||||||
model: { |
|
||||||
default: '绑定字段' |
|
||||||
} |
|
||||||
} as VisualEditorComponent |
|
||||||
@ -0,0 +1,8 @@ |
|||||||
|
/** |
||||||
|
* @name: index |
||||||
|
* @author: 卜启缘 |
||||||
|
* @date: 2021/5/6 0:04 |
||||||
|
* @description：index |
||||||
|
* @update: 2021/5/6 0:04 |
||||||
|
*/ |
||||||
|
export const BASE_URL = import.meta.env.BASE_URL |
||||||
Loading…
Reference in new issue