图片预览

shuishen

2021-08-13 06833fa81269e7f29b8f1c663d38eb1117ab9509

图片预览

 src/styles/common.scss

@@ -19,12 +19,42 @@
//通用配置
@import './normalize.scss';

a{
a {
  text-decoration: none;
  color:#333;
  color: #333;
}
*{

* {
  outline: none;
}

//滚动条样式
@include scrollBar;
@include scrollBar;


.see-img-box {

  .el-dialog {
    width: 840px;
    height: 540px;

    .el-dialog__body {
      padding: 4px;
      position: relative;
      height: calc(100% - 62px);
    }

    img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      height: calc(100% - 8px);
      max-width: calc(100% - 8px);
      max-height: calc(100% - 8px);
    }
  }

}

 src/views/resource/attach.vue

@@ -43,6 +43,7 @@
                <el-button type="text"
                           icon="el-icon-download"
                           size="small"
                           v-show="!fileFormat(scope.row)"
                           @click="seeImages(scope.row)">图片预览
                </el-button>
            </template>
@@ -61,6 +62,15 @@
                       :upload-after="uploadAfter">
            </avue-form>
        </el-dialog>

        <el-dialog title="图片预览"
                   append-to-body
                   :visible.sync="imgSee"
                   class="see-img-box">
            <img :src="imgUrl"
                 alt="">
        </el-dialog>

    </basic-container>
</template>

@@ -193,6 +203,8 @@
                    },
                ],
            },
            imgSee: false,
            imgUrl: ""
        };
    },
    computed: {
@@ -334,20 +346,19 @@
        },

        seeImages (row) {
            this.imgUrl = "";
            this.imgUrl = row.link;

            this.imgSee = true;
        },

        fileFormat (row) {
            var index = row.link.lastIndexOf(".");
            var ext = row.link.substr(index + 1);
            console.log(ext)

            console.log("该文件是否为图片：" + isAssetTypeAnImage(ext));

            function isAssetTypeAnImage (ext) {
                return [

                    'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].

                    indexOf(ext.toLowerCase()) == -1;

            }
            return [
                'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].
                indexOf(ext.toLowerCase()) == -1;
        }
    },
};