bqy_fe
3 years ago
parent
5f99924474
commit
f387fa8993
@ -0,0 +1,29 @@ |
|||||||
|
// generated by vite-plugin-components
|
||||||
|
// read more https://github.com/vuejs/vue-next/pull/3399
|
||||||
|
|
||||||
|
declare module 'vue' { |
||||||
|
export interface GlobalComponents { |
||||||
|
ElHeader: typeof import('element-plus/es/el-header')['default'] |
||||||
|
ElAside: typeof import('element-plus/es/el-aside')['default'] |
||||||
|
ElMain: typeof import('element-plus/es/el-main')['default'] |
||||||
|
ElContainer: typeof import('element-plus/es/el-container')['default'] |
||||||
|
ElCol: typeof import('element-plus/es/el-col')['default'] |
||||||
|
ElButton: typeof import('element-plus/es/el-button')['default'] |
||||||
|
ElTooltip: typeof import('element-plus/es/el-tooltip')['default'] |
||||||
|
ElRow: typeof import('element-plus/es/el-row')['default'] |
||||||
|
ElPopover: typeof import('element-plus/es/el-popover')['default'] |
||||||
|
ElTabPane: typeof import('element-plus/es/el-tab-pane')['default'] |
||||||
|
ElTabs: typeof import('element-plus/es/el-tabs')['default'] |
||||||
|
ElDialog: typeof import('element-plus/es/el-dialog')['default'] |
||||||
|
ElTag: typeof import('element-plus/es/el-tag')['default'] |
||||||
|
ElDropdownItem: typeof import('element-plus/es/el-dropdown-item')['default'] |
||||||
|
ElDropdownMenu: typeof import('element-plus/es/el-dropdown-menu')['default'] |
||||||
|
ElDropdown: typeof import('element-plus/es/el-dropdown')['default'] |
||||||
|
ElTree: typeof import('element-plus/es/el-tree')['default'] |
||||||
|
ElInput: typeof import('element-plus/es/el-input')['default'] |
||||||
|
ElFormItem: typeof import('element-plus/es/el-form-item')['default'] |
||||||
|
ElForm: typeof import('element-plus/es/el-form')['default'] |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export {} |
||||||
@ -1,62 +0,0 @@ |
|||||||
<!-- |
|
||||||
* @Author: 卜启缘 |
|
||||||
* @Date: 2021-06-01 13:30:22 |
|
||||||
* @LastEditTime: 2021-06-14 00:21:31 |
|
||||||
* @LastEditors: 卜启缘 |
|
||||||
* @Description: 手机模拟器 |
|
||||||
* @FilePath: \vite-vue3-lowcode\src\visual-editor\components\common\simulator.vue |
|
||||||
--> |
|
||||||
<template> |
|
||||||
<div class="simulator-container"> |
|
||||||
<div class="simulator-editor"> |
|
||||||
<div class="simulator-editor-content"> |
|
||||||
<slot></slot> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script lang="tsx"> |
|
||||||
import { defineComponent } from 'vue' |
|
||||||
|
|
||||||
export default defineComponent({ |
|
||||||
name: 'Simulator' |
|
||||||
}) |
|
||||||
</script> |
|
||||||
<style lang="scss" scoped> |
|
||||||
.simulator-container { |
|
||||||
display: flex; |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
padding-right: 240px; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
|
|
||||||
@media (max-width: 1314px) { |
|
||||||
padding-right: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.simulator-editor { |
|
||||||
width: 560px; |
|
||||||
height: 640px; |
|
||||||
min-width: 560px; |
|
||||||
padding: 10px 100px; |
|
||||||
overflow: hidden auto; |
|
||||||
background: #fafafa; |
|
||||||
border-radius: 5px; |
|
||||||
transform: translate(0); |
|
||||||
box-sizing: border-box; |
|
||||||
background-clip: content-box; |
|
||||||
contain: layout; |
|
||||||
|
|
||||||
&::-webkit-scrollbar { |
|
||||||
width: 0; |
|
||||||
} |
|
||||||
|
|
||||||
&-content { |
|
||||||
min-height: 100%; |
|
||||||
box-shadow: 0 8px 12px #ebedf0; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,8 +1,49 @@ |
|||||||
/* |
/* |
||||||
* @Author: 卜启缘 |
* @Author: 卜启缘 |
||||||
* @Date: 2021-06-13 22:07:29 |
* @Date: 2021-06-13 22:07:29 |
||||||
* @LastEditTime: 2021-06-14 18:18:51 |
* @LastEditTime: 2021-06-24 00:23:39 |
||||||
* @LastEditors: 卜启缘 |
* @LastEditors: 卜启缘 |
||||||
* @Description: 当前页面配置 |
* @Description: 当前页面配置 |
||||||
* @FilePath: \vite-vue3-lowcode\src\visual-editor\components\right-attribute-panel\components\page-setting\pageSetting.tsx |
* @FilePath: \vite-vue3-lowcode\src\visual-editor\components\right-attribute-panel\components\page-setting\pageSetting.tsx |
||||||
*/ |
*/ |
||||||
|
import { defineComponent } from 'vue' |
||||||
|
import { ElForm, ElFormItem, ElInput, ElUpload, ElColorPicker } from 'element-plus' |
||||||
|
import styles from './styles.module.scss' |
||||||
|
import { useVisualData } from '@/visual-editor/hooks/useVisualData' |
||||||
|
|
||||||
|
export const PageSetting = defineComponent({ |
||||||
|
setup() { |
||||||
|
const { currentPage } = useVisualData() |
||||||
|
|
||||||
|
const pageConfig = currentPage.value.config |
||||||
|
|
||||||
|
const beforeUpload = (file: File) => { |
||||||
|
console.log(file, '要上传的文件') |
||||||
|
const fileReader = new FileReader() |
||||||
|
fileReader.onload = (event) => { |
||||||
|
pageConfig.bgImage = event.target?.result as string |
||||||
|
} |
||||||
|
fileReader.readAsDataURL(file) |
||||||
|
} |
||||||
|
|
||||||
|
return () => ( |
||||||
|
<> |
||||||
|
<ElForm> |
||||||
|
<ElFormItem label="背景颜色"> |
||||||
|
<ElColorPicker v-model={pageConfig.bgColor} /> |
||||||
|
</ElFormItem> |
||||||
|
<ElFormItem label="背景图片"> |
||||||
|
<ElInput v-model={pageConfig.bgImage} placeholder={'图片地址'} /> |
||||||
|
</ElFormItem> |
||||||
|
<ElUpload action={''} beforeUpload={beforeUpload} class={styles.upload}> |
||||||
|
{pageConfig.bgImage ? ( |
||||||
|
<img src={pageConfig.bgImage} /> |
||||||
|
) : ( |
||||||
|
<i class="el-icon-plus uploader-icon"></i> |
||||||
|
)} |
||||||
|
</ElUpload> |
||||||
|
</ElForm> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
}) |
||||||
|
|||||||
@ -0,0 +1,20 @@ |
|||||||
|
.upload { |
||||||
|
:global { |
||||||
|
.el-upload { |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
cursor: pointer; |
||||||
|
border: 1px dashed #d9d9d9; |
||||||
|
border-radius: 6px; |
||||||
|
} |
||||||
|
|
||||||
|
.uploader-icon { |
||||||
|
width: 178px; |
||||||
|
height: 178px; |
||||||
|
font-size: 28px; |
||||||
|
line-height: 178px; |
||||||
|
color: #8c939d; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue