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: 卜启缘 |
||||
* @Date: 2021-06-13 22:07:29 |
||||
* @LastEditTime: 2021-06-14 18:18:51 |
||||
* @LastEditTime: 2021-06-24 00:23:39 |
||||
* @LastEditors: 卜启缘 |
||||
* @Description: 当前页面配置 |
||||
* @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