精华内容
下载资源
问答
  • vue 如何做到图片预览
    2020-12-22 13:07:07

    不啰嗦直接上代码

    1.安装vue插件  v-viewer

    npm install v-viewer

    2.在vue的mian.js里面引入Viewer

    import 'viewerjs/dist/viewer.css'
    import Viewer from 'v-viewer'
    
    Vue.use(Viewer)
    
    // 这里是插件的默认设置
    Viewer.setDefaults({
     zIndexInline: 9999
    })

    3.HTML页面

    <template>
      <div
        class="el-input el-input--small"
        v-if="demoList.length>0"
        >
        <viewer>
           <img
              width="150"
              v-for="src in demoList"
              :src="src.imgurl"
              :key="src.name"
               >
       </viewer>
    </div>
    </template>
    <script>
    export default {
      data() {
        return {
          demoList: [
            {
              name: 'a',
              imgurl: require('../../assets/timg1.jpg')
            }
          ]
        }
      }
    }
    </script>

    4.页面效果

    5.可以自定义属性

    Vue.use(Viewer, {
      defaultOptions: {
        zIndex: 9999,
        inline: false,
        button: true,
        navbar: false,
        title: false,
        toolbar: true,
        tooltip: false,
        movable: true,
        zoomable: true,
        rotatable: true,
        scalable: false,
        transition: true,
        fullscreen: false,
        keyboard: false
      }
    })

    viewer其他属性

    参数配置

    如果要改变全局的默认样式,可以使用 Viewer.setDefaults(options)

     

    参数名称参数类型默认值说明
    initialViewIndexNumber0定义用于查看的图像的初始索引
    inlineBooleanfalse支持 inline mode
    buttonBooleantrue是否显示查看图片时右上角的关闭按钮
    navbarBoolean / Numbertrue是否显示底部导航栏 
    0 或者 false :不显示 
    1 或者 true :显示 
    :当屏幕宽度大于768px时显示 
    :当屏幕宽度大于992px时显示 
    :当屏幕宽度大于1200px时显示
    titleBoolean / Number /
    Function / Array
    true或者 false 时不显示
    1或者true或者function或者array时显示
    :当屏幕宽度大于768px时显示 
    :当屏幕宽度大于992px时显示 
    :当屏幕宽度大于1200px时显示
    function 在函数体内返回标题
    array 第一个参数表示可见性(0-4) 第二个参数就是标题
    toolbarBoolean / Number / Objecttrue标题栏是否显示和布局 
    或者 false 时不显示
    1或者true或者时显示
    :当屏幕宽度大于768px时显示 
    :当屏幕宽度大于992px时显示 
    :当屏幕宽度大于1200px时显示 
    tooltipBooleantrue放大或缩小时显示的百分比的文字提示
    true : 显示 
    false : 不显示
    movableBooleantrue是否可以拖动图片
    zoomableBooleantrue是否可以缩放图片
    rotatableBooleantrue是否可以旋转图片
    scalableBooleantrue是否可以缩放图片
    transitionBooleantrue为一些特殊元素启用CSS3转换。
    fullscreenBooleantrue允许全屏播放
    keyboardBooleantrue启用键盘支持
    backdropBoolean / Stringtrue启用 modal 为false的时候不支持点击背景关闭
    loadingBooleantrue加载图片的时候的loading图标
    loopBooleantrue是否可以循环查看图片
    intervalNumber5000定义图片查看器的最小的宽度
    minWidthNumber200定义图片查看器的最小的高度
    minHeightNumber100播放图片时 距离下一张图片的间隔时间
    zoomRatioNumber0.1利用鼠标滚轮缩放图片时的比例
    minZoomRatioNumber0.01缩小图片的最小比例
    maxZoomRatioNumber100放大图片的放大比例
    zIndexNumber2015定义查看器的CSS z-index值 modal 模式下
    zIndexInlineNumber0定义查看器的CSS z-index值 inline 模式下
    urlString / Functionsrc原始图像URL
    如果是一个字符串,应该图像元素的属性之一
    如果是一个函数,应该返回一个有效的图像URL
    containerElement / Stringbody将查看器置于modal模式的容器 
    只有在 inline为 false的时候才可以使用
    filterFunctionnull过滤图像以便查看(如果图像是可见的,应该返回true)
    toggleOnDblclickBooleantrue当你放大或者缩小图片时 双击还原
    readyFunctionnull当查看图片时被触发的函数 只会触发一次
    showFunctionnull当查看图片时被触发的函数 每次查看都会触发
    shownFunctionnull当查看图片时被触发的函数 每次查看都会触发 在show之后
    hideFunctionnull当关闭图片查看器时被触发的函数 每次关闭都会触发
    hiddenFunctionnull当关闭图片查看器时被触发的函数 每次关闭都会触发 在hide之后
    viewFunctionnull当查看图片时被触发的函数 每次查看都会触发 在shown之后
    viewedFunctionnull当查看图片时被触发的函数 每次查看都会触发 在view之后
    zoomFunctionnull在图片缩放时触发
    zoomedFunctionnull在图片缩放时触发 在 zoom之后

    toolbar Object详解

    key值列表: "zoomIn", "zoomOut", "oneToOne", "reset", "prev", "play", "next", "rotateLeft", "rotateRight", "flipHorizontal", "flipVertical"

    key值名称说明
    zoomIn放大图片的按钮
    zoomOut缩小图片的按钮
    reset重置图片大小的按钮
    prev查看上一张图片的按钮
    next查看上一张图片的按钮
    play播放图片的按钮
    rotateLeft向左旋转图片的按钮
    rotateRight向右旋转图片的按钮
    flipHorizontal图片左右翻转的按钮
    flipVertical图片上下翻转的按钮

    {key:number|Boolean} 显示或者隐藏对应key的按钮 为Number的时候为可见性
    {key: String } 自定义按钮的大小
    { key: Function } 自定义按钮点击的处理
    { key: { show: Boolean | Number, size: String, click: Function } 自定义按钮的每个属性

    更多相关内容
  • vue鼠标悬停图片放大特效是一款基于vue.js跟css3制作的相册图片悬停弹出3d放大展示代码。
  • element的鼠标移到图片时,放大预览效果。实现思路:element的 el-table + el-popover <template> <div class="test-image"> <el-table :data="tabData" border> <el-table-column align=....
    • element的鼠标移到图片时,放大预览效果。实现思路:elementel-table + el-popover
    <template>
        <div class="test-image">
             <el-table :data="tabData" border>
                <el-table-column align="center" label="示例图片" width="80" :show-overflow-tooltip="true" prop="image_url">
                    <template slot-scope="scope">
                        <el-popover placement="right" :title="scope.row.imgName" trigger="hover" width="250" >
                            <el-image slot="reference" :src="scope.row.image_url" :alt="scope.row.image_url"></el-image>
                            <el-image :src="scope.row.image_url"></el-image>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="标题" width="160" :show-overflow-tooltip="true" prop="imgName"></el-table-column>
            </el-table>
        </div>
    </template>
    <script>
    export default {
      data () {
        return {
          tabData: [
    
            { image_url: 'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg', imgName: 'apple' },
            { image_url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', imgName: 'bird' },
            { image_url: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', imgName: 'deer' }
    
          ]
        }
      }
      
    }
    </script>
    

    注:
    el-table绑定的data属性是表格渲染的列表tabDatael-table-column是表格的单元格,它的prop的值是tabData中的键名;show-overflow-tooltip是内容过多显示tooltip;
    el-popoverelementPopover 弹出框, placement是出现的位置
    popover中有 slot="reference" 的元素是当前触发popover的元素。
    popovertrigger="hover",表示hover时触发

    所以上面的:

     <el-popover placement="right" :title="scope.row.imgName" trigger="hover" width="250" >
            <el-image slot="reference" :src="scope.row.image_url" :alt="scope.row.image_url"></el-image>   是触发了popover的元素,即鼠标移动到这张图片上,下面那张图片就会显示,且宽为popover中的定义的  width="250"<el-image :src="scope.row.image_url"></el-image>   它只是popover的显示内容,popover 弹出框被触发,它就显示
      </el-popover> 
    

    效果如图( 鼠标经过第三张图 ):
    在这里插入图片描述

    • 小结:

      ① Table中的,表格自定义列模板
      通过 Scoped slot 可以获取到 row, column, $indexstoretable 内部的状态管理)的数据;
      参考:https://element.eleme.cn/#/zh-CN/component/table#table-column-scoped-slot

      ② Popover 弹出框
      trigger属性用于设置何时触发 Popover,支持四种触发方式:hoverclickfocusmanual。对于触发 Popover 的元素,有两种写法:使用 slot="reference"具名插槽,或使用自定义指令v-popover指向 Popover 的索引ref

    展开全文
  • 主要为大家详细介绍了vue实现点击图片放大效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Vue 图片预览鼠标V滚动、点击放大、缩小图片) 使用插件v-viewer 1.安装v-viewer npm install v-viewer -s 2.在main.js引入js,css import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use...

    1.安装v-viewer

    npm install v-viewer -s
    

    2.在main.js引入js,css

    import Viewer from 'v-viewer'
    import 'viewerjs/dist/viewer.css'
    
    Vue.use(Viewer, {
      defaultOptions: {
        zIndex: 9999
      }
    })
    
    
    Viewer.setDefaults({
      Options: { 
        "inline": true, // 是否启动inline模式
        "button": true, // 是否显示右上角关闭按钮
        "navbar":true, // 是否显示缩略图导航
        "title": true, // 是否显示当前图片的标题
        "toolbar": true,  // 是否显示工具栏
        "tooltip": true, // 是否显示缩放百分比
        "movable": true, // 图片是否可移动
        "zoomable": true, // 图片是否可缩放
        "rotatable": true, // 图片是否可旋转
        "scalable": true, // 图片是翻转
        "transition": true, // 是否使用css3过渡
        "fullscreen": true, // 播放时是否全屏
        "keyboard": true, // 是否支持键盘
        "url": "data-source" // 设置大图片的url
      }
    });
    

    3.页面使用

    <el-row :gutter="3">
        <el-col :spn="10" v-for="(item,index) in urls" :key="index" style="width: 300px;" class="row_class">
    
            <viewer :images="item" class="viewer" ref="viewer" :zoomable="false">
                <img  :src="item" :key="index" style="width: 300px">
            </viewer>
    
            <div>
                <el-tooltip class="classDelete" effect="dark" content="删除" placement="top">
                    <span class="Delete" @click="deleteImg(item,index)" ><i class="el-icon-delete"></i></span>
                </el-tooltip>
            </div>
        </el-col>
    </el-row>
    

    4.效果图

    在这里插入图片描述

    展开全文
  • 我现在在做的vue项目使用的组件库是Ant Design的vue版本,里面有个图片组件,但是用起来不顺心。在bing找了一些,要么不适配vue3.x,要么就是直接报错????。 于是就自己整了一个,希望也可以帮助像我一样的小伙伴???...

    前言

    我现在在做的vue项目使用的组件库是Ant Design的vue版本,里面有个图片组件,但是用起来不顺心。在bing找了一些,要么不适配vue3.x,要么就是直接报错😥。

    于是就自己整了一个,希望也可以帮助像我一样的小伙伴🤗

    我第一次发布npm包,也是第一次写文章,欢迎大佬们评论

    介绍

    此插件使用简单方便,只有一个api,一个事件,避免了复杂的文档和使用教程。

    其依赖于screenfull,安装插件时会自动安装,如出现未找到screenfull,使用npm i screenfull安装即可

    源码在github,一起学习,共同进步。希望有个star🙄

    如何使用

    已发布于npm,可直接安装使用

    安装

    npm i useful-photo-preview
    

    使用

    • 引用
      import imgShow from useful-photo-preview
      
    • 使用
      <img-show :src="img_url" @close="onclose"></img-show>
      

    功能

    • 全屏预览,复位,左右旋转

    • 鼠标滚轮放大缩小

    • 鼠标拖动移动位置

    • 双击进入和退出全屏预览

    • 点击空白位置退出(调用@close事件)

    • ESC键退出(调用@close事件)

    • 宽缩放最小150px 左右,最大5000px 左右

    预览

    全屏时背景会变成纯黑色

    默认打开界面
    全屏效果

    API

    • 参数

      • :src 图片链接,或base64数据
    • 事件

      • @close 关闭事件
    展开全文
  • vue 移动端图片预览的方法使用总结

    千次阅读 2020-05-28 09:55:29
    方法一: import VueImageSwipe from 'vue-image-...import 'vue-image-swipe/dist/vue-image-swipe.css' Vue.use (VueImageSwipe); <div v-for="(item,index) in environmentalList" :key="index+'item'" ...
  • height: 80%" > </el-popover> </template> </el-table-column> 之前用vue2写,结果slot和slot-scope不行了,在vue2.6及已上版本,slot 和slot-scope已经开始废弃, 有了新的替代: v-slot,v-slot只能用在template ...
  • Vue PC端图片预览插件

    2020-12-20 13:50:06
    记录一下项目中遇到的问题,留做笔记:需求:在项目中,需要展示用户上传的一些图片,我从后台接口拿到图片url后放在页面上展示,因为被图片我设置了宽度限制(150px),所以图片被缩放了,需求说加一个图片预览的功能...
  • 同时实现下面图片预览的白色透明遮罩。当哪个被点击,则白色遮罩消失,其他依然存在显示。 3.首先我们定义一下ui结构: <!-- 图片预览区 --> <div class="exhibitionimg"> <!-- element选择...
  • 基于vue鼠标移动放大部分区域图片(仿京东商品图片放大效果)
  • 一、插件v-viewer1、安装插件npm install v-viewer -s2、main.js引入js、cssimport Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer, {defaultOptions: {zIndex: 9999}})Viewer.setDefaults...
  • // } // } //预览pdf文件 // const viewfile = async () => { // let pdfUrl = await beforeUpload(state.fileListPdf) // if (pdfUrl) { // previewImage.value = pdfUrl // previewVisible.value = true // } // }...
  • Vue图片预览插件,支持左右滑动切换,适配移动端和PC端,支持移动端手势缩放,上划关闭。支持缩放归位效果,过渡自然
  • vue viewerjs预览图片

    2022-02-15 09:40:54
    vue 实现图片预览 viewerJs
  • 大家好,今天给大家介绍一款,用vue实现的,鼠标悬停放大图片,并根据鼠标位置倾斜图片前端网页源码(图1)。送给大家哦,获取方式在本文末尾。 图1 鼠标悬停放大图片鼠标移动图片就会进行相应角度的倾斜,有...
  • vue手写图片预览组件】在vue2.0项目中手写图片预览组件,旋转、放大、滚动、下载等功能,同时做了载入动画处理。
  • vue 图片,视频点击预览按钮方法

    千次阅读 2021-11-12 14:58:52
    图片 使用el-image-viewer组件 写之前注意引入安装组件!!! 主要代码: <div class=""> <el-image-viewer v-if="showViewer" :on-close="()=>{showViewer=false}" :url-list="[pic]"/> </div&...
  • Vue+ElementUI实现在表格中点击图片预览大图和预览视频
  • 之前使用过v-viewer实现图片查看的功能,但是不知道今年怎么回事,node线上的包下载下来不能用了,实现不了效果,又找到了一另一个好用的插件,那就是viewjs。 实现效果: 实现步骤: 1、安装插件 npm ...
  • Vue 实现图片监听鼠标滑轮滚动实现图片缩小放大功能 其实想要实现功能很简单,就是在一张图片上监听鼠标滑轮滚动的事件,然后根据上滚还是下滚实现图片的缩放。 其实就是这种效果: 其实代码不是很难。 HTML代码: ...
  • 下面的代码,笔者基于Vue.js,使用了element-ui组件类库实现的,功能包括:支持图片的上传、图片类型以及图片大小校验、图片列表展示、图片大图预览功能、图片空白处点击关闭大图功能。 废话不多说了,直接上代码: ...
  • 使用一个变量来表示鼠标移入或移出的状态,鼠标移入事件mouseenter,移出事件mouseleave,在这两个事件中来修改这个变量。 注意:移出事件别用mouseout。 代码: 断开连接 data: exit: require("@/assets/img/exit...
  • vue插件v-viewer的使用目的新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants...
  • npm install vue-directive-image-previewer -D 引入插件 import VueDirectiveImagePreviewer from 'vue-directive-image-previewer' import 'vue-directive-image-previewer/dist/assets/style.css' Vue.use...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,138
精华内容 455
关键字:

vue 鼠标经过图片预览