k
/
vite-vue3-lowcode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: page data local key

Browse Source
pull/4/head
bqy_fe 4 years ago
parent a0482d493b
commit 25b3d69041
8 changed files with 53 additions and 8 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 10
      README.md
  2. 2
      preview/index.html
  3. 12
      preview/router.ts
  4. 6
      preview/views/preview.vue
  5. 14
      src/enums/index.ts
  6. 2
      src/packages/container-component/index.ts
  7. 10
      src/visual-editor/components/left-aside/components/page-tree/index.vue
  8. 5
      src/visual-editor/hooks/useVisualData.ts

10
README.md
Unescape View File

@ -32,6 +32,16 @@
目前在使用表单时，需要把相关的`表单控件`放到`表单容器`内部，并且需要将`按钮`放到`表单容器`内， 目前在使用表单时，需要把相关的`表单控件`放到`表单容器`内部，并且需要将`按钮`放到`表单容器`内，
然后再讲`按钮的type`设置为`表单提交按钮`这时候点击提交按钮才会自动收集表单容器内部的所有字段和值 然后再讲`按钮的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` 增加新功能 - `feat` 增加新功能

2
preview/index.html
Unescape View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>第二个页面</title> <title>效果页</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

12
preview/router.ts
Unescape View File

@ -1,4 +1,6 @@
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router' import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import { VisualEditorModelValue } from '@/visual-editor/visual-editor.utils'
import { CacheEnum } from '@/enums'
const routes: Array<RouteRecordRaw> = [ const routes: Array<RouteRecordRaw> = [
{ {
@ -12,4 +14,14 @@ const router = createRouter({
routes 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 export default router

6
preview/views/preview.vue
Unescape View File

@ -8,6 +8,7 @@
import { defineComponent, reactive, toRefs } from 'vue' import { defineComponent, reactive, toRefs } from 'vue'
import { Toast } from 'vant' import { Toast } from 'vant'
import { visualConfig } from '@/visual.config' import { visualConfig } from '@/visual.config'
import { CacheEnum } from '@/enums'
import { VisualEditorModelValue } from '@/visual-editor/visual-editor.utils' import { VisualEditorModelValue } from '@/visual-editor/visual-editor.utils'
import SlotItem from './slot-item.vue' import SlotItem from './slot-item.vue'
import router from '../router' import router from '../router'
@ -25,7 +26,10 @@ export default defineComponent({
SlotItem SlotItem
}, },
setup() { 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)) { if (!jsonData || !Object.keys(jsonData.pages)) {
Toast.fail('当前没有可以预览的页面！') Toast.fail('当前没有可以预览的页面！')
} }

14
src/enums/index.ts
Unescape View File

@ -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'
}

2
src/packages/container-component/index.ts
Unescape View File

@ -7,5 +7,5 @@ Object.keys(modules).forEach((key: string) => {
components[name] = modules[key]?.default || modules[key] components[name] = modules[key]?.default || modules[key]
}) })
console.log(components, 'base-widgets') console.log(components, 'container-component')
export default components export default components

10
src/visual-editor/components/left-aside/components/page-tree/index.vue
Unescape View File

@ -68,6 +68,7 @@
import { defineComponent, reactive, computed, toRefs } from 'vue' import { defineComponent, reactive, computed, toRefs } from 'vue'
import { useVisualData } from '@/visual-editor/hooks/useVisualData' import { useVisualData } from '@/visual-editor/hooks/useVisualData'
import { useRouter, useRoute } from 'vue-router' import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
export default defineComponent({ export default defineComponent({
name: 'PageTree', name: 'PageTree',
@ -137,6 +138,9 @@ export default defineComponent({
// 新增或编辑页面 // 新增或编辑页面
const onSubmit = async () => { const onSubmit = async () => {
const { title, path } = state.form const { title, path } = state.form
if (title.trim() == '' || path.trim() == '') {
return ElMessage.error('标题或路径不能为空！')
}
if (state.operatePageData) { if (state.operatePageData) {
updatePage({ newPath: path, oldPath: state.operatePageData.path || path, page: { title } }) updatePage({ newPath: path, oldPath: state.operatePageData.path || path, page: { title } })
await router.replace(path) await router.replace(path)
@ -164,11 +168,11 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.custom-tree-node { .custom-tree-node {
flex: 1;
display: flex; display: flex;
padding-right: 8px;
font-size: 14px;
flex: 1;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
font-size: 14px;
padding-right: 8px;
} }
</style> </style>

5
src/visual-editor/hooks/useVisualData.ts
Unescape View File

@ -15,9 +15,10 @@ import {
} from '@/visual-editor/visual-editor.utils' } from '@/visual-editor/visual-editor.utils'
import { visualConfig } from '@/visual.config' import { visualConfig } from '@/visual.config'
import { CacheEnum } from '@/enums'
// 保存到本地JSON数据的key // 保存到本地JSON数据的key
export const localKey = 'jsonData' export const localKey = CacheEnum.PAGE_DATA_KEY
// 注入jsonData的key // 注入jsonData的key
export const injectKey = Symbol('injectKey') export const injectKey = Symbol('injectKey')
@ -41,7 +42,7 @@ export interface VisualData {
export const initVisualData = (): VisualData => { export const initVisualData = (): VisualData => {
const jsonData: VisualEditorModelValue = JSON.parse( const jsonData: VisualEditorModelValue = JSON.parse(
sessionStorage.getItem('jsonData') as string sessionStorage.getItem(localKey) as string
) || { ) || {
container: { container: {
width: 360, width: 360,

Write Preview
Loading…
Cancel
Save