feat: 处理富文本

src/App.vue

@@ -14,4 +14,7 @@ export default {
 
 <style>
 /*每个页面公共css */
+::v-deep.rich-txt-img {
+  max-width: 100%;
+}
 </style>

src/pages/travel/detail.vue

@@ -1,12 +1,13 @@
 <template>
   <div>
     <div v-if="detailData.travelNotesBannerAfterConvert">
-      <img
+      <image
         :src="
           detailData.travelNotesBannerAfterConvert?.length
             ? detailData.travelNotesBannerAfterConvert[0]
             : ''
         "
+        mode="widthFix"
       />
       <div class="project-detail">
         <div class="project-title">
@@ -23,7 +24,7 @@
             专业一站式导游服务请联系{{ detailData.contactDescription }}
           </div>
         </div>
-        <div class="richtext" v-html="detailData.tourismContent.content"></div>
+        <rich-text class="richtext" :nodes="richTxtFilter(detailData.tourismContent.content)"></rich-text>
       </div>
     </div>
   </div>
@@ -37,15 +38,22 @@ const router = useRoute();
 const lableList = computed(() => {
   return detailData.value?.projectLabel?.split('&') ?? [];
 });
-onLoad(() => {
-  requestTravelDetail();
+onLoad((options) => {
+  requestTravelDetail(options.id);
 });
 
 const detailData = ref({});
-async function requestTravelDetail() {
-  const { data } = await getTravelDetail(router.query.id);
+async function requestTravelDetail(id) {
+  const { data } = await getTravelDetail(id);
   detailData.value = data;
 }
+
+function richTxtFilter(content) {
+    if (!content) return '';
+    let val = content.replace(/<img/gi, '<img class="rich-txt-img" ');
+    return val;
+}
+
 </script>
 
 <style lang="scss" scoped>
@@ -78,14 +86,11 @@ async function requestTravelDetail() {
     margin-top: 10px;
   }
 }
-.richtext {
+::v-deep rich-text {
   margin-top: 15px;
 }
-::v-deep p img {
-  width: 100%;
-  max-width: 100%;
-}
-img {
+
+image {
   width: 100%;
 }
 </style>