平台兼容性
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>