evan-switch.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. "use strict";
  2. var 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(this.currentValue === this.activeValue ? this.inactiveValue : this.activeValue, this.extraData, context);
  71. if (typeof result === "object") {
  72. result.then(() => {
  73. this.toggleValue();
  74. }).catch(() => {
  75. });
  76. } else if (typeof result === "boolean" && result) {
  77. this.toggleValue();
  78. }
  79. } else {
  80. this.toggleValue();
  81. }
  82. }
  83. },
  84. toggleValue() {
  85. this.currentValue = this.currentValue === this.activeValue ? this.inactiveValue : this.activeValue;
  86. this.$emit("input", this.currentValue);
  87. this.$emit("change", this.currentValue);
  88. }
  89. }
  90. };
  91. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  92. return {
  93. a: $data.currentValue === $props.activeValue ? `translateX(${29}px)` : `translateX(0)`,
  94. b: common_vendor.o((...args) => $options.toggle && $options.toggle(...args)),
  95. c: $props.disabled ? 1 : "",
  96. d: $data.currentValue === $props.activeValue ? $props.activeColor : $props.inactiveColor
  97. };
  98. }
  99. var Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-65d8598c"], ["__file", "C:/Users/Administrator/Desktop/\u9879\u76EE/\u76F4\u64AD/liveH5-v3/components/evan-switch/evan-switch.vue"]]);
  100. wx.createComponent(Component);