vue-flutter的使用

实现一个漂浮的元素。使用场景：漂浮的公告，漂浮的广告等

效果如下

详细看文档

 <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>

显示代码

安装

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属性