xiaobu-pic-zoom使用文档

图片放大器

安装

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查阅更多内容