소스 검색

图片旋转

Michael Wang 6 년 전
부모
커밋
8d44b94d97
1개의 변경된 파일18개의 추가작업 그리고 2개의 파일을 삭제
  1. 18 2
      src/features/OnlineExam/Examing/UploadPhotos.vue

+ 18 - 2
src/features/OnlineExam/Examing/UploadPhotos.vue

@@ -48,8 +48,22 @@
         <Icon type="ios-camera" size="40"></Icon>
       </div>
     </Upload>
-    <Modal title="View Image" v-model="visible">
-      <img :src="imgUrl" v-if="visible" style="width: 100%" />
+    <Modal title="查看图片" v-model="visible" footer-hide>
+      <img
+        :src="imgUrl"
+        v-if="visible"
+        :style="{ width: '100%', rotate: rotate + 'deg' }"
+      />
+      <div style="display: flex; justify-content: center;">
+        <Button
+          style="margin: auto;"
+          type="primary"
+          icon="md-redo"
+          @click="rotate += 90"
+        >
+          旋转图片
+        </Button>
+      </div>
     </Modal>
     <div>最多上传6张图片</div>
   </div>
@@ -77,6 +91,7 @@ export default {
       // ],
       imgUrl: "",
       visible: false,
+      rotate: 0,
       defaultList2: [...this.defaultList],
       uploadList: [],
       uploadUrl: "",
@@ -87,6 +102,7 @@ export default {
   methods: {
     handleView(name) {
       this.imgUrl = name;
+      this.rotate = 0;
       this.visible = true;
     },
     handleRemove(file) {