平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-nvue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

图片放大器

图片放大器

需全局引入插件 v-finger-mk42

import vfinger from 'v-finger-mk42';
Vue.use(vfinger);

props

名称 类型 默认值 描述
src String 图片链接
isScale Boolean false 是否支持缩放
minZoom [Number, String] 1 最小缩放比例
maxZoom [Number, String] 6 最大缩放比例

demo 示例

demo中使用图片都是从百度搜索出来的,仅做示范使用。

<template>
  <div class="map-main">
    <img-over :src="src" :minZoom="0" :maxZoom="10"></img-over>
  </div>
</template>

<script>
import ImgOver from '@/components/img-over/img-over';
export default {
    components: { ImgOver },
    data() {
        return {
            src: 'http://tz.img.dns4.cn/pic/205097/p2/20171014113509_3245_zs_sy.jpg'
        };
    },
    mounted() {},
    methods: {}
};
</script>

<style>
.map-main {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #e6f7ce;
}
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问