frontend/examking-app/components/watch-login/watch-button.vue

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<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');