You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

77 lines
2.4 KiB

/*
* @Author: 卜启缘
* @Date: 2021-06-01 13:22:14
* @LastEditTime: 2021-06-24 11:21:35
* @LastEditors: 卜启缘
* @Description: 属性编辑器
* @FilePath: \vite-vue3-lowcode\src\visual-editor\components\right-attribute-panel\index.tsx
* RightAttributePanel
*/
import { defineComponent, reactive } from 'vue'
import styles from './index.module.scss'
import { ElTabPane, ElTabs } from 'element-plus'
import MonacoEditor from '../common/monaco-editor/MonacoEditor'
import { useVisualData } from '@/visual-editor/hooks/useVisualData'
import { AttrEditor, Animate, PageSetting, EventAction } from './components'
export default defineComponent({
name: 'RightAttributePanel',
setup() {
const { currentBlock } = useVisualData()
const state = reactive({
activeName: 'attr',
isOpen: true
})
const handleSchemaChange = (val) => {
try {
const newObj = JSON.parse(val)
Object.assign(currentBlock.value, newObj)
} catch (e) {
console.log('JSON格式有误:', e)
}
}
return () => (
<>
<div class={[styles.drawer, { [styles.isOpen]: state.isOpen }]}>
<div class={styles.floatingActionBtn} onClick={() => (state.isOpen = !state.isOpen)}>
<i class={`el-icon-d-arrow-${state.isOpen ? 'right' : 'left'}`}></i>
</div>
<div class={styles.attrs}>
<ElTabs
v-model={state.activeName}
type="border-card"
stretch={true}
class={styles.tabs}
>
<ElTabPane label="属性" name="attr">
<AttrEditor />
</ElTabPane>
<ElTabPane label="动画" name="animate" lazy>
<Animate />
</ElTabPane>
<ElTabPane label="事件" name="events">
<EventAction />
</ElTabPane>
<ElTabPane label="JSON" name="json" lazy>
<MonacoEditor
code={JSON.stringify(currentBlock.value)}
layout={{ width: 360, height: 800 }}
vid={state.activeName == 'json' ? currentBlock.value._vid : -1}
onChange={handleSchemaChange}
title=""
/>
</ElTabPane>
<ElTabPane label="页面设置" name="page-setting">
<PageSetting />
</ElTabPane>
</ElTabs>
</div>
</div>
</>
)
}
})