更新记录

v1.0.4(2019-08-12)

优化波纹动效


ButtonRipple--按钮波纹组件

简介

这是一款为按钮添加波纹效果的组件,当然也可作为独立的按钮使用,适配微信小程序、H5、APP。

组件使用

script中使用

import luButtonRipple from '@/components/lu-button-ripple/lu-button-ripple.vue';
export default {
    components: { luButtonRipple }
}

template中使用

<luButtonRipple :rippleBackgroundColor="btn.backgroundColor" 
    :rippleOpacity="btn.opacity" 
    :buttonRippleId="index" 
    @rippleTap="_tap">
    {{btn.text}}
</luButtonRipple>

props

属性名 值类型 默认值 说明
buttonRippleId String/Number -- 按钮ID,页面引入单个(可选)、多个(必填)
rippleBackgroundColor String #999 波纹颜色(可选)
rippleOpacity Number 1 波纹初始透明度(可选)

事件

事件名 说明
rippleTap 点击事件,可执行父组件里的方法(可选)

演示示例

已上传使用示例,可下载示例项目。

<template>
    <view class="btn-page">
        <view class="btn-box" @tap="_tap">
            <luButtonRipple>默认</luButtonRipple>
        </view>
        <view class="btn-box" v-for="(btn,index) in btnList" :key="index">
            <luButtonRipple :rippleBackgroundColor="btn.backgroundColor" :rippleOpacity="btn.opacity" :buttonRippleId="index" @rippleTap="_tap">
                {{btn.text}}
            </luButtonRipple>
        </view>
    </view>
</template>


import luButtonRipple from '@/components/lu-button-ripple/lu-button-ripple.vue';
export default {
    components: { luButtonRipple },
    data() {
        return {
            btnList:[
                {   text:"透明度:1",
                    backgroundColor:"#999",
                    opacity:1
                },
                {
                    text:"透明度:0.6",
                    backgroundColor:"#999",
                    opacity:0.6
                },
                {
                    text:"透明度:0.3",
                    backgroundColor:"#999",
                    opacity:0.3
                },
                {
                    text:"透明度:0.1",
                    backgroundColor:"#999",
                    opacity:0.1
                },
                {
                    text:"颜色:红",
                    backgroundColor:"red",
                    opacity:0.6
                },
                {
                    text:"颜色:黄",
                    backgroundColor:"yellow",
                    opacity:0.6
                },
                {
                    text:"颜色:绿",
                    backgroundColor:"green",
                    opacity:0.6
                },
                {
                    text:"颜色:蓝",
                    backgroundColor:"blue",
                    opacity:0.6
                }
            ]
        };
    },
    methods: {
        _tap(i) {
            if (i>=0) {
                console.log('通过第'+(i+1)+'个buttonRipple触发');
            }else{
                console.log('通过btn-box触发');
            }
        }
    }
};


<style>
    .btn-page{
        position: relative;
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
    }
    .btn-box{
        position: relative;
        width: 80%;
        height: 40px;
        font-size: 12px;
        background-color: #f9f9f9;
        border-radius: 5px;
        margin: 10px;
        overflow: hidden;
        box-shadow: 1px 2px 3px rgba(100,100,100,0.5);

    }
</style>

隐私、权限及商业化声明

1. 本插件需要申请的手机端权限列表:

2. 本插件采集的手机端数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问