526互联

elementplus vue3 ts 单图预览封装

发布时间 2023-05-26 14:09:35作者: yjxQWQ
  <div class="demo-image__preview">
    <el-image
      style="width: 50px"
      :src="props.image"
      :zoom-rate="1.2"
      :preview-src-list="[props.image]"
      :initial-index="4"
      fit="cover"
    />
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  image: String,
});
</script>

<style scoped>
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>