# vue-flutter的使用
实现一个漂浮的元素。使用场景:漂浮的公告,漂浮的广告等
# 效果如下
# 安装
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
- 新增
isRandomPos
是否随机位置配置属性 - 去除
flutterId
属性改为flutterRef
属性