xiaobu-pic-zoom使用文档

图片放大器

安装

npm install -S vue-flutter

引入

const vueFlutter = require("vue-flutter")
Vue.use(vueFlutter)

使用

<template>
  <div id="app">
    <div class="img-box">
      <vue-flutter position="absolute" startPos="rightBottom" :startX="10" :startY="10">
        <template v-slot:flutter>
          <span class="flutter-item">哈哈哈</span>
        </template>
      </vue-flutter>
    </div>
  </div>
</template>

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

<style>
.img-box {
  width: 300px;
  height: 300px;
  background: red;
}
.img-box .flutter-item {
  width: 80px;
  height: 28px;
  background: pink;
  line-height: 28px;
  font-size: 16px;
  display: block;
  text-align: center;
  color: #fff;
  border-radius: 14px;
}
</style>

配置项

| 配置参数 | 说明 | 类型 | 可选值 | 默认值 | | :-------: | :----------------------------------------------------------: | ------- | :----------------------------------------------------------: | :--------: | | position | 定位规则，是否相对父元素定位，还是相对屏幕 | String | fixed/absolute | fixed | | flutterId（已废弃） | 元素id，用于给元素ref取名字，默认随机字符串，可不传 | String | 无 | flutterId | | flutterRef（1.0.1） | 元素ref，用于给元素ref取名字，默认随机字符串，可不传 | String | 无 | 随机字符串 | | isRandomPos | 是否随机位置，随机方向 | Boolean | 无 | false | | isFixed | 是否固定位置不动 | Boolean | 无 | false | | startPos | 元素初始位置，不传默认从starX，starY坐标开始 | Boolean | leftTop 左上 leftCenter 左中 leftBottom 左下 rightTop 右上 rightCenter 右中 rightBottom 右下 | 无 | | startX | 距离左边距离，startPos的x坐标+starX的坐标就是元素的位置（startPos为right开头则使用减法） | Number | 非负数 | 0 | | startY | 距离顶部距离，startPos的y坐标+starY的坐标就是元素的位置（startPos为bottom结尾则使用减法） | Number | 非负数 | 0 | | jumpStepX | 每次元素移动X轴的距离 | Number | 非负数 | 10 | | jumpStepY | 每次元素移动Y轴的距离 | Number | 非负数 | 10 |

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

更新日志

1.0.1

1. 新增isRandomPos是否随机位置配置属性
2. 去除flutterId属性改为flutterRef属性