vue2.x 预览图片组件

最新推荐文章于 2024-06-22 17:08:13 发布
最新推荐文章于 2024-06-22 17:08:13 发布
阅读量1.3k 收藏 5
点赞数 1
分类专栏： vue js 文章标签： elementui vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52943048/article/details/124959694
版权
js 同时被 2 个专栏收录
5 篇文章 0 订阅
订阅专栏
vue
4 篇文章 0 订阅
订阅专栏

     前段时间接了新需求，需要对图片进行预览以及文件的下载，没找到合适的组件来实现这需求，最终自己写了该组件来实现此功能，该组件可预览图片、视频，均可下载，有旋转、放大/缩小功能。【该组件没有用到第三方插件实现】

如果小伙伴们需要用到，可根据自己的需求进行修改

效果图：（背景颜色值，可自行修改）

用法：

HTML片段：

<template>
  <div
    id="picture-viewer"
    :style="maskContainer"
    @mousewheel="mousewheel"
  >
    <!-- 头部 -->
    <flexbox class="perview-header">
      <div class="left">{{ imgIndex + 1 }} / {{ imgLength }}</div>
      <div class="center">
        {{ bigImgName.slice(0, bigImgName.indexOf(".")) }}
      </div>
      <!-- @keyup.esc="closeViewer" -->
      <img
        class="close"
        src="./img/pre_close.png"
        @click="closeViewer"
      />
    </flexbox>
    <!-- 图片容器 -->
    <div ref="imgContainer" :style="imgContainer" class="imgContainer">
      <img
        v-if="bigShowType.isImage"
        ref="bigImg"
        :src="bigImageUrl"
        :style="bigImgStyle"
        alt=""
      />
      <flexbox
        v-if="!bigShowType.isImage && !isOpen"
        class="file-show"
        direction="column "
        justify="space-evenly"
      >
        <div class="file-icon" @click="fileHandles(bigShowType)" v-if="!isOpen">
          <img :src="bigShowType.icon" />
        </div>
        <div class="file-handle" v-if="!isOpen">
          <el-button
            type="primary"
            plain
            @click.native="fileHandle('download')"
          >
            下载
          </el-button>
        </div>
      </flexbox>
      <!-- tips -->
      <transition name="fade">
        <div v-show="showTips" class="tips">{{ tipsText }}</div>
      </transition>
    </div>
    <div class="fixedHandle">
      <!-- 操作按钮 -->
      <flexbox v-if="bigShowType.isImage" class="handleContainer">
        <img src="./img/pre_max.png" @click="enlarge" />
        <img src="./img/pre_min.png" @click="reduce" />
        <img
          style="padding: 4.5px"
          src="./img/pre_rotate.png"
          @click="rotate"
        />
        <img
          src="./img/pre_down.png"
          @click="downloadImg(bigImageUrl, bigImgName)"
        />
      </flexbox>
      <!-- 缩略图容器 -->
      <div v-if="imgLength > 1" class="thumbnailContainer">
        <ul>
          <li
            v-for="(item, index) in imgData"
            ref="thumbnailItem"
            :key="index"
            @click="switchImgUrl(index, $event)"
          >
            <img v-if="isShowImage(item.url)" :src="item.url" alt="" />
            <img
              v-if="!isShowImage(item.url)"
              :src="getFileTypeIconWithSuffix(item.url)"
              alt=""
            />
          </li>
        </ul>
      </div>
    </div>
    <!-- 左边箭头 -->
    <div
      class="leftArrowCon"
      :style="{ zIndex: isOpen ? -1 : '' }"
      @click="handlePrev"
      @mouseenter="enterLeft"
      @mouseout="outLeft"
    >
      <img
        v-show="leftArrowShow"
        class="leftArrow"
        src="./img/pre_left.png"
        @click="enlarge"
      />
    </div>
    <!-- 右边箭头 -->
    <div
      class="rightArrowCon"
      :style="{ zIndex: isOpen ? -1 : '' }"
      @click="handleNext"
      @mouseenter="enterRight"
      @mouseout="outRight"
    >
      <img
        v-show="rightArrowShow"
        class="rightArrow"
        src="./img/pre_right.png"
      />
    </div>
    <video
      :src="url"
      v-if="isOpen"
      controls
      style="
        position: absolute;
        top: 177px;
        left: 50%;
        width: 750px;
        margin-left: -335px;
      "
    ></video>
  </div>
</template>

js片段：

<script>
export default {
  name: "Vue2PictureViewer",//vue2 图片预览
  props: {
    imgData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    background: {
      type: String,
      default: "rgba(0,0,0,0.4)"
    },
    // 选择的索引
    selectIndex: {
      type: Number,
      default: -1
    },
    appendToBody: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isOpen: false,
      // 默认不显示左右切换箭头
      leftArrowShow: false,
      rightArrowShow: false,
      // 图片容器数据
      rotateDeg: 0,
      bigImageUrl: "",
      bigShowType: { isImage: true, icon: "" }, // 不是图片的时候 展示 icon
      bigImgName: "",
      imgLength: 0,
      imgIndex: 0,
      showTips: false,
      tipsText: "",
      bigImgConTrnWidth: "",
      bigImgConTrnHeight: "",
      maskContainer: {
        width: "100%",
        height: "100%",
        background: this.background,
        position: "fixed",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0
      },
      imgContainer: {
        width: "auto",
        height: "auto",
        position: "absolute",
        top: "50%",
        left: "50%",
        "z-index": 100,
        transform: "translate(-50%, -50%)"
      },
      bigImgStyle: {
        display: "block",
        width: "80px",
        height: "80px",
        position: "absolute",
        top: 50 + "%",
        left: 50 + "%",
        marginLeft: "",
        marginTop: "",
        userSelect: "none"
      },
      url: ""
    };
  },
  mounted() {
    if (!this.appendToBody) {
      document
        .getElementById("picture-viewer")
        .addEventListener("click", (e) => {
          e.stopPropagation();
        });
    }

    if (this.appendToBody) {
      document.body.appendChild(this.$el);
    }
    this.imgLength = this.imgData.length;
    this.imgIndex = this.selectIndex;
    this.$nextTick(() => {
      this.bigImageUrl = this.imgData[this.imgIndex].url;
      this.getShowTypeInfo(this.bigImageUrl);
      this.bigImgName = this.imgData[this.imgIndex].name;
      if (this.imgLength > 1) {
        // 大于1的时候才会展示缩略图
        var item = this.$refs.thumbnailItem;
        item[this.imgIndex].className = "borderActive";
      }
    });
    var self = this;
    this.$refs.bigImg.onload = () => {
      self.init();
    };
    this.maskContainer["z-index"] = 999999;
  },
  beforeDestroy() {
    if (document.getElementById("picture-viewer")) {
      document
        .getElementById("picture-viewer")
        .removeEventListener("click", (e) => {
          e.stopPropagation();
        });
    }

    if (this.appendToBody && this.$el && this.$el.parentNode) {
      this.$el.parentNode.removeChild(this.$el);
    }
  },
  methods: {

    mousewheel(e) {
      let _this = this;
      let ev = e || window.event;
      //  ;
      if (ev.wheelDelta) {
        if (ev.wheelDelta > 0) {
          //当滑轮向上滚动时
          _this.enlarge();
        }
        if (ev.wheelDelta < 0) {
          _this.reduce();
        }
      } else if (ev.detail) {
        if (ev.detail > 0) {
          //当滑轮向上滚动时
          _this.enlarge();
        }
        if (ev.detail < 0) {
          _this.reduce();
        }
      }
    },
    // init
    init() {
      const screenW =
        document.documentElement.offsetWidth || document.body.offsetWidth;
      const screenH =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      this.$nextTick(function () {
        const ratio = [0.1, 0.2, 0.3, 0.4, 0.5, 0.7, 0.8, 0.9];
        for (const item of ratio) {
          if (
            this.$refs.bigImg.naturalWidth * item < screenW &&
            this.$refs.bigImg.naturalHeight * item < screenH - 200
          ) {
            this.bigImgConTrnWidth = this.$refs.bigImg.naturalWidth * item;
            this.bigImgConTrnHeight = this.$refs.bigImg.naturalHeight * item;
            this.imgContainer.width = this.bigImgConTrnWidth + "px";
            this.imgContainer.height = this.bigImgConTrnHeight + "px";
            this.bigImgStyle.width = this.bigImgConTrnWidth + "px";
            this.bigImgStyle.height = this.bigImgConTrnHeight + "px";
            this.bigImgStyle.marginLeft = -(this.bigImgConTrnWidth / 2) + "px";
            this.bigImgStyle.marginTop = -(this.bigImgConTrnHeight / 2) + "px";
          }
        }
      });
    },
    // rotate init
    rotateInit() {
      const screenH =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      const ratio = [0.1, 0.2, 0.3, 0.4, 0.5, 0.7, 0.8, 0.9];
      for (const item of ratio) {
        if (this.$refs.bigImg.naturalWidth * item < screenH - 160) {
          this.bigImgConTrnWidth = this.$refs.bigImg.naturalWidth * item;
          this.bigImgConTrnHeight = this.$refs.bigImg.naturalHeight * item;
          this.imgContainer.width = this.bigImgConTrnWidth + "px";
          this.imgContainer.height = this.bigImgConTrnHeight + "px";
          this.bigImgStyle.width = this.bigImgConTrnWidth + "px";
          this.bigImgStyle.height = this.bigImgConTrnHeight + "px";
          this.bigImgStyle.marginLeft = -(this.bigImgConTrnWidth / 2) + "px";
          this.bigImgStyle.marginTop = -(this.bigImgConTrnHeight / 2) + "px";
        }
      }
    },
    // 放大
    enlarge() {
      this.$nextTick(function () {
        const screenW =
          document.documentElement.offsetWidth || document.body.offsetWidth;
        const screenH =
          document.documentElement.scrollHeight || document.body.scrollHeight;
        if (
          (this.$refs.bigImg.offsetWidth >= this.$refs.bigImg.offsetHeight &&
            this.$refs.bigImg.offsetHeight * 2 < screenH * 2) ||
          (this.$refs.bigImg.offsetHeight >= this.$refs.bigImg.offsetWidth &&
            this.$refs.bigImg.offsetWidth * 2 < screenW * 2)
        ) {
          this.$refs.bigImg.style.width =
            this.$refs.bigImg.offsetWidth * 1.3 + "px";
          this.$refs.bigImg.style.height =
            this.$refs.bigImg.offsetHeight * 1.3 + "px";
          this.$refs.bigImg.style.left = "50%";
          this.$refs.bigImg.style.top = "50%";
          this.bigImgStyle.marginLeft =
            -this.$refs.bigImg.offsetWidth / 2 + "px";
          this.bigImgStyle.marginTop =
            -this.$refs.bigImg.offsetHeight / 2 + "px";
        }
      });
    },
    // 缩小
    reduce() {
      if (this.$refs.bigImg.offsetWidth > 80) {
        /**
           * clientWidth = width + padding
             offsetWidth = width + padding + border  */
        this.$refs.bigImg.style.width =
          this.$refs.bigImg.offsetWidth * 0.7 + "px";
        this.$refs.bigImg.style.height =
          this.$refs.bigImg.offsetHeight * 0.7 + "px";
        this.$refs.bigImg.style.left = "50%";
        this.$refs.bigImg.style.top = "50%";
        this.bigImgStyle.marginLeft = -this.$refs.bigImg.offsetWidth / 2 + "px";
        this.bigImgStyle.marginTop = -this.$refs.bigImg.offsetHeight / 2 + "px";
      }
    },
    // 旋转
    rotate() {
      const numberAngle = [45,90,120,160,180,230,270,310,360]
      const numberAngleSelect = numberAngle[this.rotateDeg] ?? 90
       if(this.rotateDeg === numberAngle.length){
         this.$refs.bigImg.style.transform =`rotate(${numberAngleSelect}deg)`;
        this.init();
        this.rotateDeg = 0;
       }else{
          this.$refs.bigImg.style.transform =`rotate(${numberAngleSelect}deg)`;
        this.rotateInit();
        this.rotateDeg++;
       }
    },
    // 点击缩略图切换图片
    switchImgUrl(num, e) {
      this.isOpen = false;
      var item = this.$refs.thumbnailItem;
      item.forEach(function (i) {
        i.className = "";
      });
      this.imgIndex = num;
      this.bigImageUrl = this.imgData[num].url;
      this.getShowTypeInfo(this.bigImageUrl);
      this.bigImgName = this.imgData[num].name;
      e.currentTarget.className = "borderActive";
      if (this.bigShowType.isImage) {
        this.init();
      }
    },
    // 切换到上一张
    handlePrev() {
      this.isOpen = false;
      if (this.imgIndex <= 0) {
        this.tips("已经是第一张了!");
        this.imgIndex = 0;
      } else {
        if (this.$refs.bigImg) {
          this.$refs.bigImg.style.transform = "rotate(0deg)";
          this.rotateDeg = 0;
        }

        this.imgIndex--;
        this.bigImageUrl = this.imgData[this.imgIndex].url;
        this.getShowTypeInfo(this.bigImageUrl);
        this.bigImgName = this.imgData[this.imgIndex].name;
        var item = this.$refs.thumbnailItem;
        item.forEach(function (i) {
          i.className = "";
        });
        item[this.imgIndex].className = "borderActive";
        if (this.bigShowType.isImage) {
          this.init();
        }
      }
    },
    // 切换到下一张
    handleNext() {
      this.isOpen = false;
      if (this.imgIndex + 1 >= this.imgData.length) {
        this.tips("已经是最后一张了!");
      } else {
        if (this.$refs.bigImg) {
          this.$refs.bigImg.style.transform = "rotate(0deg)";
          this.rotateDeg = 0;
        }

        this.imgIndex++;
        this.bigImageUrl = this.imgData[this.imgIndex].url;
        this.getShowTypeInfo(this.bigImageUrl);
        this.bigImgName = this.imgData[this.imgIndex].name;

        var item = this.$refs.thumbnailItem;
        item.forEach(function (i) {
          i.className = "";
        });
        item[this.imgIndex].className = "borderActive";
        if (this.bigShowType.isImage) {
          this.init();
        }
      }
    },
    // 提示框
    tips(msg) {
      this.showTips = true;
      this.tipsText = msg;
      const _this = this;
      setTimeout(function () {
        _this.showTips = false;
      }, 1000);
    },
    // 下载图片
    downloadImg(data, filename) {
      this.downloadImage(data, filename);
    },
    // 鼠标左移
    enterLeft() {
      this.leftArrowShow = true;
    },
    outLeft() {
      this.leftArrowShow = false;
    },
    // 鼠标右移
    enterRight() {
      this.rightArrowShow = true;
    },
    outRight() {
      this.rightArrowShow = false;
    },
    // 关闭查看器
    closeViewer(e) {
      this.$emit("close-viewer");
    },
    fileHandles(item) {
      let _this = this;
      const temps = this.bigImageUrl ? this.bigImageUrl.split(".") : [];
      var ext = "";
      if (temps.length > 0) {
        ext = temps[temps.length - 1];
      } else {
        ext = "";
      }
      let moviesArray = ["mp4", "3gp", "m4v", "avi", "mkv", "webm"];
      if (moviesArray.includes(ext)) {
        this.isOpen = !this.isOpen;
        this.url = this.bigImageUrl;
      } else {
        this.fileHandle();
      }
    },
    /** 附件逻辑 */
    fileHandle(type) {
      var a = document.createElement("a");
      a.href = this.bigImageUrl;
      a.download = this.bigImgName ? this.bigImgName : "文件";
      a.target = "_black";
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },
    getShowTypeInfo(url) {
      const temps = url ? url.split(".") : [];
      var ext = "";
      if (temps.length > 0) {
        ext = temps[temps.length - 1];
      } else {
        ext = "";
      }
      var icon = "";
      var isImage = true;
      if (this.arrayContain(["jpg", "png", "gif", "jpeg"], ext)) {
        isImage = true;
        icon = require("@/assets/img/file_img.png");
      } else if (this.arrayContain(["mp4", "mp3", "avi"], ext)) {
        isImage = false;
        icon = require("@/assets/home_img/MP4.png");
      } else if (this.arrayContain(["xlsx", "xls", "XLSX", "XLS"], ext)) {
        isImage = false;
        icon = require("@/assets/home_img/XLS.png");
      } else if (this.arrayContain(["doc", "docx", "DOC", "DOCX"], ext)) {
        isImage = false;
        icon = require("@/assets/home_img/DOC.png");
      } else if (this.arrayContain(["rar", "zip"], ext)) {
        isImage = false;
        icon = require("@/assets/home_img/zip_rar.png");
      } else if (ext === "pdf") {
        isImage = false;
        icon = require("@/assets/home_img/ppt.png");
      } else if (ext === "ppt" || ext === "pptx") {
        isImage = false;
        icon = require("@/assets/home_img/ppt.png");
      } else if (this.arrayContain(["txt", "text"], ext)) {
        isImage = false;
        icon = require("@/assets/home_img/txt.png");
      } else {
        isImage = false;
        icon = require("@/assets/img/file_unknown.png");
      }
      this.bigShowType = { isImage: isImage, icon: icon };
    },
    getFileTypeIconWithSuffix(url) {
      const temps = url ? url.split(".") : [];
      var ext = "";
      if (temps.length > 0) {
        ext = temps[temps.length - 1];
      } else {
        ext = "";
      }
      if (this.arrayContain(["jpg", "png", "gif", "jpeg"], ext)) {
        return require("@/assets/img/file_img.png");
      } else if (this.arrayContain(["mp4", "mp3", "avi"], ext)) {
        return require("@/assets/home_img/MP4.png");
      } else if (this.arrayContain(["xlsx", "xls", "XLSX", "XLS"], ext)) {
        return require("@/assets/home_img/XLS.png");
      } else if (this.arrayContain(["doc", "docx", "DOC", "DOCX"], ext)) {
        return require("@/assets/home_img/DOC.png");
      } else if (this.arrayContain(["rar", "zip"], ext)) {
        return require("@/assets/home_img/zip_rar.png");
      } else if (ext === "pdf") {
        return require("@/assets/home_img/ppt.png");
      } else if (ext === "ppt" || ext === "pptx") {
        return require("@/assets/home_img/ppt.png");
      } else if (this.arrayContain(["txt", "text"], ext)) {
        return require("@/assets/home_img/txt.png");
      }
      return require("@/assets/img/file_unknown.png");
    },
    isShowImage(url) {
      const temps = url ? url.split(".") : [];
      var ext = "";
      if (temps.length > 0) {
        ext = temps[temps.length - 1];
      } else {
        ext = "";
      }
      if (this.arrayContain(["jpg", "png", "gif", "jpeg"], ext)) {
        return true;
      }
      return false;
    },
    arrayContain(array, string) {
      return array.some((item) => {
        return item === string;
      });
    },
    downloadImage(data, filename) {
      var httpindex = data.indexOf("http");
      let _this = this;
      if (httpindex === 0) {
        const image = new Image();
        // 解决跨域 canvas 污染问题
        image.setAttribute("crossOrigin", "Anonymous");
        image.onload = function () {
          let canvas = document.createElement("canvas");
          canvas.width = image.width;
          canvas.height = image.height;
          let context = canvas.getContext("2d");
          context.drawImage(image, 0, 0, image.width, image.height);
          let dataURL = canvas.toDataURL("image/png");
          //
          //
          // 生成一个 a 标签
          let a = document.createElement("a");
          // 创建一个点击事件
          let event = new MouseEvent("click");
          // 将 a 的 download 属性设置为我们想要下载的图片的名称，若 name 不存在则使用'图片'作为默认名称
          a.download = filename || "图片";
          // 将生成的 URL 设置为 a.href 属性
          let blob = _this.dataURLtoBlob(dataURL);
          a.href = URL.createObjectURL(blob);
          // 触发 a 的点击事件
          a.dispatchEvent(event);
        };
        image.src = data;
      } else {
        // 生成一个 a 标签
        let a = document.createElement("a");
        // 创建一个点击事件
        let event = new MouseEvent("click");
        a.download = filename || "图片";
        // 将生成的 URL 设置为 a.href 属性
        a.href = data;
        // 触发 a 的点击事件
        a.dispatchEvent(event);
      }
    },
    dataURLtoBlob(dataurl) {
      // eslint-disable-next-line one-var
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], {
        type: mime
      });
    }
  },

};
</script>

css片段：

<style lang="scss" scoped>
.perview-header {
  width: 100%;
  height: 40px;
  background: rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0.8);
  line-height: 40px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 6000;
  padding: 10px;
  .left {
    flex-shrink: 0;
    font-size: 14px;
  }
  .center {
    text-align: center;
    flex: 1;
    padding: 0 20px;
  }
  .close {
    display: block;
    padding: 8px;
    width: 40px;
    height: 40px;
    cursor: pointer;
  }
}

.leftArrowCon {
  width: 30%;
  height: calc(100% - 40px);
  background: transparent;
  position: absolute;
  top: 40px;
  left: 0;
  z-index: 98;
  cursor: pointer;
}
.rightArrowCon {
  width: 30%;
  height: calc(100% - 40px);
  background: transparent;
  position: absolute;
  top: 40px;
  right: 0;
  z-index: 99;
  cursor: pointer;
}
.leftArrow {
  position: absolute;
  top: 50%;
  left: 30px;
  margin-top: -60px;
  transition: all 0.5s;
  width: 50px;
  height: 50px;
  pointer-events: none;
}
.rightArrow {
  position: absolute;
  top: 50%;
  right: 30px;
  margin-top: -60px;
  width: 50px;
  height: 50px;
  transition: all 0.5s;
  pointer-events: none;
}
.imgContainer .tips {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  line-height: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  min-width: 150px;
  margin-left: -60px;
  margin-top: -20px;
  border-radius: 6px;
  padding: 4px 4px;
  font-size: 14px;
}
.fixedHandle {
  width: 800px;
  height: 140px;
  position: fixed;
  left: 50%;
  bottom: 0;
  margin-left: -400px;
  overflow: hidden;
  z-index: 100;
}
.handleContainer {
  width: 210px;
  height: 40px;
  background: rgba(0, 0, 0, 0.6);
  line-height: 40px;
  border-radius: 20px;
  position: absolute;
  left: 50%;
  bottom: 100px;
  padding: 0 14px;
  margin-left: -100px;

  img {
    display: block;
    width: 40px;
    height: 40px;
    padding: 8px;
    margin: 0 2px;
    cursor: pointer;
  }
}
.handleItem {
  width: 28px;
  height: 28px;
  color: white;
}
ul {
  padding: 0;
  margin: 0;
}
ul li {
  list-style: none;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-left: 20px;
  cursor: pointer;
}

.thumbnailContainer {
  max-width: 800px;
  background: rgba(255, 255, 255, 0.7);
  position: absolute;
  left: 50%;
  bottom: 0;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  transform: translate(-50%, 0%);
  overflow-x: auto;
  overflow-y: hidden;
}

.thumbnailContainer ul {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  white-space: nowrap;
}
.thumbnailContainer ul li {
  display: inline-block;
  width: 38px;
  height: 38px;
  box-sizing: content-box;
  margin-left: 10px;
  user-select: none;
}
.thumbnailContainer ul li:last-child {
  margin-right: 10px;
}
.thumbnailContainer ul li img {
  display: inline-block;
  width: 38px;
  height: 38px;
  border-radius: 3px;
  box-sizing: content-box;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

/* 添加border */
.borderActive {
  box-shadow: 0px 4px 7px 0px rgb(241, 140, 112);
}
/* 修改原生的滚动条 */
::-webkit-scrollbar {
  /* 血槽宽度 */
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  /* 拖动条 */
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}
::-webkit-scrollbar-track {
  /* 背景槽 */
  background: #ddd;
  border-radius: 6px;
}
/** 文件展示*/
.file-show {
  position: absolute;
  top: 60%;
  left: 50%;
  width: 450px;
  height: 260px;
  margin-top: -150px;
  margin-left: -225px;
  background-color: white;
  border-radius: 10px;
  padding: 0 80px;
  .file-icon {
    // flex: 1;
    cursor: pointer;
    img {
      display: block;
      width: 60px;
      &:hover {
        transform: rotateY(180deg);
        // transform: scale(0.5);
        // transition: all 0.2s ease-in;
      }
    }
  }

  .file-handle {
    button {
      display: block;
      width: 120px;
      margin-left: 0;
      margin-right: 0;
      height: 34px;
    }
    button:first-child {
      margin-bottom: 20px;
    }
  }
}
</style>

§字母搬运工§
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
推荐一款高效易用的Vue图片预览组件：heVue-img-preview
gitblog_00013的博客
03-29 652
推荐一款高效易用的Vue图片预览组件：heVue-img-preview 项目地址:https://gitcode.com/heyongsheng/hevue-img-preview 在Web开发中，图片预览是一个常见的需求，而找到一个既稳定又易于集成的解决方案往往能提高开发效率。今天，我要向大家推荐的是Heyongsheng开发的一个 Vue.js 图片预览组件——heVue-img-previ...
vue预览图片 v-viewer
weixin_44955769的博客
08-18 902
效果 1、安装依赖 npm install v-viewer --save 2、全局引入 import Vue from 'vue'; import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer) Viewer.setDefaults({ Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar'
Vue3图片显示组件，支持多张图片，缩略图，全屏动态加载大图
最新发布
qiuzen的博客
06-22 664
通过imgs参数传入多张图片，图片路径中包含 /small/ 表示是缩略图，将 /small/ 改为 / 即是该图片的大图。组件首先显示缩略图，然后在mounted事件中js动态加载大图，加载完毕后用大图的内容替换缩略图，实现高清图片的丝滑加载显示。点击图片后进入全屏模式，可浏览整组图片，同样会在后台用Js动态加载大图，实现高清图片的丝滑加载显示。邀请您加入「社区资讯服务」创业微信群，共同探讨打造社区资讯服务的美好未来。以上如有错漏之处，敬请大家指正。微信：TobeBuda。
vue2使用v-viewer实现图片预览
weixin_43784341的博客
08-02 4248
在Vue.js 2中使用v-viewer插件实现图片预览功能相对简单。v-viewer是一个Vue.js的图片预览插件，可以轻松实现图片的放大、缩小和滑动预览等功能。中文文档：Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作 | Mirari’s Blog。在上面的代码中，我们将 v-viewer 指令应用在 img 标签上，这样点击图片时会触发预览效果。用于图片浏览的Vue组件，支持旋转、缩放、翻转等操作，基于viewer.js。
Vue2 图片展示
zhang2383906154的博客
08-27 245
【代码】Vue2 图片展示。
vue中图片及时预览 小demo
weixin_30394251的博客
08-31 253
<div class="form-in camear-box"> 　　<div class="dingwei clearfix" @click="yulan"> 　　　　<p>图片</p> 　 　　　　<input type="fil...
vue elementUi 通过点击预览按钮 实现放大预览图片
浮生的博客
07-12 4673
【代码】vue elementUi 通过点击预览按钮 实现放大预览图片。
基于2.X的图片预览组件
09-03
在这个“基于2.X的图片预览组件”中，我们将深入探讨如何在Vue 2.x版本中构建一个功能完备的图片预览功能。 首先，我们要明白Vue 2.x的核心概念，包括组件化、响应式数据绑定、指令系统以及生命周期等。组件是Vue....
基于Vue2x的图片预览插件的示例代码
08-27
通过以上步骤，你已经完成了一个基于Vue2x的图片预览插件的开发，包括核心组件的编写、插件的安装、组件的使用以及项目的打包发布。这只是一个基础示例，实际开发中，你可能需要考虑更多的功能和优化，如图片懒加载...
vue图片上传本地预览组件使用详解
10-17
本文将详细介绍如何使用Vue构建一个图片上传本地预览的组件。 首先，我们需要创建一个Vue组件，这里命名为`imageView.vue`。这个组件包含一个模板(`<template>`), 脚本(`<script>`), 和样式(`<style>`): ```html ...
Vue3.x + Pinia + Cesium 三维模型查看
01-24
Vue3.x 引入了 Composition API，这是一套用于组织组件逻辑的新工具，替代了之前的 Option API。Composition API 提供更好的代码复用、模块化和更好的类型推断，使得开发更加灵活和高效。 Pinia 是 Vue.js 的状态...
vue.js图片转Base64上传图片并预览的实现方法
12-11
前端在接收到Base64数据后，直接设置为`<img>`标签的`src`属性即可预览图片。 使用Element UI的`<el-upload>`组件，我们可以轻松地实现这个功能。以下是一个示例代码： ```html ref='upload' :auto-upload='...
vue2中点击按钮使用预览pdf,word文件,图片3种格式的写法
weixin_65767506的博客
11-23 448
大家如果有不懂得地方,或者逻辑之类看不明白的,或者我少写了代码的.欢迎大家留言看到我会第一时间回复,并且修改和纠正.使用 npm install vue-pdf 命令下载安装,在compons里边注册一下。我这里是点击el-table的某一列,使用的插槽。baseUrl是公共路径,需要根据实际情况修改。data中定义的数据,
vue实现基于elementui的全屏图片自定义预览
kirinlau的专栏
05-10 1727
到elementUI看了一下，发现el-image是有这个功能的，而且支持旋转、放大缩小，原图，鼠标滚动，列表预览等基础功能，但是是基于小图点击预览大图的，官方api也没有提供触发预览的事件，所以手动实现了它的预览调用功能
(vue2)放大上传的图片
nyf_unknow的博客
02-02 284
【代码】(vue)放大上传的图片。
vue项目中移动端的图片预览
qq_40919692的博客
04-08 626
首先我试过三种方式分别是wc-view、vant中的upload组件、v-viewer插件（也可用于pc端）。 这三种的差别在于 wc-view：只可以放大预览，不可以手动放大图片。 vant中的upload组件：可以放大预览，也可以手动放大，但是它不可以无限放大。 v-viewer：是既可以放大预览，也可以手动放大，最终我选择了这一钟 1、wc-view插件的方式 首先安装依赖 npm i wc-view --save-dev 在main.js中引入文件 import wcView from 'wc-v
Vue实现pc/移动端图片预览、放大、缩小、旋转的效果
Dreamy smile
10-22 1721
实现pc/移动端图片预览、放大、缩小、旋转的效果 git => https://github.com/mirari/v-viewer 使用 1.npm install v-viewer 2.在全局引入或局部引入 全局引入 `import ‘viewerjs/dist/viewer.css’; import ‘…/static/css/defaultstyle.css’; `Vue.use(Viewer); <viewer :images="images"> <i.
Vue2瀑布流图片展示（Waterfall）
Mr Dear的博客
12-06 4291
Vue2使用纯CSS和JS计算两种方式实现的瀑布流图片展示组件
Vue2 实现图片的拖拽、缩放、旋转
Web_boom的博客
01-17 3830
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
"Vue2.x和Vue3.x面试常问知识点-SPA单页应用的优缺点
在Vue.js中，Vue2.x和Vue3.x是两个常见的版本。这篇文章主要提供了关于Vue2.x和Vue3.x的一些面试常问知识点。 首先，文章解释了SPA（Single Page Application）的概念及其优缺点。SPA是一种Web页面的设计模式，它在...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值