课程笔记含有图片支持图片放大。

src/views/user/Mynotes.vue

@@ -72,7 +72,7 @@
                  <span v-if="item.contentType != 3">{{ item.content }}</span>
                  <div v-else>
                     <template v-for="img in item.content">
-                        <img  :src="fileBaseUrl + img" alt=""/>
+                        <img @click="showBigImg(fileBaseUrl + img)"  :src="fileBaseUrl + img" alt=""/>
                     </template>
                  </div>
               </div>
@@ -167,6 +167,14 @@
         </span>
      </el-dialog>
 
+     <!-- 图片放大框 -->
+      <el-dialog
+        :visible.sync="dialogVisibleBigImage"
+        :close-on-click-modal="true"
+        width="30%">
+          <img :src="currentImagePath" style="width: 100%;" />
+      </el-dialog>
+
     </div>
 </template>
 
@@ -186,6 +194,8 @@ export default {
   },
   data(){
       return{
+        dialogVisibleBigImage:false, // 显示图片放大框 true-显示弹框；false-隐藏弹框
+        currentImagePath:'',
         userData:{},
         formatDate,
 		formatDateShort,
@@ -254,6 +264,12 @@ export default {
     });
   },
   methods: {
+    // 笔记图片放大
+    showBigImg(path){
+          this.currentImagePath = path;
+          this.dialogVisibleBigImage = true;
+    },
+    
     routerTo(item) {
         if(item.courseId) {
             this.$router.push('/course/studyindex?id='+item.courseId);