hz/student-h5
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git synced 2025-12-06 09:26:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat:完成富文本图片适配

Browse Source
This commit is contained in:
lixg
2023-03-05 21:04:59 +08:00
parent db5395dcc4
commit 30093f0fb8
5 changed files with 119 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/views/discuss/DiscussDetail.vue
View File

@@ -314,7 +314,7 @@
</template>
<script setup>
import { reactive, ref, computed } from "vue";
import { reactive, ref, computed, watch } from "vue";
import ReturnHead from "@/components/ReturnHead.vue";
import px from "@/assets/image/discuss/px.jpg";
import { request, useRequest } from "@/api/request";
@@ -624,6 +624,19 @@ function send() {
submitComment();
}
}
watch(disDetail, () => {
console.log(" disDetail.value.content", disDetail.value.content);
if (disDetail.value.content) {
let obj = disDetail.value.content;
let regex = new RegExp("<img", "gi");
let deleteStyle = /(?<=\" )style=\".*?\"/gi;
obj = obj.replace(deleteStyle, "");
obj = obj.replace(regex, '<img style="max-width: 100%;height:auto"');
disDetail.value.content = obj;
console.log("disDetail.value.content", disDetail.value.content);
}
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->

24
src/views/discuss/DiscussPage.vue
View File

@@ -189,6 +189,17 @@ function getPostList(discussId) {
})
.then((e) => {
console.log("我是当前讨论下的帖子", e);
if (e.data.records) {
let arr = e.data.records;
for (let i = 0; i < arr.length; i++) {
let obj = arr[i].content;
let regex = new RegExp("<img", "gi");
let deleteStyle = /(?<=\" )style=\".*?\"/gi;
obj = obj.replace(deleteStyle, "");
obj = obj.replace(regex, '<img style="max-width: 100%;height:auto"');
arr[i].content = obj;
}
}
state.postList = state.postList.concat(e.data.records);
state.total = Number(e.data.total);
if (e.data.records.length === 0 || e.data.records.length < 10) {
@@ -260,6 +271,19 @@ function handleCurrentChange(e, k) {
state.pageNo = state.pageNo + 1;
getPostList(state.info.discussDtoList[0].id);
}
watch(state.postList, () => {
console.log("state.postList", state.postList);
// if (data.value.offcourseDto && data.value.offcourseDto.outline) {
// let obj = data.value.offcourseDto.outline;
// let regex = new RegExp("<img", "gi");
// let deleteStyle = /(?<=\" )style=\".*?\"/gi;
// obj = obj.replace(deleteStyle, "");
// obj = obj.replace(regex, '<img style="max-width: 100%;height:auto"');
// data.value.offcourseDto.outline = obj;
// console.log("data.offcourseDto.outline", data.value.offcourseDto.outline);
// }
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->

16
src/views/faceteach/FaceTeachNoCommon.vue
View File

@@ -73,6 +73,7 @@
<div class="work">
<div style="display: flex; align-items: center">
<div
id="faceteachnocommon_img_id"
style="padding: 5px"
class="content"
v-html="data.offcourseDto?.outline"
@@ -147,7 +148,7 @@
<script setup>
import ReturnHead from "@/components/ReturnHead.vue";
import { computed, reactive, toRefs, watch, onUnmounted } from "vue";
import { computed, reactive, toRefs, watch, onUnmounted, onMounted } from "vue";
import FileTypeImg from "@/components/FileTypeImg.vue";
import { request, useRequest } from "@/api/request";
import { STU_OFFCOURSE_DETAIL, FACETEACH_SIGNUP } from "@/api/api";
@@ -209,6 +210,19 @@ function formateArr(strs) {
console.log("112233", arrs);
return arrs;
}
watch(data, () => {
console.log("data.offcourseDto", data.value.offcourseDto);
if (data.value.offcourseDto && data.value.offcourseDto.outline) {
let obj = data.value.offcourseDto.outline;
let regex = new RegExp("<img", "gi");
let deleteStyle = /(?<=\" )style=\".*?\"/gi;
obj = obj.replace(deleteStyle, "");
obj = obj.replace(regex, '<img style="max-width: 100%;height:auto"');
data.value.offcourseDto.outline = obj;
console.log("data.offcourseDto.outline", data.value.offcourseDto.outline);
}
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->

12
src/views/faceteach/FaceTeachNoCourse.vue
View File

@@ -213,6 +213,18 @@ function formateArr(strs) {
console.log("112233", arrs);
return arrs;
}
watch(data, () => {
console.log("data.offcourseDto", data.value.offcourseDto);
if (data.value.offcourseDto && data.value.offcourseDto.outline) {
let obj = data.value.offcourseDto.outline;
let regex = new RegExp("<img", "gi");
let deleteStyle = /(?<=\" )style=\".*?\"/gi;
obj = obj.replace(deleteStyle, "");
obj = obj.replace(regex, '<img style="max-width: 100%;height:auto"');
data.value.offcourseDto.outline = obj;
console.log("data.offcourseDto.outline", data.value.offcourseDto.outline);
}
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->

55
src/views/faceteach/FaceTeachSignUp.vue
View File

@@ -88,6 +88,7 @@
<div class="work">
<div style="display: flex; align-items: center">
<div
id="face_img_id"
style="padding: 10px"
class="content"
v-html="data.offcourseDto?.outline"
@@ -165,7 +166,7 @@
<script setup>
import ReturnHead from "@/components/ReturnHead.vue";
import { computed, reactive, toRefs, watch, onUnmounted } from "vue";
import { computed, reactive, toRefs, watch, onUnmounted, onMounted } from "vue";
import FileTypeImg from "@/components/FileTypeImg.vue";
import { request, useRequest } from "@/api/request";
import { STU_OFFCOURSE_DETAIL, FACETEACH_SIGNUP } from "@/api/api";
@@ -223,6 +224,58 @@ function formateArr(strs) {
console.log("112233", arrs);
return arrs;
}
watch(data, () => {
console.log("data.offcourseDto", data.value.offcourseDto);
if (data.value.offcourseDto && data.value.offcourseDto.outline) {
let obj = data.value.offcourseDto.outline;
let regex = new RegExp("<img", "gi");
let deleteStyle = /(?<=\" )style=\".*?\"/gi;
obj = obj.replace(deleteStyle, "");
obj = obj.replace(regex, '<img style="max-width: 100%;height:auto"');
data.value.offcourseDto.outline = obj;
console.log("data.offcourseDto.outline", data.value.offcourseDto.outline);
}
});
// onMounted(() => {
// console.log("data.offcourseDto?.outline", data.value);
// // console.log("document", document.getElementById("face_img_id"));
// let imgs = document.getElementById("face_img_id").getElementsByTagName("img");
// console.log("imgs", imgs, imgs.length);
// let timer = setInterval(() => {
// if (imgs && imgs.length !== 0) {
// clearInterval(timer);
// for (let i = 0; i < imgs.length; i++) {
// console.log("11111", imgs[i], i);
// // console.log(
// // "document.body.clientWidth",
// // document.body.clientWidth,
// // imgs[i].width
// // );
// // if (document.body.clientWidth <= imgs[i].width) {
// // imgs[i].style.width = "100%";
// // }
// getImgInfo(imgs[i].src, i, imgs);
// }
// }
// }, 1000);
// });
function getImgInfo(url, i, imgs) {
console.log("url_i", url, i);
let image = new Image();
let w, h;
image.src = url;
console.log("dj", image.width);
image.onload = function () {
w = image.width;
console.log("image.width", image.width);
h = image.height;
console.log("document.body.clientWidth", document.body.clientWidth);
if (document.body.clientWidth <= w) {
imgs[i].style.width = "100%";
}
image.onload = null;
};
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->