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-useless-return': 'off',
|
||||||
'no-unreachable': 'off', // 禁止在 return、throw、continue 和 break 语句后出现不可达代码
|
'no-unreachable': 'off', // 禁止在 return、throw、continue 和 break 语句后出现不可达代码
|
||||||
'no-new-object': 'off', // 禁止使用 Object 构造函数
|
'no-new-object': 'off', // 禁止使用 Object 构造函数
|
||||||
"vue/no-v-model-argument": "off",
|
'vue/no-v-model-argument': 'off',
|
||||||
'no-prototype-builtins': 'off',
|
'no-prototype-builtins': 'off',
|
||||||
'vue/no-mutating-props': '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',
|
parser: 'vue-eslint-parser',
|
||||||
}
|
}
|
||||||
|
|||||||
@ -14,7 +14,7 @@
|
|||||||
</p>
|
</p>
|
||||||
<div>
|
<div>
|
||||||
<el-button @click="reloads" type="danger">重置</el-button>
|
<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="catJson">查看JSON </el-button>
|
||||||
<el-button @click="$refs.file.click()">导入JSON </el-button>
|
<el-button @click="$refs.file.click()">导入JSON </el-button>
|
||||||
<el-button @click="exportJSON">导出JSON </el-button>
|
<el-button @click="exportJSON">导出JSON </el-button>
|
||||||
@ -138,7 +138,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<realTimeView
|
<realTimeView
|
||||||
:datas="realTimeView"
|
:datas="realTimeViewData"
|
||||||
:val="{
|
:val="{
|
||||||
id,
|
id,
|
||||||
name: pageSetup.name,
|
name: pageSetup.name,
|
||||||
@ -149,7 +149,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import utils from 'utils/index' // 方法类
|
import utils from 'utils/index' // 方法类
|
||||||
import componentProperties from '@/utils/componentProperties' // 组件数据
|
import componentProperties from '@/utils/componentProperties' // 组件数据
|
||||||
import FileSaver from 'file-saver' // 导出JSON
|
import FileSaver from 'file-saver' // 导出JSON
|
||||||
@ -157,32 +157,29 @@ import { reactive, watch, toRefs, inject } from 'vue'
|
|||||||
import { ElMessageBox, ElMessage } from 'element-plus'
|
import { ElMessageBox, ElMessage } from 'element-plus'
|
||||||
import vuedraggable from 'vuedraggable' //拖拽组件
|
import vuedraggable from 'vuedraggable' //拖拽组件
|
||||||
|
|
||||||
export default {
|
// 是否显示预览
|
||||||
name: 'home',
|
const realTimeViewData = reactive({ show: false })
|
||||||
setup() {
|
|
||||||
// 是否显示预览
|
|
||||||
const realTimeView = reactive({ show: false })
|
|
||||||
|
|
||||||
// 页面数据
|
// 页面数据
|
||||||
const datas = reactive({
|
const datas = reactive({
|
||||||
id: null, //当前页面id
|
id: null, //当前页面id
|
||||||
pageSetup: {
|
pageSetup: {
|
||||||
// 页面设置属性
|
// 页面设置属性
|
||||||
name: '页面标题', //页面名称
|
name: '页面标题', //页面名称
|
||||||
details: '', //页面描述
|
details: '', //页面描述
|
||||||
isPerson: false, // 是否显示个人中心
|
isPerson: false, // 是否显示个人中心
|
||||||
isBack: true, // 是否返回按钮
|
isBack: true, // 是否返回按钮
|
||||||
titleHeight: 35, // 高度
|
titleHeight: 35, // 高度
|
||||||
bgColor: 'rgba(249, 249, 249, 10)', //背景颜色
|
bgColor: 'rgba(249, 249, 249, 10)', //背景颜色
|
||||||
bgImg: '', // 背景图片
|
bgImg: '', // 背景图片
|
||||||
},
|
},
|
||||||
pageComponents: [], //页面组件
|
pageComponents: [], //页面组件
|
||||||
})
|
})
|
||||||
|
|
||||||
// 查看JSON
|
// 查看JSON
|
||||||
const catJson = () => {
|
const catJson = () => {
|
||||||
ElMessageBox.alert(
|
ElMessageBox.alert(
|
||||||
`{
|
`{
|
||||||
<br/>
|
<br/>
|
||||||
"id": ${datas.id},
|
"id": ${datas.id},
|
||||||
<br/>
|
<br/>
|
||||||
@ -193,369 +190,353 @@ export default {
|
|||||||
"component": '${JSON.stringify(datas.pageComponents)}',
|
"component": '${JSON.stringify(datas.pageComponents)}',
|
||||||
<br/>
|
<br/>
|
||||||
}`,
|
}`,
|
||||||
'查看JSON',
|
'查看JSON',
|
||||||
{
|
{
|
||||||
confirmButtonText: '确定',
|
confirmButtonText: '确定',
|
||||||
customClass: 'JSONView',
|
customClass: 'JSONView',
|
||||||
dangerouslyUseHTMLString: true,
|
dangerouslyUseHTMLString: true,
|
||||||
callback: () => {},
|
callback: () => {},
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
// 导出json
|
// 导出json
|
||||||
const exportJSON = () => {
|
const exportJSON = () => {
|
||||||
// 将json转换成字符串
|
// 将json转换成字符串
|
||||||
const data = JSON.stringify({
|
const data = JSON.stringify({
|
||||||
id: datas.id,
|
id: datas.id,
|
||||||
name: datas.pageSetup.name,
|
name: datas.pageSetup.name,
|
||||||
templateJson: JSON.stringify(datas.pageSetup),
|
templateJson: JSON.stringify(datas.pageSetup),
|
||||||
component: JSON.stringify(datas.pageComponents),
|
component: JSON.stringify(datas.pageComponents),
|
||||||
})
|
})
|
||||||
const blob = new Blob([data], { type: '' })
|
const blob = new Blob([data], { type: '' })
|
||||||
FileSaver.saveAs(blob, `${datas.pageSetup.name}.json`)
|
FileSaver.saveAs(blob, `${datas.pageSetup.name}.json`)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 导入json
|
// 导入json
|
||||||
const importJSON = () => {
|
const importJSON = () => {
|
||||||
const file = document.getElementById('file').files[0]
|
const file = document.getElementById('file').files[0]
|
||||||
const reader = new FileReader()
|
const reader = new FileReader()
|
||||||
reader.readAsText(file)
|
reader.readAsText(file)
|
||||||
let _this = datas
|
let _this = datas
|
||||||
reader.onload = function () {
|
reader.onload = function () {
|
||||||
// this.result为读取到的json字符串，需转成json对象
|
// this.result为读取到的json字符串，需转成json对象
|
||||||
let ImportJSON = JSON.parse(this.result)
|
let ImportJSON = JSON.parse(this.result)
|
||||||
// 检测是否导入成功
|
// 检测是否导入成功
|
||||||
console.log(ImportJSON, '-----------------导入成功')
|
console.log(ImportJSON, '-----------------导入成功')
|
||||||
// 导入JSON数据
|
// 导入JSON数据
|
||||||
_this.id = ImportJSON.id
|
_this.id = ImportJSON.id
|
||||||
_this.pageSetup = JSON.parse(ImportJSON.templateJson)
|
_this.pageSetup = JSON.parse(ImportJSON.templateJson)
|
||||||
_this.pageComponents = JSON.parse(ImportJSON.component)
|
_this.pageComponents = JSON.parse(ImportJSON.component)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 切换组件位置 用于组件管理中删除功能
|
* 切换组件位置 用于组件管理中删除功能
|
||||||
*
|
*
|
||||||
* @param {Object} res 组件切换后返回的位置
|
* @param {Object} res 组件切换后返回的位置
|
||||||
*/
|
*/
|
||||||
const componenmanagement = (res) => {
|
const componenmanagement = (res) => {
|
||||||
datas.pageComponents = res
|
datas.pageComponents = res
|
||||||
}
|
}
|
||||||
|
|
||||||
// 选择组件数据
|
// 选择组件数据
|
||||||
const choose = reactive({
|
const choose = reactive({
|
||||||
deleShow: true, //删除标签显示
|
deleShow: true, // 删除标签显示
|
||||||
index: '', //当前选中的index
|
index: '', // 当前选中的index
|
||||||
rightcom: 'decorate', //右侧组件切换
|
rightcom: 'decorate', // 右侧组件切换
|
||||||
currentproperties: {}, //当前属性
|
currentproperties: datas.pageSetup, // 当前属性 默认：页面设置
|
||||||
offsetY: 0, //记录上一次距离父元素高度
|
offsetY: 0, //记录上一次距离父元素高度
|
||||||
onlyOne: ['1-5', '1-16'], // 只能存在一个的组件(组件的type)
|
onlyOne: ['1-5', '1-16'], // 只能存在一个的组件(组件的type)
|
||||||
pointer: { show: false }, //穿透
|
pointer: { show: false }, // 穿透
|
||||||
})
|
})
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 选择组件
|
* 选择组件
|
||||||
*
|
*
|
||||||
* @param {Object} res 当前组件对象
|
* @param {Object} res 当前组件对象
|
||||||
*/
|
*/
|
||||||
const activeComponent = (res, index) => {
|
const activeComponent = (res, index) => {
|
||||||
choose.index = index
|
choose.index = index
|
||||||
/* 切换组件 */
|
/* 切换组件 */
|
||||||
choose.rightcom = res.style
|
choose.rightcom = res.style
|
||||||
/* 丢样式 */
|
/* 丢样式 */
|
||||||
choose.currentproperties = res.setStyle
|
choose.currentproperties = res.setStyle
|
||||||
|
|
||||||
/* 替换 */
|
/* 替换 */
|
||||||
datas.pageComponents.forEach((res) => {
|
datas.pageComponents.forEach((res) => {
|
||||||
/* 修改选中 */
|
/* 修改选中 */
|
||||||
if (res.active === true) res.active = false
|
if (res.active === true) res.active = false
|
||||||
})
|
})
|
||||||
|
|
||||||
/* 选中样式 */
|
/* 选中样式 */
|
||||||
res.active = true
|
res.active = true
|
||||||
}
|
}
|
||||||
|
|
||||||
// 切换标题
|
// 切换标题
|
||||||
const headTop = () => {
|
const headTop = () => {
|
||||||
choose.rightcom = 'decorate'
|
choose.rightcom = 'decorate'
|
||||||
/* 替换 */
|
/* 替换 */
|
||||||
datas.pageComponents.forEach((res) => {
|
datas.pageComponents.forEach((res) => {
|
||||||
/* 修改选中 */
|
/* 修改选中 */
|
||||||
if (res.active === true) res.active = false
|
if (res.active === true) res.active = false
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 删除组件
|
/**
|
||||||
const deleteObj = (index) => {
|
* 删除组件
|
||||||
datas.pageComponents.splice(index, 1)
|
*
|
||||||
if (choose.index === index) choose.rightcom = 'decorate'
|
* @param {Number} index 当前组件index
|
||||||
if (index < choose.index) choose.index = choose.index - 1
|
*/
|
||||||
}
|
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对象
|
* @param {Object} event event对象
|
||||||
*/
|
*/
|
||||||
const allowDrop = (event) => {
|
const allowDrop = (event) => {
|
||||||
//阻止浏览器的默认事件
|
//阻止浏览器的默认事件
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
|
|
||||||
/* 获取鼠标高度 */
|
/* 获取鼠标高度 */
|
||||||
let eventoffset = event.offsetY
|
let eventoffset = event.offsetY
|
||||||
|
|
||||||
/* 如果没有移动不触发事件减少损耗 */
|
/* 如果没有移动不触发事件减少损耗 */
|
||||||
if (choose.offsetY === eventoffset) return
|
if (choose.offsetY === eventoffset) return
|
||||||
else choose.offsetY = eventoffset
|
else choose.offsetY = eventoffset
|
||||||
|
|
||||||
/* 获取组件 */
|
/* 获取组件 */
|
||||||
const childrenObject = event.target.children[0]
|
const childrenObject = event.target.children[0]
|
||||||
|
|
||||||
// 一个以上的组件计算
|
// 一个以上的组件计算
|
||||||
if (datas.pageComponents.length) {
|
if (datas.pageComponents.length) {
|
||||||
/* 如果只有一个组件并且第一个是提示组件直接返回 */
|
/* 如果只有一个组件并且第一个是提示组件直接返回 */
|
||||||
if (
|
if (datas.pageComponents.length === 1 && datas.pageComponents[0].type === 0)
|
||||||
datas.pageComponents.length === 1 &&
|
return
|
||||||
datas.pageComponents[0].type === 0
|
|
||||||
)
|
|
||||||
return
|
|
||||||
|
|
||||||
/* 如果鼠标的高度小于第一个的一半直接放到第一个 */
|
/* 如果鼠标的高度小于第一个的一半直接放到第一个 */
|
||||||
if (eventoffset < childrenObject.children[0].clientHeight / 2) {
|
if (eventoffset < childrenObject.children[0].clientHeight / 2) {
|
||||||
/* 如果第一个是提示组件直接返回 */
|
/* 如果第一个是提示组件直接返回 */
|
||||||
if (datas.pageComponents[0].type === 0) return
|
if (datas.pageComponents[0].type === 0) return
|
||||||
|
|
||||||
/* 删除提示组件 */
|
|
||||||
datas.pageComponents = datas.pageComponents.filter(
|
|
||||||
(res) => res.component !== 'placementarea'
|
|
||||||
)
|
|
||||||
|
|
||||||
/* 最后面添加提示组件 */
|
|
||||||
datas.pageComponents.unshift({
|
|
||||||
component: 'placementarea',
|
|
||||||
type: 0,
|
|
||||||
})
|
|
||||||
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 记录距离父元素高度 */
|
|
||||||
const childOff = childrenObject.offsetTop
|
|
||||||
|
|
||||||
/* 鼠标在所有组件下面 */
|
|
||||||
if (
|
|
||||||
eventoffset > childrenObject.clientHeight ||
|
|
||||||
childrenObject.lastChild.offsetTop -
|
|
||||||
childOff +
|
|
||||||
childrenObject.lastChild.clientHeight / 2 <
|
|
||||||
eventoffset
|
|
||||||
) {
|
|
||||||
/* 最后一个组件是提示组件返回 */
|
|
||||||
if (datas.pageComponents[datas.pageComponents.length - 1].type === 0)
|
|
||||||
return
|
|
||||||
|
|
||||||
/* 清除提示组件 */
|
|
||||||
datas.pageComponents = datas.pageComponents.filter(
|
|
||||||
(res) => res.component !== 'placementarea'
|
|
||||||
)
|
|
||||||
|
|
||||||
/* 最后一个不是提示组件添加 */
|
|
||||||
datas.pageComponents.push({
|
|
||||||
component: 'placementarea',
|
|
||||||
type: 0,
|
|
||||||
})
|
|
||||||
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const childrens = childrenObject.children
|
|
||||||
|
|
||||||
/* 在两个组件中间，插入 */
|
|
||||||
for (let i = 0, l = childrens.length; i < l; i++) {
|
|
||||||
const childoffset = childrens[i].offsetTop - childOff
|
|
||||||
|
|
||||||
if (childoffset + childrens[i].clientHeight / 2 > event.offsetY) {
|
|
||||||
/* 如果是提示组件直接返回 */
|
|
||||||
if (datas.pageComponents[i].type === 0) break
|
|
||||||
|
|
||||||
if (datas.pageComponents[i - 1].type === 0) break
|
|
||||||
|
|
||||||
/* 清除提示组件 */
|
|
||||||
datas.pageComponents = datas.pageComponents.filter(
|
|
||||||
(res) => res.component !== 'placementarea'
|
|
||||||
)
|
|
||||||
|
|
||||||
datas.pageComponents.splice(i, 0, {
|
|
||||||
component: 'placementarea',
|
|
||||||
type: 0,
|
|
||||||
})
|
|
||||||
break
|
|
||||||
} else if (childoffset + childrens[i].clientHeight > event.offsetY) {
|
|
||||||
if (datas.pageComponents[i].type === 0) break
|
|
||||||
|
|
||||||
if (
|
|
||||||
!datas.pageComponents[i + 1] ||
|
|
||||||
datas.pageComponents[i + 1].type === 0
|
|
||||||
)
|
|
||||||
break
|
|
||||||
|
|
||||||
datas.pageComponents = datas.pageComponents.filter(
|
|
||||||
(res) => res.component !== 'placementarea'
|
|
||||||
)
|
|
||||||
|
|
||||||
datas.pageComponents.splice(i, 0, {
|
|
||||||
component: 'placementarea',
|
|
||||||
type: 0,
|
|
||||||
})
|
|
||||||
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
/* 一个组件都没有直接push */
|
|
||||||
datas.pageComponents.push({
|
|
||||||
component: 'placementarea',
|
|
||||||
type: 0,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 当在有效放置目标上放置元素或选择文本时触发此事件
|
|
||||||
*
|
|
||||||
* @param {Object} event event对象
|
|
||||||
*/
|
|
||||||
const drop = (event) => {
|
|
||||||
/* 获取数据 */
|
|
||||||
let data = utils.deepClone(
|
|
||||||
componentProperties.get(event.dataTransfer.getData('componentName'))
|
|
||||||
)
|
|
||||||
|
|
||||||
/* 查询是否只能存在一个的组件且在第一个 */
|
|
||||||
let someOne = datas.pageComponents.some((item, index) => {
|
|
||||||
return (
|
|
||||||
item.component === 'placementarea' &&
|
|
||||||
index === 0 &&
|
|
||||||
choose.onlyOne.includes(data.type)
|
|
||||||
)
|
|
||||||
})
|
|
||||||
if (someOne) {
|
|
||||||
ElMessage.info('固定位置的组件(如: 底部导航、悬浮)不能放在第一个!')
|
|
||||||
/* 删除提示组件 */
|
|
||||||
dragleaves()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 查询是否只能存在一个的组件 */
|
|
||||||
let someResult = datas.pageComponents.some((item) => {
|
|
||||||
console.log(item.component, '--------------item.component')
|
|
||||||
return (
|
|
||||||
choose.onlyOne.includes(item.type) &&
|
|
||||||
item.component === event.dataTransfer.getData('componentName')
|
|
||||||
)
|
|
||||||
})
|
|
||||||
if (someResult) {
|
|
||||||
ElMessage.info('当前组件只能添加一个!')
|
|
||||||
/* 删除提示组件 */
|
|
||||||
dragleaves()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 替换 */
|
|
||||||
datas.pageComponents.forEach((res, index) => {
|
|
||||||
/* 修改选中 */
|
|
||||||
if (res.active === true) res.active = false
|
|
||||||
/* 替换提示 */
|
|
||||||
choose.index = index
|
|
||||||
if (res.component === 'placementarea')
|
|
||||||
datas.pageComponents[index] = data
|
|
||||||
})
|
|
||||||
|
|
||||||
/* 切换组件 */
|
|
||||||
choose.rightcom = data.style
|
|
||||||
/* 丢样式 */
|
|
||||||
choose.currentproperties = data.setStyle
|
|
||||||
|
|
||||||
console.log(
|
|
||||||
data,
|
|
||||||
choose.rightcom,
|
|
||||||
choose.currentproperties,
|
|
||||||
'----------components data'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 当拖动的元素或文本选择离开有效的放置目标时，会触发此事件
|
|
||||||
*
|
|
||||||
* @param {Object} event event对象
|
|
||||||
*/
|
|
||||||
const dragleaves = () => {
|
|
||||||
/* 删除提示组件 */
|
/* 删除提示组件 */
|
||||||
datas.pageComponents = datas.pageComponents.filter(
|
datas.pageComponents = datas.pageComponents.filter(
|
||||||
(res) => res.component !== 'placementarea'
|
(res) => res.component !== 'placementarea'
|
||||||
)
|
)
|
||||||
|
|
||||||
|
/* 最后面添加提示组件 */
|
||||||
|
datas.pageComponents.unshift({
|
||||||
|
component: 'placementarea',
|
||||||
|
type: 0,
|
||||||
|
})
|
||||||
|
|
||||||
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
const reload = inject('reload')
|
/* 记录距离父元素高度 */
|
||||||
// 重置
|
const childOff = childrenObject.offsetTop
|
||||||
const reloads = () => {
|
|
||||||
ElMessageBox.confirm(
|
/* 鼠标在所有组件下面 */
|
||||||
'重置后您添加或者修改的数据将会失效, 是否继续?',
|
if (
|
||||||
'提示',
|
eventoffset > childrenObject.clientHeight ||
|
||||||
{
|
childrenObject.lastChild.offsetTop -
|
||||||
confirmButtonText: '确定',
|
childOff +
|
||||||
cancelButtonText: '取消',
|
childrenObject.lastChild.clientHeight / 2 <
|
||||||
type: 'warning',
|
eventoffset
|
||||||
}
|
) {
|
||||||
|
/* 最后一个组件是提示组件返回 */
|
||||||
|
if (datas.pageComponents[datas.pageComponents.length - 1].type === 0)
|
||||||
|
return
|
||||||
|
|
||||||
|
/* 清除提示组件 */
|
||||||
|
datas.pageComponents = datas.pageComponents.filter(
|
||||||
|
(res) => res.component !== 'placementarea'
|
||||||
)
|
)
|
||||||
.then(() => {
|
|
||||||
reload()
|
/* 最后一个不是提示组件添加 */
|
||||||
})
|
datas.pageComponents.push({
|
||||||
.catch(() => {})
|
component: 'placementarea',
|
||||||
|
type: 0,
|
||||||
|
})
|
||||||
|
|
||||||
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
// 监听右侧属性设置切换
|
const childrens = childrenObject.children
|
||||||
watch(
|
|
||||||
() => choose.rightcom,
|
/* 在两个组件中间，插入 */
|
||||||
(newval) => {
|
for (let i = 0, l = childrens.length; i < l; i++) {
|
||||||
if (newval === 'decorate') {
|
const childoffset = childrens[i].offsetTop - childOff
|
||||||
datas.pageComponents.forEach((res) => {
|
|
||||||
/* 修改选中 */
|
if (childoffset + childrens[i].clientHeight / 2 > event.offsetY) {
|
||||||
if (res.active === true) res.active = false
|
/* 如果是提示组件直接返回 */
|
||||||
})
|
if (datas.pageComponents[i].type === 0) break
|
||||||
choose.currentproperties = datas.pageSetup
|
|
||||||
return
|
if (datas.pageComponents[i - 1].type === 0) break
|
||||||
}
|
|
||||||
if (newval === 'componenmanagement') {
|
/* 清除提示组件 */
|
||||||
/* 替换 */
|
datas.pageComponents = datas.pageComponents.filter(
|
||||||
datas.pageComponents.forEach((res) => {
|
(res) => res.component !== 'placementarea'
|
||||||
/* 修改选中 */
|
)
|
||||||
if (res.active === true) res.active = false
|
|
||||||
})
|
datas.pageComponents.splice(i, 0, {
|
||||||
choose.currentproperties = datas.pageComponents
|
component: 'placementarea',
|
||||||
}
|
type: 0,
|
||||||
|
})
|
||||||
|
break
|
||||||
|
} else if (childoffset + childrens[i].clientHeight > event.offsetY) {
|
||||||
|
if (datas.pageComponents[i].type === 0) break
|
||||||
|
|
||||||
|
if (
|
||||||
|
!datas.pageComponents[i + 1] ||
|
||||||
|
datas.pageComponents[i + 1].type === 0
|
||||||
|
)
|
||||||
|
break
|
||||||
|
|
||||||
|
datas.pageComponents = datas.pageComponents.filter(
|
||||||
|
(res) => res.component !== 'placementarea'
|
||||||
|
)
|
||||||
|
|
||||||
|
datas.pageComponents.splice(i, 0, {
|
||||||
|
component: 'placementarea',
|
||||||
|
type: 0,
|
||||||
|
})
|
||||||
|
|
||||||
|
break
|
||||||
}
|
}
|
||||||
)
|
|
||||||
return {
|
|
||||||
realTimeView,
|
|
||||||
...toRefs(datas),
|
|
||||||
...toRefs(choose),
|
|
||||||
catJson,
|
|
||||||
componenmanagement,
|
|
||||||
activeComponent,
|
|
||||||
headTop,
|
|
||||||
deleteObj,
|
|
||||||
exportJSON,
|
|
||||||
importJSON,
|
|
||||||
allowDrop,
|
|
||||||
drop,
|
|
||||||
dragleaves,
|
|
||||||
reloads,
|
|
||||||
}
|
}
|
||||||
},
|
} else {
|
||||||
components: { vuedraggable },
|
/* 一个组件都没有直接push */
|
||||||
|
datas.pageComponents.push({
|
||||||
|
component: 'placementarea',
|
||||||
|
type: 0,
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 当在有效放置目标上放置元素或选择文本时触发此事件
|
||||||
|
*
|
||||||
|
* @param {Object} event event对象
|
||||||
|
*/
|
||||||
|
const drop = (event) => {
|
||||||
|
/* 获取数据 */
|
||||||
|
let data = utils.deepClone(
|
||||||
|
componentProperties.get(event.dataTransfer.getData('componentName'))
|
||||||
|
)
|
||||||
|
|
||||||
|
/* 查询是否只能存在一个的组件且在第一个 */
|
||||||
|
let someOne = datas.pageComponents.some((item, index) => {
|
||||||
|
return (
|
||||||
|
item.component === 'placementarea' &&
|
||||||
|
index === 0 &&
|
||||||
|
choose.onlyOne.includes(data.type)
|
||||||
|
)
|
||||||
|
})
|
||||||
|
if (someOne) {
|
||||||
|
ElMessage.info('固定位置的组件(如: 底部导航、悬浮)不能放在第一个!')
|
||||||
|
/* 删除提示组件 */
|
||||||
|
dragleaves()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 查询是否只能存在一个的组件 */
|
||||||
|
let someResult = datas.pageComponents.some((item) => {
|
||||||
|
console.log(item.component, '--------------item.component')
|
||||||
|
return (
|
||||||
|
choose.onlyOne.includes(item.type) &&
|
||||||
|
item.component === event.dataTransfer.getData('componentName')
|
||||||
|
)
|
||||||
|
})
|
||||||
|
if (someResult) {
|
||||||
|
ElMessage.info('当前组件只能添加一个!')
|
||||||
|
/* 删除提示组件 */
|
||||||
|
dragleaves()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 替换 */
|
||||||
|
datas.pageComponents.forEach((res, index) => {
|
||||||
|
/* 修改选中 */
|
||||||
|
if (res.active === true) res.active = false
|
||||||
|
/* 替换提示 */
|
||||||
|
choose.index = index
|
||||||
|
if (res.component === 'placementarea') datas.pageComponents[index] = data
|
||||||
|
})
|
||||||
|
|
||||||
|
/* 切换组件 */
|
||||||
|
choose.rightcom = data.style
|
||||||
|
/* 丢样式 */
|
||||||
|
choose.currentproperties = data.setStyle
|
||||||
|
|
||||||
|
console.log(
|
||||||
|
data,
|
||||||
|
choose.rightcom,
|
||||||
|
choose.currentproperties,
|
||||||
|
'----------components data'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 当拖动的元素或文本选择离开有效的放置目标时，会触发此事件
|
||||||
|
*
|
||||||
|
* @param {Object} event event对象
|
||||||
|
*/
|
||||||
|
const dragleaves = () => {
|
||||||
|
/* 删除提示组件 */
|
||||||
|
datas.pageComponents = datas.pageComponents.filter(
|
||||||
|
(res) => res.component !== 'placementarea'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const reload = inject('reload')
|
||||||
|
// 重置
|
||||||
|
const reloads = () => {
|
||||||
|
ElMessageBox.confirm(
|
||||||
|
'重置后您添加或者修改的数据将会失效, 是否继续?',
|
||||||
|
'提示',
|
||||||
|
{
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.then(() => {
|
||||||
|
reload()
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听右侧属性设置切换
|
||||||
|
watch(
|
||||||
|
() => choose.rightcom,
|
||||||
|
(newval) => {
|
||||||
|
if (newval === 'decorate') {
|
||||||
|
datas.pageComponents.forEach((res) => {
|
||||||
|
/* 修改选中 */
|
||||||
|
if (res.active === true) res.active = false
|
||||||
|
})
|
||||||
|
choose.currentproperties = datas.pageSetup
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (newval === 'componenmanagement') {
|
||||||
|
/* 替换 */
|
||||||
|
datas.pageComponents.forEach((res) => {
|
||||||
|
/* 修改选中 */
|
||||||
|
if (res.active === true) res.active = false
|
||||||
|
})
|
||||||
|
choose.currentproperties = datas.pageComponents
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
const { id, pageSetup, pageComponents } = toRefs(datas)
|
||||||
|
const { deleShow, rightcom, currentproperties, pointer } = toRefs(choose)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user