|
@@ -11,12 +11,15 @@
|
|
} from 'vue-router';
|
|
} from 'vue-router';
|
|
|
|
|
|
import {
|
|
import {
|
|
- Promotion
|
|
|
|
|
|
+ Notification,
|
|
|
|
+ Position
|
|
} from '@element-plus/icons-vue'
|
|
} from '@element-plus/icons-vue'
|
|
const router = ref(useRouter())
|
|
const router = ref(useRouter())
|
|
const user = ref(useUserStore().userData);
|
|
const user = ref(useUserStore().userData);
|
|
const websiteUrl = ref('');
|
|
const websiteUrl = ref('');
|
|
const loading = ref(false);
|
|
const loading = ref(false);
|
|
|
|
+ const iframeDom = ref(null);
|
|
|
|
+ const isEdit = ref(false);
|
|
const updateURL = (url) => {
|
|
const updateURL = (url) => {
|
|
if (websiteUrl.value === url) return;
|
|
if (websiteUrl.value === url) return;
|
|
websiteUrl.value = url;
|
|
websiteUrl.value = url;
|
|
@@ -24,10 +27,38 @@
|
|
}
|
|
}
|
|
const onloadIframe = () => {
|
|
const onloadIframe = () => {
|
|
loading.value = false;
|
|
loading.value = false;
|
|
|
|
+ removeEdit();
|
|
}
|
|
}
|
|
const linTo = () => {
|
|
const linTo = () => {
|
|
window.open(websiteUrl.value)
|
|
window.open(websiteUrl.value)
|
|
}
|
|
}
|
|
|
|
+ const edit = () => {
|
|
|
|
+ const iframe = iframeDom.value;
|
|
|
|
+ if (iframe.contentWindow) {
|
|
|
|
+ if (isEdit.value) {
|
|
|
|
+ removeEdit();
|
|
|
|
+ } else {
|
|
|
|
+ iframe.contentWindow.postMessage({
|
|
|
|
+ designMode: true,
|
|
|
|
+ enabled: true,
|
|
|
|
+ type: "devtools_enable",
|
|
|
|
+ __v0_remote__: 1
|
|
|
|
+ }, '*')
|
|
|
|
+ }
|
|
|
|
+ isEdit.value = !isEdit.value;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ const removeEdit = () => {
|
|
|
|
+ const iframe = iframeDom.value;
|
|
|
|
+ if (iframe.contentWindow) {
|
|
|
|
+ iframe.contentWindow.postMessage({
|
|
|
|
+ designMode: true,
|
|
|
|
+ enabled: false,
|
|
|
|
+ type: "devtools_enable",
|
|
|
|
+ __v0_remote__: 1
|
|
|
|
+ }, '*')
|
|
|
|
+ }
|
|
|
|
+ }
|
|
</script>
|
|
</script>
|
|
<template>
|
|
<template>
|
|
<div class="ai-website">
|
|
<div class="ai-website">
|
|
@@ -53,10 +84,15 @@
|
|
</div>
|
|
</div>
|
|
<div class="website-show ai-website-box">
|
|
<div class="website-show ai-website-box">
|
|
<div class="website-form-title">
|
|
<div class="website-form-title">
|
|
- <span>网页展示</span>
|
|
|
|
- <span v-if="websiteUrl">
|
|
|
|
- <el-button type="primary" size="small" :icon="Promotion" @click="linTo">预览</el-button>
|
|
|
|
- </span>
|
|
|
|
|
|
+ <div>网页展示</div>
|
|
|
|
+ <div class="title-icon-box" v-if="websiteUrl">
|
|
|
|
+ <el-icon @click="edit">
|
|
|
|
+ <Position />
|
|
|
|
+ </el-icon>
|
|
|
|
+ <el-icon @click="linTo">
|
|
|
|
+ <Notification />
|
|
|
|
+ </el-icon>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
<div class="hui-flex-box">
|
|
<div class="hui-flex-box">
|
|
<div class="no-empty" v-if="!websiteUrl">
|
|
<div class="no-empty" v-if="!websiteUrl">
|
|
@@ -68,9 +104,6 @@
|
|
</iframe>
|
|
</iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div class="hui-drawer-submit">
|
|
|
|
-
|
|
|
|
- </div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -172,6 +205,22 @@
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
+
|
|
|
|
+ .title-icon-box {
|
|
|
|
+ font-size: 18px;
|
|
|
|
+ color: #6c6d70;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+
|
|
|
|
+ .el-icon {
|
|
|
|
+ margin-left: 10px;
|
|
|
|
+
|
|
|
|
+ &:hover {
|
|
|
|
+ color: var(--el-color-primary);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
.website-form {
|
|
.website-form {
|