<template>
|
<view>
|
<!-- 按钮 -->
|
<button
|
:class="['buttonBorder',!_rotate?'dlbutton':'dlbutton_loading']"
|
:style="{'background':bgColor, 'color': fontColor}"
|
|
@click="$emit('click', $event)"
|
@contact="$emit('contact', $event)"
|
@error="$emit('error', $event)"
|
@getphonenumber="$emit('getphonenumber', $event)"
|
@getuserinfo="$emit('getuserinfo', $event)"
|
@launchapp="$emit('launchapp', $event)"
|
@longtap="$emit('longtap', $event)"
|
@opensetting="$emit('opensetting', $event)"
|
@touchcancel="$emit('touchcancel', $event)"
|
@touchend="$emit('touchend', $event)"
|
@touchmove="$emit('touchmove', $event)"
|
@touchstart="$emit('touchstart', $event)"
|
>
|
<view :class="_rotate?'rotate_loop':''">
|
<text v-if="_rotate" class="cuIcon cuIcon-loading1 "></text>
|
<view v-if="!_rotate"><slot name="text">{{ text }}</slot></view>
|
</view>
|
</button>
|
</view>
|
</template>
|
|
<script>
|
export default{
|
props:{
|
text: String, //显示文本
|
rotate:{
|
//是否启动加载
|
type: [Boolean,String],
|
default: false,
|
},
|
bgColor:{
|
//按钮背景颜色
|
type: String,
|
default: "linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.6))",
|
},
|
fontColor:{
|
//按钮字体颜色
|
type: String,
|
default: "#FFFFFF",
|
},
|
},
|
computed:{
|
_rotate() {
|
//处理值
|
return String(this.rotate) !== 'false'
|
},
|
}
|
}
|
</script>
|
|
<style>
|
@import url("./css/icon.css");
|
|
.dlbutton {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
color: #FFFFFF;
|
font-size: 30rpx;
|
white-space:nowrap;
|
overflow: hidden;
|
width:601rpx;
|
height:100rpx;
|
background:linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.6));
|
box-shadow:0rpx 0rpx 13rpx 0rpx rgba(164,217,228,0.4);
|
border-radius:2.5rem;
|
margin-top: 0rpx;
|
}
|
.dlbutton_loading {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
color: #FFFFFF;
|
font-size: 30rpx;
|
width:100rpx;
|
height:100rpx;
|
background:linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.6));
|
box-shadow:0rpx 0rpx 13rpx 0rpx rgba(164,217,228,0.4);
|
border-radius:2.5rem;
|
margin-top: 0rpx;
|
}
|
.buttonBorder{
|
border: none ;
|
border-radius: 2.5rem ;
|
-webkit-box-shadow: 0 0 60rpx 0 rgba(0,0,0,.2) ;
|
box-shadow: 0 0 60rpx 0 rgba(0,0,0,.2) ;
|
-webkit-transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
|
-moz-transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
|
-ms-transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
|
-o-transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
|
transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
|
}
|
|
/* 旋转动画 */
|
.rotate_loop{
|
-webkit-transition-property: -webkit-transform;
|
-webkit-transition-duration: 1s;
|
-moz-transition-property: -moz-transform;
|
-moz-transition-duration: 1s;
|
-webkit-animation: rotate 1s linear infinite;
|
-moz-animation: rotate 1s linear infinite;
|
-o-animation: rotate 1s linear infinite;
|
animation: rotate 1s linear infinite;
|
}
|
@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
|
to{-webkit-transform: rotate(360deg)}
|
}
|
@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
|
to{-moz-transform: rotate(359deg)}
|
}
|
@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
|
to{-o-transform: rotate(359deg)}
|
}
|
@keyframes rotate{from{transform: rotate(0deg)}
|
to{transform: rotate(359deg)}
|
}
|
</style>
|
