更新记录

1.0.1(2019-12-30)

修改事件方式,上版本直接写入事件H5不会执行方法,修改为自定义事件。

1.0.0(2019-12-29)

第一版本发布,支持自定义颜色,大小。

查看更多

如何使用

引入组件

import CcButton from '@/components/cc-button/cc-button.vue' 

components: {
        CcButton
},
methods: {
    showloading(type) {
        this[type] = true
        setTimeout(() => {
            this[type] = false
        }, 3500);
    }
}

模板使用

<CcButton @cctap="showloading('isloading')" :loading="isloading">登陆</CcButton>

事件方法

名称 描述 是否必须
cctap tap事件
cclick click事件
<CcButton @cctap="showloading('isloading')" @cclick="showloading('isloading')" :loading="isloading">登陆</CcButton>

可用参数

参数名字 参数类型 描述 是否必须 默认值
loading Boolean 是否加载 false
color String 文字颜色 #ffffff
fontsize String 文字大小 25rpx
bgcolor String 背景颜色(支持渐变色)
width String 按钮宽度 200rpx
height String 按钮高度 100rpx
borderWidth String 加载动画粗细 3rpx
isdisable Boolean 是否禁用 false

演示文档

<template>
    <view class="content">
        <view class="title margin-top">普通样式</view>
        <view class="margin-top box">
            <CcButton @cctap="showloading('isloading')" :loading="isloading">登陆</CcButton>
        </view>
        <view class="margin-top">
            <CcButton @cctap="showloading('isloading2')" fontsize="36rpx" height="120rpx" width="350rpx" color="#fff" bgcolor="rgba(252, 28, 143, 1)"
             :loading="isloading2">支持自定义大小</CcButton>
        </view>
        <view class="margin-top">
            <CcButton @cctap="showloading('isloading3')" width="600rpx" color="#fff" bgcolor=" linear-gradient(-45deg, rgba(87, 225, 181, 1) 0%, rgba(0, 63, 255, 1) 100%);"
             :loading="isloading3">渐变色按钮</CcButton>
        </view>
        <view class="title">加载中...</view>
        <view class="margin-top box">
            <CcButton @cctap="showloading('isloading')" :loading="true">加载中...</CcButton>
        </view>
        <view class="margin-top margin-top">
            <CcButton @cctap="showloading('isloading2')" fontsize="36rpx" height="120rpx" width="350rpx" color="#fff" bgcolor="rgba(252, 28, 143, 1)"
             :loading="true">支持自定义大小</CcButton>
        </view>
        <view class="margin-top">
            <CcButton @cctap="showloading('isloading3')" width="600rpx" color="#fff" bgcolor=" linear-gradient(-45deg, rgba(87, 225, 181, 1) 0%, rgba(0, 63, 255, 1) 100%);"
             :loading="true">渐变色按钮</CcButton>
        </view>
        <view class="title">禁用</view>
        <view class="margin-top box">
            <CcButton @cctap="showloading('isloading')" :isdisable="true" >禁用</CcButton>
        </view>
        <view class="margin-top margin-top">
            <CcButton @cctap="showloading('isloading2')" :isdisable="true" :loading="true" fontsize="36rpx" height="120rpx" width="350rpx" color="#fff" bgcolor="rgba(252, 28, 143, 1)"
             >禁用</CcButton>
        </view>
        <view class="margin-top">
            <CcButton @cctap="showloading('isloading3')" :isdisable="true" width="600rpx" color="#fff" bgcolor=" linear-gradient(-45deg, rgba(87, 225, 181, 1) 0%, rgba(0, 63, 255, 1) 100%);"
             >禁用</CcButton>
        </view>
    </view>
</template>


    import CcButton from '@/components/cc-button/cc-button.vue';
    export default {
        data() {
            return {
                title: 'Hello',
                isloading: false,
                isloading2: false,
                isloading3: false
            };
        },
        components: {
            CcButton
        },
        onLoad() {},
        methods: {
            showloading(type) {
                this[type] = true
                setTimeout(() => {
                    this[type] = false
                }, 3500);
            }
        }
    };


<style>
    .title{
        text-align: center;
        font-size: 28rpx ;
        font-weight: 700;
    }
    .margin-top {
        margin-top: 10rpx;
    }
</style>

隐私、权限及商业化声明

说明:除收费原生SDK插件外,其他插件或示例工程默认均为MIT开源协议。如提供了github地址,并在github上专门标注了开源协议,则以github标注为准。

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

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

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

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