bqy_fe
5 years ago
31 changed files with 774 additions and 547 deletions
@ -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; |
|||
} |
|||
} |
|||
} |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue