相思资源网 Design By www.200059.com

项目需求,嵌到elementUi里的小组件,写得不好,不喜勿喷,谢谢

父组件代码

<template>
 <div>
 <see-attachment :filesLists='files' :file='imgFile' v-if="showmask" @hideMask='showmask=false'></see-attachment>
 </div>
</template>
<script>
 import seeAttachment from "./seeAttachment.vue";
 export default {
 data() {
 return {
 showmask: false,
 imgFile: {}
 };
 },
 components: {
 seeAttachment
 },
 methods: {
 lookImg(f) {
 this.showmask = true;
 this.imgFile = f;
 },
 }
 };
</script>

子组件代码

<template>
 <div>
 <div class="proview_box" @click="hideMask">
 <div class="img_box">
 <img :src="/UploadFiles/2021-04-02/imgPath">

补充知识:vue图片放大、缩小、旋转等。仅需要两行代码!!!

效果图

vue实现简易图片左右旋转,上一张,下一张组件案例

实现步骤:

1.下载Viewer组件

npm install v-viewer --save

2.在图片显示的页面引用 viewer组件(一个js文件,一个css样式文件)

import Viewer from "@/assets/js/viewer.min.js";

import '@/assets/css/viewer.min.css';

3.再需要点击图片的标签添加点击事件@click

<img :id ="item.publicFileURL" :src="/UploadFiles/2021-04-02/item.publicFileURL">

vue实现简易图片左右旋转,上一张,下一张组件案例

说明:因为我的图片是在集合中存的需要动态的点击放大(点哪个放大哪个)----id很重要 aaa()方法中要用

4.@click="aaa(item)"方法

  aaa(item) {
   var viewer = new Viewer(document.getElementById(item.publicFileURL), {
    url: item.publicFileURL,
  });
 },

vue实现简易图片左右旋转,上一张,下一张组件案例

以上这篇vue实现简易图片左右旋转,上一张,下一张组件案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

标签:
vue,图片,左右旋转,上一张,下一张

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“vue实现简易图片左右旋转,上一张,下一张组件案例”

暂无vue实现简易图片左右旋转,上一张,下一张组件案例的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?