兰宝车间质量管理系统-前端
疯狂的狮子Li
2023-04-03 97187b246b94dd58cb585ebaed7e8644d2f00119
src/components/ImagePreview/index.vue
@@ -1,48 +1,3 @@
<script setup lang="ts">
const props = defineProps({
  src: {
    type: String,
    default: ""
  },
  width: {
    type: [Number, String],
    default: ""
  },
  height: {
    type: [Number, String],
    default: ""
  }
});
const realSrc = computed(() => {
  if (!props.src) {
    return;
  }
  let real_src = props.src.split(",")[0];
  return real_src;
});
const realSrcList = computed(() => {
  if (!props.src) {
    return;
  }
  let real_src_list = props.src.split(",");
  let srcList:string[] = [];
  real_src_list.forEach(item => {
    return srcList.push(item);
  });
  return srcList;
});
const realWidth = computed(() =>
  typeof props.width == "string" ? props.width : `${props.width}px`
);
const realHeight = computed(() =>
  typeof props.height == "string" ? props.height : `${props.height}px`
);
</script>
<template>
  <el-image :src="`${realSrc}`" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="realSrcList" preview-teleported>
    <template #error>
@@ -53,6 +8,51 @@
  </el-image>
</template>
<script setup lang="ts">
const props = defineProps({
    src: {
        type: String,
        default: ""
    },
    width: {
        type: [Number, String],
        default: ""
    },
    height: {
        type: [Number, String],
        default: ""
    }
});
const realSrc = computed(() => {
    if (!props.src) {
        return;
    }
    let real_src = props.src.split(",")[0];
    return real_src;
});
const realSrcList = computed(() => {
    if (!props.src) {
        return;
    }
    let real_src_list = props.src.split(",");
    let srcList:string[] = [];
    real_src_list.forEach(item => {
        return srcList.push(item);
    });
    return srcList;
});
const realWidth = computed(() =>
    typeof props.width == "string" ? props.width : `${props.width}px`
);
const realHeight = computed(() =>
    typeof props.height == "string" ? props.height : `${props.height}px`
);
</script>
<style lang="scss" scoped>
.el-image {
  border-radius: 5px;