更新组件

components/RichEditor.vue

@@ -12,6 +12,7 @@ import DecoupledEditor from "@ckeditor/ckeditor5-build-decoupled-document";
 import Vue from "vue";
 Vue.use(ckeditor); //全局注册
 export default {
+  name:'RichEditor',
   data() {
     return {
       editor: DecoupledEditor,

components/image.vue

@@ -1,13 +1,18 @@
 <template>
   <div class="image-fit">
-    <img src="/web-vue/assets/img/13.deploy1.1.a358a790.png/" alt="" srcset="">
+    <img :src="url" alt="" srcset="" />
   </div>
 </template>
 
 <script>
-
 export default {
-
+  name: "FitImage",
+  props: {
+    url: {
+      type: String,
+      default: "/web-vue/assets/img/13.deploy1.1.a358a790.png",
+    },
+  },
 };
 </script>
 
@@ -22,7 +27,7 @@ export default {
     -webkit-user-drag: none;
     vertical-align: middle;
     position: absolute;
-    top: 0; 
+    top: 0;
     left: 0;
     right: 0;
     bottom: 0;

src/senior/3.component/1.button.md

@@ -16,7 +16,6 @@ meta:
 
 - 它的主要功能包括：
 
-
 :::
 
 ## 1.目录结构
@@ -39,6 +38,7 @@ meta:
 ```
 
 :::
+
 ## 3.使用案例
 
 ::: tip 总结

src/senior/3.component/14.fitimg.md

@@ -29,34 +29,27 @@ meta:
 
 ## 2.组件封装
 
-<Container>
-  <VueImage />
-</Container>
-
 ::: demo
 
 ```vue
 <template>
-  <VueImage />
+  <div style="width:100%;height:100px;">
+    <fit-image url="/web-vue/assets/img/13.deploy1.1.a358a790.png" />
+  </div>
 </template>
+
 <script>
 export default {
   data() {
-    return {
-    }
-  },
-  methods: {
+    return {}
   },
+  methods: {},
 }
 </script>
 ```
 
 :::
 
-::: details 代码详情
-<<< @/components/VueImage.vue
-:::
-
 ## 3.使用案例
 
 ::: tip 总结