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