增加图片预览组件（可旋转）

src/components/app-image-romate/app-image-romate.vue

+<template>
+  <div class='app-image-preview'>
+      <el-image :src="data[name]" :previewSrcList="previewList" :disabled="disabled">
+      </el-image>
+  </div>
+</template>
+<script lang = 'ts'>
+import { Vue, Component, Prop, Watch, Provide } from 'vue-property-decorator';
+import { Subject, Unsubscribable } from 'rxjs';
+
+@Component({})
+export default class AppImageRomate extends Vue {
+
+    /**
+     * 表单状态
+     *
+     * @type {any}
+     * @memberof AppImageRomate
+     */
+    @Prop() formState: any;
+
+    /**
+     * 图片数据
+     *
+     * @type {any}
+     * @memberof AppImageRomate
+     */
+    @Prop() data!: any;
+
+    /**
+     * 字段名
+     *
+     * @type {any}
+     * @memberof AppImageRomate
+     */
+    @Prop() name: any;
+
+    /**
+     * 禁用状态
+     *
+     * @type {boolean}
+     * @memberof AppImageRomate
+     */
+    @Prop() disabled: boolean = false;
+
+    /**
+     * 预览图片数组
+     *
+     * @type {boolean}
+     * @memberof AppImageRomate
+     */
+    public previewList:Array<any> = [];
+
+    /**
+     * 表单状态事件
+     *
+     * @private
+     * @type {(Unsubscribable | undefined)}
+     * @memberof AppImageUpload
+     */
+    private formStateEvent: Unsubscribable | undefined;
+
+    /**
+     * Vue生命周期
+     *
+     * @type {boolean}
+     * @memberof AppImageRomate
+     */
+    public created() {
+        if (this.formState) {
+            this.formStateEvent = this.formState.subscribe(($event: any) => {
+                // 表单加载完成
+                if(this.data && this.name) {
+                    this.handleData();
+                }
+            });
+        }
+    }
+
+    /**
+     * 数据处理
+     *
+     * @type {boolean}
+     * @memberof AppImageRomate
+     */
+    public handleData() {
+        this.previewList.push(this.data[this.name]);
+    }       
+
+}
+
+</script>
\ No newline at end of file