evan-switch.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. "use strict";
  2. const common_vendor = require("../../common/vendor.js");
  3. const _sfc_main = {
  4. name: "EvanSwitch",
  5. props: {
  6. value: {
  7. type: [String, Number, Boolean],
  8. default: false
  9. },
  10. activeColor: {
  11. type: String,
  12. default: "#108ee9"
  13. },
  14. inactiveColor: {
  15. type: String,
  16. default: "#fff"
  17. },
  18. size: {
  19. type: Number,
  20. default: 30
  21. },
  22. disabled: {
  23. type: Boolean,
  24. default: false
  25. },
  26. activeValue: {
  27. type: [String, Number, Boolean],
  28. default: true
  29. },
  30. inactiveValue: {
  31. type: [String, Number, Boolean],
  32. default: false
  33. },
  34. beforeChange: {
  35. type: Function,
  36. default: null
  37. },
  38. extraData: null,
  39. contextLevel: {
  40. type: Number,
  41. default: 1
  42. }
  43. },
  44. computed: {
  45. switchHeight() {
  46. return this.size + "px";
  47. }
  48. },
  49. watch: {
  50. value: {
  51. immediate: true,
  52. handler(value) {
  53. this.currentValue = value;
  54. }
  55. }
  56. },
  57. data() {
  58. return {
  59. currentValue: false
  60. };
  61. },
  62. methods: {
  63. toggle() {
  64. if (!this.disabled) {
  65. if (this.beforeChange && typeof this.beforeChange === "function") {
  66. let context = this;
  67. for (let i = 0; i < this.contextLevel; i++) {
  68. context = context.$options.parent;
  69. }
  70. const result = this.beforeChange(
  71. this.currentValue === this.activeValue ? this.inactiveValue : this.activeValue,
  72. this.extraData,
  73. context
  74. );
  75. if (typeof result === "object") {
  76. result.then(() => {
  77. this.toggleValue();
  78. }).catch(() => {
  79. });
  80. } else if (typeof result === "boolean" && result) {
  81. this.toggleValue();
  82. }
  83. } else {
  84. this.toggleValue();
  85. }
  86. }
  87. },
  88. toggleValue() {
  89. this.currentValue = this.currentValue === this.activeValue ? this.inactiveValue : this.activeValue;
  90. this.$emit("input", this.currentValue);
  91. this.$emit("change", this.currentValue);
  92. }
  93. }
  94. };
  95. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  96. return {
  97. a: $data.currentValue === $props.activeValue ? `translateX(${29}px)` : `translateX(0)`,
  98. b: common_vendor.o((...args) => $options.toggle && $options.toggle(...args)),
  99. c: $props.disabled ? 1 : "",
  100. d: $data.currentValue === $props.activeValue ? $props.activeColor : $props.inactiveColor
  101. };
  102. }
  103. const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-687346f1"]]);
  104. wx.createComponent(Component);