t

src/views/news/components/popup/SelectImg.vue

@@ -15,16 +15,22 @@
          <img :src="imgSrc" class="img" />
        </div>
      </div>
-     <div class="xl-form" style="padding: 0 0 20px;">
-      <el-button class="xl-form-btn t2" @click="close">关 闭</el-button>
-      <el-button class="xl-form-btn t1" @click="close('confirm')">确定</el-button>
+     <div class="xl-form" style="padding: 20px 0;">
+      <el-button class="xl-form-btn t2" @click="dealImgPopup">关 闭</el-button>
+      <el-button class="xl-form-btn t1" @click="dealImgPopup('confirm')">去裁剪</el-button>
     </div>
     </el-dialog>
+    <cropper-img
+      :isShow="isCIShow"
+      :curObj="uploadObj"
+      @close="cuImgClose"
+    />
   </div>
 </template>
 <script>
+import CropperImg from '@/components/Common/CropperImg'
 export default {
-  components: { },
+  components: { CropperImg },
   mixins,
   props: {
     isShow: Boolean,
@@ -32,18 +38,37 @@ export default {
   },
   data() {
     return {
+      uploadObj: {},
       curIndex: 0,
+      isCIShow: false,
     }
   },
   watch: {
     isShow: function() {},
   },
   methods: {
-    close(str) {
+    cuImgOpen(url) {
+      this.uploadObj = {
+        url,
+        options: {
+          w: 500,
+          h: 350,
+        },
+      }
+      this.isCIShow = true
+    },
+    cuImgClose (url) {
+      this.isCIShow = false
+      if (url) {
+        this.$emit('close', url)
+      }
+    },
+    dealImgPopup(str) {
       if (str === 'confirm') {
         // console.log(this.imgTempArr[this.curIndex])
+        this.cuImgOpen(this.imgTempArr[this.curIndex])
         // return
-        this.$emit('close', this.imgTempArr[this.curIndex])
+        // this.$emit('close', this.imgTempArr[this.curIndex])
       } else {
         this.$emit('close')
       }