更新记录

1.0.5（2020-07-08） 下载此版本

使用cover-image作为图层绘制

解决嵌套问题

1.0.4（2020-06-21） 下载此版本

view->cover-view

video、canvas不再遮挡按钮

1.0.3（2020-06-01） 下载此版本

修复滑动穿透

平台兼容性

综述

本控价为悬浮置顶按钮（可拖动）

调用方式

  <template>
    <view>
        <topicon class="topicon" :iconWidth="100" :iconHeight="100" :startPostion="3" iconPath="../../static/zhiding.png"
         :marginBottom="0" :marginTop="60" :marginLeft="5" :marginRight="5" @tapIcon="tapIcon"
        ></topicon>
    </view>
  </template>

  <script>
    import topicon from '@/components/gwh-backTopIcon/gwh-backTopIcon.vue'
    export default {
        components:{
            topicon
        },
        data() {
            return {

            }
        },
        onLoad() {

        },
        methods: {
            tapIcon(e){
                console.log('you tap icon')
            }
        }
    }
  </script>

  <style>
    .topicon >>> .icon{
        border: #4CD964 2upx solid;
    }
  </style>

属性说明

iconWidth | iconHeight

分别管理icon的长宽
类型： 整数
单位： upx

marginLeft | marginRight | marginTop | marginBottom

限制icon移动范围：分别距离屏幕左边界、右边界、上边界、下边界多远
类型： 整数
单位： px

startPostion

初始位置：0-左上角，1-右上角，2-左下角，3-右下角，不填默认右下角
类型： 整数

iconPath

图片路径：不填默认为：“样例图片”中的icon
类型： 字符串

方法说明

@tapChange

点击返回函数，无任何返回值

样式说明

.icon

图片除大小外的其他样式