PickerColumn.js 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348
  1. import _mergeJSXProps2 from "@vue/babel-helper-vue-jsx-merge-props";
  2. import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
  3. import { deepClone } from '../utils/deep-clone';
  4. import { createNamespace, inBrowser, isObject } from '../utils';
  5. import { range } from '../utils/format/number';
  6. import { preventDefault, on, off } from '../utils/dom/event';
  7. import { TouchMixin } from '../mixins/touch';
  8. var DEFAULT_DURATION = 200; // 惯性滑动思路:
  9. // 在手指离开屏幕时,如果和上一次 move 时的间隔小于 `MOMENTUM_LIMIT_TIME` 且 move
  10. // 距离大于 `MOMENTUM_LIMIT_DISTANCE` 时,执行惯性滑动
  11. export var MOMENTUM_LIMIT_TIME = 300;
  12. export var MOMENTUM_LIMIT_DISTANCE = 15;
  13. var _createNamespace = createNamespace('picker-column'),
  14. createComponent = _createNamespace[0],
  15. bem = _createNamespace[1];
  16. function getElementTranslateY(element) {
  17. var style = window.getComputedStyle(element);
  18. var transform = style.transform || style.webkitTransform;
  19. var translateY = transform.slice(7, transform.length - 1).split(', ')[5];
  20. return Number(translateY);
  21. }
  22. function isOptionDisabled(option) {
  23. return isObject(option) && option.disabled;
  24. } // use standard WheelEvent:
  25. // https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent
  26. var supportMousewheel = inBrowser && 'onwheel' in window;
  27. var mousewheelTimer = null;
  28. export default createComponent({
  29. mixins: [TouchMixin],
  30. props: {
  31. valueKey: String,
  32. readonly: Boolean,
  33. allowHtml: Boolean,
  34. className: String,
  35. itemHeight: Number,
  36. defaultIndex: Number,
  37. swipeDuration: [Number, String],
  38. visibleItemCount: [Number, String],
  39. initialOptions: {
  40. type: Array,
  41. default: function _default() {
  42. return [];
  43. }
  44. }
  45. },
  46. data: function data() {
  47. return {
  48. offset: 0,
  49. duration: 0,
  50. options: deepClone(this.initialOptions),
  51. currentIndex: this.defaultIndex
  52. };
  53. },
  54. created: function created() {
  55. if (this.$parent.children) {
  56. this.$parent.children.push(this);
  57. }
  58. this.setIndex(this.currentIndex);
  59. },
  60. mounted: function mounted() {
  61. this.bindTouchEvent(this.$el);
  62. if (supportMousewheel) {
  63. on(this.$el, 'wheel', this.onMouseWheel, false);
  64. }
  65. },
  66. destroyed: function destroyed() {
  67. var children = this.$parent.children;
  68. if (children) {
  69. children.splice(children.indexOf(this), 1);
  70. }
  71. if (supportMousewheel) {
  72. off(this.$el, 'wheel');
  73. }
  74. },
  75. watch: {
  76. initialOptions: 'setOptions',
  77. defaultIndex: function defaultIndex(val) {
  78. this.setIndex(val);
  79. }
  80. },
  81. computed: {
  82. count: function count() {
  83. return this.options.length;
  84. },
  85. baseOffset: function baseOffset() {
  86. return this.itemHeight * (this.visibleItemCount - 1) / 2;
  87. }
  88. },
  89. methods: {
  90. setOptions: function setOptions(options) {
  91. if (JSON.stringify(options) !== JSON.stringify(this.options)) {
  92. this.options = deepClone(options);
  93. this.setIndex(this.defaultIndex);
  94. }
  95. },
  96. onTouchStart: function onTouchStart(event) {
  97. if (this.readonly) {
  98. return;
  99. }
  100. this.touchStart(event);
  101. if (this.moving) {
  102. var translateY = getElementTranslateY(this.$refs.wrapper);
  103. this.offset = Math.min(0, translateY - this.baseOffset);
  104. this.startOffset = this.offset;
  105. } else {
  106. this.startOffset = this.offset;
  107. }
  108. this.duration = 0;
  109. this.transitionEndTrigger = null;
  110. this.touchStartTime = Date.now();
  111. this.momentumOffset = this.startOffset;
  112. },
  113. onTouchMove: function onTouchMove(event) {
  114. if (this.readonly) {
  115. return;
  116. }
  117. this.touchMove(event);
  118. if (this.direction === 'vertical') {
  119. this.moving = true;
  120. preventDefault(event, true);
  121. }
  122. this.offset = range(this.startOffset + this.deltaY, -(this.count * this.itemHeight), this.itemHeight);
  123. var now = Date.now();
  124. if (now - this.touchStartTime > MOMENTUM_LIMIT_TIME) {
  125. this.touchStartTime = now;
  126. this.momentumOffset = this.offset;
  127. }
  128. },
  129. onTouchEnd: function onTouchEnd() {
  130. var _this = this;
  131. if (this.readonly) {
  132. return;
  133. }
  134. var distance = this.offset - this.momentumOffset;
  135. var duration = Date.now() - this.touchStartTime;
  136. var allowMomentum = duration < MOMENTUM_LIMIT_TIME && Math.abs(distance) > MOMENTUM_LIMIT_DISTANCE;
  137. if (allowMomentum) {
  138. this.momentum(distance, duration);
  139. return;
  140. }
  141. var index = this.getIndexByOffset(this.offset);
  142. this.duration = DEFAULT_DURATION;
  143. this.setIndex(index, true); // compatible with desktop scenario
  144. // use setTimeout to skip the click event Emitted after touchstart
  145. setTimeout(function () {
  146. _this.moving = false;
  147. }, 0);
  148. },
  149. onMouseWheel: function onMouseWheel(event) {
  150. var _this2 = this;
  151. if (this.readonly) {
  152. return;
  153. }
  154. preventDefault(event, true); // simply combine touchstart and touchmove
  155. var translateY = getElementTranslateY(this.$refs.wrapper);
  156. this.startOffset = Math.min(0, translateY - this.baseOffset);
  157. this.momentumOffset = this.startOffset;
  158. this.transitionEndTrigger = null; // directly use deltaY, see https://caniuse.com/?search=deltaY
  159. // use deltaY to detect direction for not special setting device
  160. // https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event
  161. var deltaY = event.deltaY;
  162. if (this.startOffset === 0 && deltaY < 0) {
  163. return;
  164. } // Calculate the offset based on itemHeight
  165. var itemOffset = this.itemHeight * (deltaY > 0 ? -1 : 1);
  166. this.offset = range(this.startOffset + itemOffset, -(this.count * this.itemHeight), this.itemHeight);
  167. if (mousewheelTimer) {
  168. clearTimeout(mousewheelTimer);
  169. }
  170. mousewheelTimer = setTimeout(function () {
  171. _this2.onTouchEnd();
  172. _this2.touchStartTime = 0;
  173. }, MOMENTUM_LIMIT_TIME);
  174. },
  175. onTransitionEnd: function onTransitionEnd() {
  176. this.stopMomentum();
  177. },
  178. onClickItem: function onClickItem(index) {
  179. if (this.moving || this.readonly) {
  180. return;
  181. }
  182. this.transitionEndTrigger = null;
  183. this.duration = DEFAULT_DURATION;
  184. this.setIndex(index, true);
  185. },
  186. adjustIndex: function adjustIndex(index) {
  187. index = range(index, 0, this.count);
  188. for (var i = index; i < this.count; i++) {
  189. if (!isOptionDisabled(this.options[i])) return i;
  190. }
  191. for (var _i = index - 1; _i >= 0; _i--) {
  192. if (!isOptionDisabled(this.options[_i])) return _i;
  193. }
  194. },
  195. getOptionText: function getOptionText(option) {
  196. if (isObject(option) && this.valueKey in option) {
  197. return option[this.valueKey];
  198. }
  199. return option;
  200. },
  201. setIndex: function setIndex(index, emitChange) {
  202. var _this3 = this;
  203. index = this.adjustIndex(index) || 0;
  204. var offset = -index * this.itemHeight;
  205. var trigger = function trigger() {
  206. if (index !== _this3.currentIndex) {
  207. _this3.currentIndex = index;
  208. if (emitChange) {
  209. _this3.$emit('change', index);
  210. }
  211. }
  212. }; // trigger the change event after transitionend when moving
  213. if (this.moving && offset !== this.offset) {
  214. this.transitionEndTrigger = trigger;
  215. } else {
  216. trigger();
  217. }
  218. this.offset = offset;
  219. },
  220. setValue: function setValue(value) {
  221. var options = this.options;
  222. for (var i = 0; i < options.length; i++) {
  223. if (this.getOptionText(options[i]) === value) {
  224. return this.setIndex(i);
  225. }
  226. }
  227. },
  228. getValue: function getValue() {
  229. return this.options[this.currentIndex];
  230. },
  231. getIndexByOffset: function getIndexByOffset(offset) {
  232. return range(Math.round(-offset / this.itemHeight), 0, this.count - 1);
  233. },
  234. momentum: function momentum(distance, duration) {
  235. var speed = Math.abs(distance / duration);
  236. distance = this.offset + speed / 0.003 * (distance < 0 ? -1 : 1);
  237. var index = this.getIndexByOffset(distance);
  238. this.duration = +this.swipeDuration;
  239. this.setIndex(index, true);
  240. },
  241. stopMomentum: function stopMomentum() {
  242. this.moving = false;
  243. this.duration = 0;
  244. if (this.transitionEndTrigger) {
  245. this.transitionEndTrigger();
  246. this.transitionEndTrigger = null;
  247. }
  248. },
  249. genOptions: function genOptions() {
  250. var _this4 = this;
  251. var h = this.$createElement;
  252. var optionStyle = {
  253. height: this.itemHeight + "px"
  254. };
  255. return this.options.map(function (option, index) {
  256. var _domProps;
  257. var text = _this4.getOptionText(option);
  258. var disabled = isOptionDisabled(option);
  259. var data = {
  260. style: optionStyle,
  261. attrs: {
  262. role: 'button',
  263. tabindex: disabled ? -1 : 0
  264. },
  265. class: [bem('item', {
  266. disabled: disabled,
  267. selected: index === _this4.currentIndex
  268. })],
  269. on: {
  270. click: function click() {
  271. _this4.onClickItem(index);
  272. }
  273. }
  274. };
  275. var childData = {
  276. class: 'van-ellipsis',
  277. domProps: (_domProps = {}, _domProps[_this4.allowHtml ? 'innerHTML' : 'textContent'] = text, _domProps)
  278. };
  279. return h("li", _mergeJSXProps([{}, data]), [_this4.slots('option', option) || h("div", _mergeJSXProps2([{}, childData]))]);
  280. });
  281. }
  282. },
  283. render: function render() {
  284. var h = arguments[0];
  285. var wrapperStyle = {
  286. transform: "translate3d(0, " + (this.offset + this.baseOffset) + "px, 0)",
  287. transitionDuration: this.duration + "ms",
  288. transitionProperty: this.duration ? 'all' : 'none'
  289. };
  290. return h("div", {
  291. "class": [bem(), this.className]
  292. }, [h("ul", {
  293. "ref": "wrapper",
  294. "style": wrapperStyle,
  295. "class": bem('wrapper'),
  296. "on": {
  297. "transitionend": this.onTransitionEnd
  298. }
  299. }, [this.genOptions()])]);
  300. }
  301. });