Switch.wpy 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. <style lang="less">
  2. .component-switch-main {
  3. // width: 96rpx;
  4. // height: 48rpx;
  5. display: flex;
  6. justify-content: center;
  7. align-items: center;
  8. }
  9. .component-switch {
  10. background: #37C3C4;
  11. border-radius: 12px;
  12. display: inline-block;
  13. box-sizing: border-box;
  14. position: relative;
  15. cursor: pointer;
  16. transition: background-color 0.3s;
  17. &.disabled {
  18. cursor: not-allowed;
  19. opacity: 0.5;
  20. }
  21. }
  22. .component-switch .checked-circle {
  23. position: absolute;
  24. top: 50%;
  25. left: -1px;
  26. transform: translate(0, -50%);
  27. transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
  28. border-radius: 50%;
  29. background: #ffffff;
  30. border: 1px solid rgba(196, 196, 196, 1);
  31. box-sizing: border-box;
  32. box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.03);
  33. &.circle-true {
  34. left: 1px;
  35. }
  36. }
  37. .component-switch.checked .checked-circle {
  38. transform: translate(100%, -50%);
  39. }
  40. </style>
  41. <template>
  42. <div
  43. class="component-switch-main"
  44. v-on:click.stop="changChecked"
  45. >
  46. <div
  47. class="component-switch"
  48. style="{{'background-color:'+(checked? defaultActiveColor: defaultInactiveColor)+';'+'width:'+width+'rpx;height:'+ height+'rpx;'}}"
  49. :class="{'checked': checked,'disabled':disable}"
  50. >
  51. <div
  52. class="checked-circle"
  53. :class="{'circle-true': checked}"
  54. style="{{ 'width:'+height+'rpx;height:'+ height+'rpx;' }}"
  55. ></div>
  56. </div>
  57. </div>
  58. </template>
  59. <script>
  60. import wepy from '@wepy/core'
  61. wepy.component({
  62. data: {
  63. defaultInactiveColor: 'rgba(196, 196, 196, 0.2)',
  64. defaultActiveColor: '#37C3C4',
  65. disable: false
  66. },
  67. props: {
  68. height: {
  69. type: Number,
  70. default: 48
  71. }, // 按钮的宽高
  72. width: {
  73. type: Number,
  74. default: 96
  75. }, // 圆圈宽高
  76. checked: Boolean,
  77. eqTitle: String
  78. },
  79. computed: {
  80. confirmText() {
  81. const text = this.checked ? '关闭' : '开启'
  82. return text
  83. }
  84. },
  85. watch: {
  86. checked() {
  87. this.disable = false
  88. }
  89. },
  90. methods: {
  91. changChecked() {
  92. this.vibrateShort()
  93. this.$emit('component-switch-change', !this.checked)
  94. },
  95. vibrateShort() {
  96. if (wx.canIUse('vibrateShort')) {
  97. wx.vibrateShort()
  98. } else {
  99. wx.vibrateLong()
  100. }
  101. }
  102. }
  103. })
  104. </script>