refactor: page data local key
This commit is contained in:
bqy_fe
parent
a0482d493b
commit
25b3d69041
10
README.md
10
README.md
|
|
@ -32,6 +32,16 @@
|
|||
目前在使用表单时，需要把相关的`表单控件`放到`表单容器`内部，并且需要将`按钮`放到`表单容器`内，
|
||||
然后再讲`按钮的type`设置为`表单提交按钮`这时候点击提交按钮才会自动收集表单容器内部的所有字段和值
|
||||
|
||||
## 浏览器支持
|
||||
|
||||
本地开发推荐使用`Chrome 80+` 浏览器
|
||||
|
||||
支持现代浏览器, 不支持 IE
|
||||
|
||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
|
||||
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
|
||||
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
|
||||
|
||||
### 提交规范
|
||||
|
||||
- `feat` 增加新功能
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>第二个页面</title>
|
||||
<title>效果页</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
|
||||
import { VisualEditorModelValue } from '@/visual-editor/visual-editor.utils'
|
||||
import { CacheEnum } from '@/enums'
|
||||
|
||||
const routes: Array<RouteRecordRaw> = [
|
||||
{
|
||||
|
|
@ -12,4 +14,14 @@ const router = createRouter({
|
|||
routes
|
||||
})
|
||||
|
||||
// 获取本地缓存的页面数据
|
||||
const jsonData: VisualEditorModelValue = JSON.parse(
|
||||
localStorage.getItem(CacheEnum.PAGE_DATA_KEY) as string
|
||||
)
|
||||
|
||||
router.beforeEach((to) => {
|
||||
document.title = jsonData?.pages?.[to.path]?.title ?? document.title
|
||||
return true
|
||||
})
|
||||
|
||||
export default router
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
import { defineComponent, reactive, toRefs } from 'vue'
|
||||
import { Toast } from 'vant'
|
||||
import { visualConfig } from '@/visual.config'
|
||||
import { CacheEnum } from '@/enums'
|
||||
import { VisualEditorModelValue } from '@/visual-editor/visual-editor.utils'
|
||||
import SlotItem from './slot-item.vue'
|
||||
import router from '../router'
|
||||
|
|
@ -25,7 +26,10 @@ export default defineComponent({
|
|||
SlotItem
|
||||
},
|
||||
setup() {
|
||||
const jsonData: VisualEditorModelValue = JSON.parse(localStorage.getItem('jsonData') as string)
|
||||
const jsonData: VisualEditorModelValue = JSON.parse(
|
||||
localStorage.getItem(CacheEnum.PAGE_DATA_KEY) as string
|
||||
)
|
||||
|
||||
if (!jsonData || !Object.keys(jsonData.pages)) {
|
||||
Toast.fail('当前没有可以预览的页面！')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
/**
|
||||
* @name: index
|
||||
* @author: 卜启缘
|
||||
* @date: 2021/5/26 22:55
|
||||
* @description：常用的枚举类型
|
||||
* @update: 2021/5/26 22:55
|
||||
*/
|
||||
|
||||
/**
|
||||
* @description 本地缓存枚举
|
||||
*/
|
||||
export enum CacheEnum {
|
||||
PAGE_DATA_KEY = 'PAGE_DATA_KEY'
|
||||
}
|
||||
|
|
@ -7,5 +7,5 @@ Object.keys(modules).forEach((key: string) => {
|
|||
components[name] = modules[key]?.default || modules[key]
|
||||
})
|
||||
|
||||
console.log(components, 'base-widgets')
|
||||
console.log(components, 'container-component')
|
||||
export default components
|
||||
|
|
|
|||
|
|
@ -68,6 +68,7 @@
|
|||
import { defineComponent, reactive, computed, toRefs } from 'vue'
|
||||
import { useVisualData } from '@/visual-editor/hooks/useVisualData'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'PageTree',
|
||||
|
|
@ -137,6 +138,9 @@ export default defineComponent({
|
|||
// 新增或编辑页面
|
||||
const onSubmit = async () => {
|
||||
const { title, path } = state.form
|
||||
if (title.trim() == '' || path.trim() == '') {
|
||||
return ElMessage.error('标题或路径不能为空！')
|
||||
}
|
||||
if (state.operatePageData) {
|
||||
updatePage({ newPath: path, oldPath: state.operatePageData.path || path, page: { title } })
|
||||
await router.replace(path)
|
||||
|
|
@ -164,11 +168,11 @@ export default defineComponent({
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding-right: 8px;
|
||||
font-size: 14px;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,9 +15,10 @@ import {
|
|||
} from '@/visual-editor/visual-editor.utils'
|
||||
|
||||
import { visualConfig } from '@/visual.config'
|
||||
import { CacheEnum } from '@/enums'
|
||||
|
||||
// 保存到本地JSON数据的key
|
||||
export const localKey = 'jsonData'
|
||||
export const localKey = CacheEnum.PAGE_DATA_KEY
|
||||
|
||||
// 注入jsonData的key
|
||||
export const injectKey = Symbol('injectKey')
|
||||
|
|
@ -41,7 +42,7 @@ export interface VisualData {
|
|||
|
||||
export const initVisualData = (): VisualData => {
|
||||
const jsonData: VisualEditorModelValue = JSON.parse(
|
||||
sessionStorage.getItem('jsonData') as string
|
||||
sessionStorage.getItem(localKey) as string
|
||||
) || {
|
||||
container: {
|
||||
width: 360,
|
||||
|
|
|
|||
Loading…
Reference in New Issue