watch-button.vue 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <template>
  2. <div>
  3. <!-- 按钮 -->
  4. <button
  5. :class="['buttonBorder', !_rotate ? 'dlbutton' : 'dlbutton_loading']"
  6. :style="{ background: bgColor, color: fontColor }"
  7. >
  8. <div :class="_rotate ? 'rotate_loop' : ''">
  9. <span v-if="_rotate" class="cuIcon cuIcon-loading1 "></span>
  10. <span v-if="!_rotate">{{ text }}</span>
  11. </div>
  12. </button>
  13. </div>
  14. </template>
  15. <script>
  16. export default {
  17. props: {
  18. text: String, //显示文本
  19. rotate: {
  20. //是否启动加载
  21. type: [Boolean, String],
  22. default: false
  23. },
  24. bgColor: {
  25. //按钮背景颜色
  26. type: String,
  27. default: ""
  28. },
  29. fontColor: {
  30. //按钮字体颜色
  31. type: String,
  32. default: "#FFFFFF"
  33. }
  34. },
  35. computed: {
  36. _rotate() {
  37. //处理值
  38. return String(this.rotate) !== "false";
  39. }
  40. }
  41. };
  42. </script>
  43. <style>
  44. @import url("./css/icon.css");
  45. .dlbutton {
  46. display: flex;
  47. justify-content: center;
  48. align-items: center;
  49. color: #ffffff;
  50. font-size: 18px;
  51. width: 100%;
  52. height: 50px;
  53. background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6));
  54. box-shadow: 0px 0px 13px 0px rgba(164, 217, 228, 0.4);
  55. border-radius: 25px;
  56. margin: 0 auto;
  57. outline: none;
  58. }
  59. .dlbutton_loading {
  60. display: flex;
  61. justify-content: center;
  62. align-items: center;
  63. color: #ffffff;
  64. font-size: 18px;
  65. width: 50px;
  66. height: 50px;
  67. background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6));
  68. box-shadow: 0px 0px 13px 0px rgba(164, 217, 228, 0.4);
  69. border-radius: 25px;
  70. margin: 0 auto;
  71. outline: none;
  72. }
  73. .buttonBorder {
  74. border: none;
  75. border-radius: 25px;
  76. box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
  77. transition: all 0.4s cubic-bezier(0.57, 0.19, 0.51, 0.95);
  78. background: #e56463;
  79. }
  80. /* 旋转动画 */
  81. .rotate_loop {
  82. transition-property: transform;
  83. transition-duration: 1s;
  84. animation: rotate 1s linear infinite;
  85. }
  86. @keyframes rotate {
  87. from {
  88. transform: rotate(0deg);
  89. }
  90. to {
  91. transform: rotate(359deg);
  92. }
  93. }
  94. </style>