边框动画按钮

组件介绍

gal-outline-button 组件会生成一个带有边框动画的按钮组件，并能够保持按钮的多平台样式统一。

兼容平台

H5	APP	小程序
✔	✔	✔

组件属性

属性名称	类型	默认值	作用
size	Array	[260,88,4]	尺寸设置 : [ 按钮宽度, 按钮高度, 边框尺寸 ]
background	String	''	按钮背景颜色
lineColors	Array	['#03e9f5', '#03e9f5', '#03e9f5','#03e9f5']	动画边框颜色，顺序：左上右下
haveButton	Boolean	false	是否需要包含一个原生按钮（原生按钮会被透明化，保持多平台按钮样式统一）

演示代码

<template>
	<view class="gal-body">
		<view style="margin-top:50rpx;">
			<text class="gal-block-text gal-h4 gal-color-gray">view 模拟按钮</text>
		</view>
		<view class="gal-margin-top-large">
			<gal-outline-button background="#243b55">
				<view hover-class="gal-tap" 
				slot="title" 
				class="gal-block-text button-text gal-text-center" 
				style="color:#03e9f5;" 
				@tap="onTap">按钮</view>
			</gal-outline-button>
		</view>
		
		<view style="margin-top:50rpx;">
			<text class="gal-block-text gal-h4 gal-color-gray">表单功能按钮</text>
		</view>
		<view class="gal-margin-top-large">
			<gal-outline-button 
			background="#F8F8F8" 
			:lineColors="['#FF0036 ', '#FF0036', '#E233FF', '#E233FF']" 
			:haveButton="true">
				<view hover-class="gal-tap" 
				slot="title" 
				class="gal-block-text button-text gal-text-center" 
				style="color:#FF0036;" 
				>按钮</view>
				<view slot="realBtn">
					<button type="default" form-type="submit" @tap="buttonTap" class="button-text">按钮</button>
				</view>
			</gal-outline-button>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			
		}
	},
	methods: {
		onTap : function () {
			uni.showToast({
				title:"按钮点击",
				icon:"none"
			})
		},
		buttonTap : function () {
			uni.showToast({
				title:"原生按钮点击",
				icon:"none"
			})
		}
	}
}
</script>
<style>
.button-text{line-height:88rpx; height:88rpx; width:100%; font-size:28rpx;}
.gal-tap{font-weight:bold;}
</style>