图片放大

package.json

     "element-ui": "^2.10.1",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
+    "v-viewer": "^1.4.2",
     "vue": "^2.6.6",
     "vue-echarts": "^4.0.1",
+    "vue-photo-preview": "^1.1.3",
     "vue-router": "^3.0.2",
     "vuex": "^3.1.0"
   },

src/config/api.js

         url: `${commPrefix}/tdSpec/update`
       },
       delete: {
-        method: 'delete',
+        method: 'put',
         url: `${commPrefix}/tdSpec/delete/:id`
       },
     },

src/main.js

 
 Vue.use(Element)
 
+import preview from 'vue-photo-preview'
+import 'vue-photo-preview/dist/skin.css'
+Vue.use(preview)
+
 Vue.config.productionTip = false
 Vue.component('v-chart', ECharts)
 Vue.component('xm-icon', XMIcon)

src/views/carManagement/management.vue

               prop="carImage"
               label="车辆图片">
               <template slot-scope="scope">
-              <el-image
-                  style="width: 100px; height: 100px"
-                  :src="scope.row.carImage"
-                  fit="fill"></el-image>
+              <el-image :src="scope.row.carImage" preview  style="width: 96px;" ></el-image>
               </template>
       </el-table-column>
           <el-table-column
     },
     getPage() {
       this.getManagement(this.formInline);
+      this.$previewRefresh()
     },
     handleSizeChange(val) {
       // console.log(`每页 ${val} 条`)

src/views/cart/list.vue

               align='center'
               label="驾驶员照片">
         <template slot-scope="scope">
-          <el-image
-                  style="width: 100px; height: 100px"
-                  :src="scope.row.driverImage"
-                  fit="fill"></el-image>
+          <el-image style="width: 96px;" :src="scope.row.driverImage" preview fit="fill"></el-image>
         </template>
       </el-table-column>
       <!-- <el-table-column

src/views/followup/list.vue

       label="头像">
       <template slot-scope="scope">
         <el-image
+          preview
           style="width: 100px; height: 100px"
           :src="scope.row.avatar"
           fit="fill">
     },
     getPage() {
       this.getFollowup(this.formInline)
+      this.$previewRefresh()
       // window.console.log(this.$store)
       // this.$store.commit('security/foo')
       // this.$store.dispatch('security/getSecurity')

src/views/goodsManager/GoodsType.vue

         }
 
         this.$message('操作成功')
+        this.getList()
       }).catch((err) => {
         this.$message.error(err.message || err)
       })

src/views/goodsManager/goodManager/index.vue

         <el-table-column prop="goodsName" label="商品名称"></el-table-column>
         <el-table-column label="图片" width="300">
           <template slot-scope="scope">
-            <img :src="scope.row.imgUrl" style="width: 96px;" />
+            <img :src="scope.row.imgUrl" preview style="width: 96px;" />
           </template>
         </el-table-column>
         <el-table-column label="类型">

src/views/lobby/list.vue

     </el-table-column>
     <el-table-column label="头像" width="150" >
            <template slot-scope="scope">
-              <img :src="scope.row.carImage" width="150" class="head_pic"/>
+              <img :src="scope.row.carImage" preview width="150" class="head_pic"/>
           </template>
     </el-table-column>
     <el-table-column

src/views/person/list.vue

           label="照片">
           <template slot-scope="scope">
             <div class="avatar">
-              <img :src="scope.row.avatar" alt="" />
+              <img :src="scope.row.avatar" preview alt="" />
             </div>
           </template>
         </el-table-column>

src/views/security/list.vue

               prop="carImage"
               label="车辆图片">
               <template slot-scope="scope">
-              <el-image
+              <el-image preview
                   style="width: 100px; height: 100px"
                   :src="scope.row.carImage"
                   fit="fill"></el-image>
     },
     getPage() {
       this.getSecurity(this.formInline)
+      this.$previewRefresh()
       // window.console.log(this.$store)
       // this.$store.commit('security/foo')
       // this.$store.dispatch('security/getSecurity')