# Button按钮

该组件内部实现以uni-app的button组件为基础，进行二次封装

# 基本使用

<com-button>默认按钮</com-button>

<!-- 主要按钮：主题色样式 -->
<com-button type="main">主要按钮</com-button>
<com-button type="primary">主要按钮</com-button>

<!-- 禁用按钮 -->
<com-button disabled>默认按钮禁用</com-button>
<com-button type="main" disabled>主要按钮禁用</com-button>

<!-- 自定义颜色 -->
<com-button bgColor="red" color="#fff">自定义颜色</com-button>
<com-button 
    bgColor="linear-gradient(to right, #f33409, #cc5949)" 
    color="#fff">渐变色</com-button>

<!-- 显示图标 -->
<com-button fit-content :border="false">
    <com-icon name="star-fill" color="orange"></com-icon>
    <text>收藏</text>
</com-button>

<!-- 自定义布局 -->
<com-button type="main" height="100">
    <view class="flex-col">
        <text class="font-30">立即报价</text>
        <text class="font-24 mgt-10">剩余次数: 3</text>
    </view>
</com-button>

<!-- 设置圆角样式 -->
<com-button type="main" border-radius="5">小圆角</com-button>
<com-button type="main" border-radius="40">大圆角</com-button>
<com-button type="main-border" :border-radius="[10,0,0,10]">不规则圆角</com-button>

# 显示加载状态

<com-button type="main" :loading="loading" @click="submit">
    {{ loading ? '提交中...' : '提交'}}
</com-button>

<script>
	export default {
		data() {
			return {
				loading: false,
			}
		},
		methods: {
			submit(){
				this.loading = true
				setTimeout(()=>{
					this.loading = false
					uni.showToast({
						title: "提交成功"
					})
				}, 2000)
			},
		}
	}
</script>

# 内置功能

<!-- 拨打电话功能 -->
<com-button mode="phone" 
:params="{ number: '13412341234' }" 
fit-content :border="false">
    <com-icon name="call" color="orange"></com-icon>
    <text>拨打电话</text>
</com-button>

<!-- 打开导航功能 -->
<com-button mode="nav" 
:params="{ lng: 113.018595, lat: 28.114946, address: '云迈' }" 
fit-content :border="false">
    <com-icon name="pos-fill" color="red"></com-icon>
    <text>打开导航</text>
</com-button>

# API

# Props

属性名	说明	类型	必填	默认值
type	按钮类型	String	`false`	default
width	宽度；不传单位默认是rpx	String / Number	`false`	350
height	高度；不传单位默认是rpx	String / Number	`false`	80
fitContent	宽高自适应内容;为true时width和height将无效	`Boolean`	`false`	false
bgColor	背景颜色	String	`false`	#fff
color	文本颜色	String	`false`	#1b1b1b
border	是否需要边框	`Boolean`	`false`	true
borderRadius	圆角大小；单位是px	String / Number / `Array`	`false`	5
borderColor	边框颜色	String	`false`	#adadad
fontSize	字体大小	String / Number	`false`	28
disabled	是否禁用	`Boolean`	`false`	false
loading	名称前是否带 loading 图标	`Boolean`	`false`	false
inline	按钮布局是否展示为一行	`Boolean`	`false`	true
customStyle	自定义按钮样式	`Object`	`false`	{}
throttle	节流间隔时间毫秒为单位	String / Number	`false`	500
mode	内置功能 phone 点击拨打电话 nav 导航	String	`false`	-
params	参数设置了mode属性时使用电话功能传递 number字段导航功能 lat - 纬度 lng - 经度	`Object`	`false`	{}
permissions	可访问权限(需要自定义实现逻辑)	`Array`	`false`	[]

# Events

事件	说明	回调参数
click	点击时触发	-

← Icon 图标 Input 输入框 →