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