图片放大器

图片放大器，在商城项目中肯定是非常常见的，此处分享一个好用的图片放大器npm包，自主研发。

图片放大镜npm地址 (opens new window)

示例

以上部分需要上下左右居中对齐，部分左对齐。需要根据内容来自适应高度，整块相对来说对CSS的要求还是比较高的。如有类似的可来这里参考。

<template>
  <div id="app">
    <div class="img-box">
      <pic-zoom :showEdit="true" url="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F2e1e97fc713c56b74170f4c5203ae6b37e04fec51d5c5-Z8yzBx_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650290661&t=052964d9725f6481403b8b44b96a446e"></pic-zoom>
    </div>
  </div>
</template>

<script>
export default {
  name: "App"
}
</script>

<style>
.img-box{
  width: 300px;
  height: 300px;
}
</style>

显示代码

安装

npm install -S xiaobu-pic-zoom

引入

const xiaobuPicZoom = require("xiaobu-pic-zoom")
Vue.use(xiaobuPicZoom)

使用

<template>
  <div id="app">
    <div class="img-box">
      <pic-zoom :showEdit="true" url="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F2e1e97fc713c56b74170f4c5203ae6b37e04fec51d5c5-Z8yzBx_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650290661&t=052964d9725f6481403b8b44b96a446e"></pic-zoom>
    </div>
  </div>
</template>

<script>
export default {
  name: "App"
}
</script>

<style>
.img-box{
  width: 300px;
  height: 300px;
}
</style>

配置项

配置参数	说明	类型	可选值	默认值
scale	放大倍数	Number	无	2.5
url	图片地址	String	无	无
bigUrl	大图地址，如果有配置，放大效果的图采用此图	String	无	无
scroll	放大的时候是否可滚动	Boolean	false/true	false
showEdit	是否展示旋转按钮	Boolean	false/true	false

更多好料关注微信公众号【爆米花小布】，也可以访问www.xiaobusoft.com查阅更多内容