更新记录

1.0.5（2022-03-08） 下载此版本

更新说明

1.0.4（2022-03-08） 下载此版本

更新圆角写法

1.0.3（2022-03-08） 下载此版本

更新文档

平台兼容性

zq-button

组件使用说明

• 该组件全部使用的rpx单位

• 劳烦各位大佬点个收藏 git地址

• template代码：

    <zq-button color="red" margin="20rpx 0 0 20rpx">red</zq-button>
    <zq-button color="orange" margin="20rpx 0 0 20rpx">orange</zq-button>
    <zq-button color="yellow" margin="20rpx 0 0 20rpx">yellow</zq-button>
    <zq-button color="green" margin="20rpx 0 0 20rpx">green</zq-button>
    <zq-button color="blue" margin="20rpx 0 0 20rpx">blue</zq-button>
    <zq-button color="cyan" margin="20rpx 0 0 20rpx">cyan</zq-button>
    <zq-button color="violet" margin="20rpx 0 0 20rpx">violet</zq-button>

    <zq-button color="pink" margin="20rpx 0 0 20rpx">pink</zq-button>
    <zq-button color="gray" margin="20rpx 0 0 20rpx">gray</zq-button>
    <zq-button color="black" margin="20rpx 0 0 20rpx">black</zq-button>
    <zq-button margin="20rpx 0 0 20rpx">默认色</zq-button>
    <zq-button margin="20rpx 0 0 20rpx" :props="{showBoxShadow:false}">无阴影</zq-button>
    <zq-button margin="20rpx 0 0 20rpx" :props="{boxShadow:'0 0 50rpx green'}">自定义外阴影</zq-button>
    <zq-button margin="20rpx 0 0 20rpx" :props="{insetShadow:50}">内阴影宽度</zq-button>
    <zq-button margin="20rpx 0 0 20rpx" :props="{color:'black',fontSize:20}">字体大小颜色</zq-button>
    <zq-button margin="20rpx 0 0 20rpx" :props="{interval:15}">气泡边隙</zq-button>
    <zq-button margin="20rpx 0 0 20rpx" :props="{borderRadius:'0 30rpx 0 30rpx'}">自定义圆角</zq-button>
    <zq-button margin="20rpx 0 0 20rpx" :props="{width:250,height:80}">自定义宽高</zq-button>

组件属性的全局配置

• 在main.js文件中定义$store

import store from './store';
Vue.prototype.$store = store;

• 在store的文件中添加以下内容，不使用的属性可不配置,单页面可通过:props设置

    const store = new Vuex.Store({
        state: {
            zqButtonSetting:{
                width:350,//按钮宽度
                height:100,//按钮高度
                interval:8,//气泡间隙
                padding:20,//气泡内左右间隔
                insetShadow:10,//内阴影宽度
                boxShadow:"",//外阴影
                showBoxShadow:true,是否显示按钮外阴影
                borderRadius:"12rpx",//圆角
                fontSize:30,//按钮字号
                color:"#ffffff",//字体颜色
                clickDelay:200,//点击延迟毫秒数
                hasAnimation:true//是否有点击动画
            }
        }
    })

组件基本API参数

props的参数

组件事件