switch.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.default = void 0;
  6. var _tools = require("../../tools");
  7. var _conf = _interopRequireDefault(require("../../v-x-e-table/src/conf"));
  8. var _size = _interopRequireDefault(require("../../mixins/size"));
  9. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  10. function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
  11. var browse = _tools.DomTools.browse;
  12. var _default2 = {
  13. name: 'VxeSwitch',
  14. mixins: [_size.default],
  15. props: {
  16. value: [String, Number, Boolean],
  17. disabled: Boolean,
  18. size: {
  19. type: String,
  20. default: function _default() {
  21. return _conf.default.switch.size || _conf.default.size;
  22. }
  23. },
  24. openLabel: String,
  25. closeLabel: String,
  26. openValue: {
  27. type: [String, Number, Boolean],
  28. default: true
  29. },
  30. closeValue: {
  31. type: [String, Number, Boolean],
  32. default: false
  33. },
  34. openIcon: String,
  35. closeIcon: String
  36. },
  37. data: function data() {
  38. return {
  39. isActivated: false,
  40. hasAnimat: false,
  41. offsetLeft: 0
  42. };
  43. },
  44. computed: {
  45. isChecked: function isChecked() {
  46. return this.value === this.openValue;
  47. },
  48. onShowLabel: function onShowLabel() {
  49. return _tools.UtilTools.getFuncText(this.openLabel);
  50. },
  51. offShowLabel: function offShowLabel() {
  52. return _tools.UtilTools.getFuncText(this.closeLabel);
  53. },
  54. styles: function styles() {
  55. return browse.msie && this.isChecked ? {
  56. left: "".concat(this.offsetLeft, "px")
  57. } : null;
  58. }
  59. },
  60. created: function created() {
  61. var _this = this;
  62. if (browse.msie) {
  63. this.$nextTick(function () {
  64. return _this.updateStyle();
  65. });
  66. }
  67. },
  68. render: function render(h) {
  69. var _ref;
  70. var isChecked = this.isChecked,
  71. vSize = this.vSize,
  72. disabled = this.disabled,
  73. openIcon = this.openIcon,
  74. closeIcon = this.closeIcon;
  75. return h('div', {
  76. class: ['vxe-switch', isChecked ? 'is--on' : 'is--off', (_ref = {}, _defineProperty(_ref, "size--".concat(vSize), vSize), _defineProperty(_ref, 'is--disabled', disabled), _defineProperty(_ref, 'is--animat', this.hasAnimat), _ref)]
  77. }, [h('button', {
  78. ref: 'btn',
  79. class: 'vxe-switch--button',
  80. attrs: {
  81. type: 'button',
  82. disabled: disabled
  83. },
  84. on: {
  85. click: this.clickEvent,
  86. focus: this.focusEvent,
  87. blur: this.blurEvent
  88. }
  89. }, [h('span', {
  90. class: 'vxe-switch--label vxe-switch--label-on'
  91. }, [openIcon ? h('i', {
  92. class: ['vxe-switch--label-icon', openIcon]
  93. }) : null, this.onShowLabel]), h('span', {
  94. class: 'vxe-switch--label vxe-switch--label-off'
  95. }, [closeIcon ? h('i', {
  96. class: ['vxe-switch--label-icon', closeIcon]
  97. }) : null, this.offShowLabel]), h('span', {
  98. class: 'vxe-switch--icon',
  99. style: this.styles
  100. })])]);
  101. },
  102. methods: {
  103. updateStyle: function updateStyle() {
  104. // 兼容 IE
  105. this.hasAnimat = true;
  106. this.offsetLeft = this.$refs.btn.offsetWidth;
  107. },
  108. clickEvent: function clickEvent(evnt) {
  109. var _this2 = this;
  110. if (!this.disabled) {
  111. clearTimeout(this.activeTimeout);
  112. var value = this.isChecked ? this.closeValue : this.openValue;
  113. this.hasAnimat = true;
  114. if (browse.msie) {
  115. this.updateStyle();
  116. }
  117. this.$emit('input', value);
  118. this.$emit('change', {
  119. value: value,
  120. $event: evnt
  121. });
  122. this.activeTimeout = setTimeout(function () {
  123. _this2.hasAnimat = false;
  124. }, 400);
  125. }
  126. },
  127. focusEvent: function focusEvent(evnt) {
  128. this.isActivated = true;
  129. this.$emit('focus', {
  130. value: this.value,
  131. $event: evnt
  132. });
  133. },
  134. blurEvent: function blurEvent(evnt) {
  135. this.isActivated = false;
  136. this.$emit('blur', {
  137. value: this.value,
  138. $event: evnt
  139. });
  140. }
  141. }
  142. };
  143. exports.default = _default2;