mirror of
https://gitee.com/was666/as-editor.git
synced 2025-04-28 08:10:11 +08:00
refactor: /src/layout/home 使用script setup语法糖重构
This commit is contained in:
‘Aos’
parent
f39617a52e
commit
cac11ba326
@ -23,10 +23,11 @@ module.exports = {
|
||||
'no-useless-return': 'off',
|
||||
'no-unreachable': 'off', // 禁止在 return、throw、continue 和 break 语句后出现不可达代码
|
||||
'no-new-object': 'off', // 禁止使用 Object 构造函数
|
||||
"vue/no-v-model-argument": "off",
|
||||
'vue/no-v-model-argument': 'off',
|
||||
'no-prototype-builtins': 'off',
|
||||
'vue/no-mutating-props': 'off',
|
||||
'vue/script-setup-uses-vars': 'off'
|
||||
'vue/script-setup-uses-vars': 'off',
|
||||
'no-unused-vars': 0,
|
||||
},
|
||||
parser: 'vue-eslint-parser',
|
||||
}
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
</p>
|
||||
<div>
|
||||
<el-button @click="reloads" type="danger">重置</el-button>
|
||||
<el-button @click="realTimeView.show = true">预览</el-button>
|
||||
<el-button @click="realTimeViewData.show = true">预览</el-button>
|
||||
<el-button @click="catJson">查看JSON </el-button>
|
||||
<el-button @click="$refs.file.click()">导入JSON </el-button>
|
||||
<el-button @click="exportJSON">导出JSON </el-button>
|
||||
@ -138,7 +138,7 @@
|
||||
</div>
|
||||
</section>
|
||||
<realTimeView
|
||||
:datas="realTimeView"
|
||||
:datas="realTimeViewData"
|
||||
:val="{
|
||||
id,
|
||||
name: pageSetup.name,
|
||||
@ -149,7 +149,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import utils from 'utils/index' // 方法类
|
||||
import componentProperties from '@/utils/componentProperties' // 组件数据
|
||||
import FileSaver from 'file-saver' // 导出JSON
|
||||
@ -157,14 +157,11 @@ import { reactive, watch, toRefs, inject } from 'vue'
|
||||
import { ElMessageBox, ElMessage } from 'element-plus'
|
||||
import vuedraggable from 'vuedraggable' //拖拽组件
|
||||
|
||||
export default {
|
||||
name: 'home',
|
||||
setup() {
|
||||
// 是否显示预览
|
||||
const realTimeView = reactive({ show: false })
|
||||
// 是否显示预览
|
||||
const realTimeViewData = reactive({ show: false })
|
||||
|
||||
// 页面数据
|
||||
const datas = reactive({
|
||||
// 页面数据
|
||||
const datas = reactive({
|
||||
id: null, //当前页面id
|
||||
pageSetup: {
|
||||
// 页面设置属性
|
||||
@ -177,10 +174,10 @@ export default {
|
||||
bgImg: '', // 背景图片
|
||||
},
|
||||
pageComponents: [], //页面组件
|
||||
})
|
||||
})
|
||||
|
||||
// 查看JSON
|
||||
const catJson = () => {
|
||||
// 查看JSON
|
||||
const catJson = () => {
|
||||
ElMessageBox.alert(
|
||||
`{
|
||||
<br/>
|
||||
@ -201,10 +198,10 @@ export default {
|
||||
callback: () => {},
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// 导出json
|
||||
const exportJSON = () => {
|
||||
// 导出json
|
||||
const exportJSON = () => {
|
||||
// 将json转换成字符串
|
||||
const data = JSON.stringify({
|
||||
id: datas.id,
|
||||
@ -214,10 +211,10 @@ export default {
|
||||
})
|
||||
const blob = new Blob([data], { type: '' })
|
||||
FileSaver.saveAs(blob, `${datas.pageSetup.name}.json`)
|
||||
}
|
||||
}
|
||||
|
||||
// 导入json
|
||||
const importJSON = () => {
|
||||
// 导入json
|
||||
const importJSON = () => {
|
||||
const file = document.getElementById('file').files[0]
|
||||
const reader = new FileReader()
|
||||
reader.readAsText(file)
|
||||
@ -232,34 +229,34 @@ export default {
|
||||
_this.pageSetup = JSON.parse(ImportJSON.templateJson)
|
||||
_this.pageComponents = JSON.parse(ImportJSON.component)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 切换组件位置 用于组件管理中删除功能
|
||||
*
|
||||
* @param {Object} res 组件切换后返回的位置
|
||||
*/
|
||||
const componenmanagement = (res) => {
|
||||
const componenmanagement = (res) => {
|
||||
datas.pageComponents = res
|
||||
}
|
||||
}
|
||||
|
||||
// 选择组件数据
|
||||
const choose = reactive({
|
||||
deleShow: true, //删除标签显示
|
||||
index: '', //当前选中的index
|
||||
rightcom: 'decorate', //右侧组件切换
|
||||
currentproperties: {}, //当前属性
|
||||
// 选择组件数据
|
||||
const choose = reactive({
|
||||
deleShow: true, // 删除标签显示
|
||||
index: '', // 当前选中的index
|
||||
rightcom: 'decorate', // 右侧组件切换
|
||||
currentproperties: datas.pageSetup, // 当前属性 默认：页面设置
|
||||
offsetY: 0, //记录上一次距离父元素高度
|
||||
onlyOne: ['1-5', '1-16'], // 只能存在一个的组件(组件的type)
|
||||
pointer: { show: false }, //穿透
|
||||
})
|
||||
pointer: { show: false }, // 穿透
|
||||
})
|
||||
|
||||
/**
|
||||
/**
|
||||
* 选择组件
|
||||
*
|
||||
* @param {Object} res 当前组件对象
|
||||
*/
|
||||
const activeComponent = (res, index) => {
|
||||
const activeComponent = (res, index) => {
|
||||
choose.index = index
|
||||
/* 切换组件 */
|
||||
choose.rightcom = res.style
|
||||
@ -274,31 +271,35 @@ export default {
|
||||
|
||||
/* 选中样式 */
|
||||
res.active = true
|
||||
}
|
||||
}
|
||||
|
||||
// 切换标题
|
||||
const headTop = () => {
|
||||
// 切换标题
|
||||
const headTop = () => {
|
||||
choose.rightcom = 'decorate'
|
||||
/* 替换 */
|
||||
datas.pageComponents.forEach((res) => {
|
||||
/* 修改选中 */
|
||||
if (res.active === true) res.active = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 删除组件
|
||||
const deleteObj = (index) => {
|
||||
/**
|
||||
* 删除组件
|
||||
*
|
||||
* @param {Number} index 当前组件index
|
||||
*/
|
||||
const deleteObj = (index) => {
|
||||
datas.pageComponents.splice(index, 1)
|
||||
if (choose.index === index) choose.rightcom = 'decorate'
|
||||
if (index < choose.index) choose.index = choose.index - 1
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 当将元素或文本选择拖动到有效放置目标（每几百毫秒）上时，会触发此事件
|
||||
*
|
||||
* @param {Object} event event对象
|
||||
*/
|
||||
const allowDrop = (event) => {
|
||||
const allowDrop = (event) => {
|
||||
//阻止浏览器的默认事件
|
||||
event.preventDefault()
|
||||
|
||||
@ -315,10 +316,7 @@ export default {
|
||||
// 一个以上的组件计算
|
||||
if (datas.pageComponents.length) {
|
||||
/* 如果只有一个组件并且第一个是提示组件直接返回 */
|
||||
if (
|
||||
datas.pageComponents.length === 1 &&
|
||||
datas.pageComponents[0].type === 0
|
||||
)
|
||||
if (datas.pageComponents.length === 1 && datas.pageComponents[0].type === 0)
|
||||
return
|
||||
|
||||
/* 如果鼠标的高度小于第一个的一半直接放到第一个 */
|
||||
@ -419,14 +417,14 @@ export default {
|
||||
type: 0,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 当在有效放置目标上放置元素或选择文本时触发此事件
|
||||
*
|
||||
* @param {Object} event event对象
|
||||
*/
|
||||
const drop = (event) => {
|
||||
const drop = (event) => {
|
||||
/* 获取数据 */
|
||||
let data = utils.deepClone(
|
||||
componentProperties.get(event.dataTransfer.getData('componentName'))
|
||||
@ -468,8 +466,7 @@ export default {
|
||||
if (res.active === true) res.active = false
|
||||
/* 替换提示 */
|
||||
choose.index = index
|
||||
if (res.component === 'placementarea')
|
||||
datas.pageComponents[index] = data
|
||||
if (res.component === 'placementarea') datas.pageComponents[index] = data
|
||||
})
|
||||
|
||||
/* 切换组件 */
|
||||
@ -483,23 +480,23 @@ export default {
|
||||
choose.currentproperties,
|
||||
'----------components data'
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 当拖动的元素或文本选择离开有效的放置目标时，会触发此事件
|
||||
*
|
||||
* @param {Object} event event对象
|
||||
*/
|
||||
const dragleaves = () => {
|
||||
const dragleaves = () => {
|
||||
/* 删除提示组件 */
|
||||
datas.pageComponents = datas.pageComponents.filter(
|
||||
(res) => res.component !== 'placementarea'
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const reload = inject('reload')
|
||||
// 重置
|
||||
const reloads = () => {
|
||||
const reload = inject('reload')
|
||||
// 重置
|
||||
const reloads = () => {
|
||||
ElMessageBox.confirm(
|
||||
'重置后您添加或者修改的数据将会失效, 是否继续?',
|
||||
'提示',
|
||||
@ -513,10 +510,10 @@ export default {
|
||||
reload()
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
}
|
||||
|
||||
// 监听右侧属性设置切换
|
||||
watch(
|
||||
// 监听右侧属性设置切换
|
||||
watch(
|
||||
() => choose.rightcom,
|
||||
(newval) => {
|
||||
if (newval === 'decorate') {
|
||||
@ -536,26 +533,10 @@ export default {
|
||||
choose.currentproperties = datas.pageComponents
|
||||
}
|
||||
}
|
||||
)
|
||||
return {
|
||||
realTimeView,
|
||||
...toRefs(datas),
|
||||
...toRefs(choose),
|
||||
catJson,
|
||||
componenmanagement,
|
||||
activeComponent,
|
||||
headTop,
|
||||
deleteObj,
|
||||
exportJSON,
|
||||
importJSON,
|
||||
allowDrop,
|
||||
drop,
|
||||
dragleaves,
|
||||
reloads,
|
||||
}
|
||||
},
|
||||
components: { vuedraggable },
|
||||
}
|
||||
)
|
||||
|
||||
const { id, pageSetup, pageComponents } = toRefs(datas)
|
||||
const { deleShow, rightcom, currentproperties, pointer } = toRefs(choose)
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user