|
@@ -0,0 +1,124 @@
|
|
|
+<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>
|