PickerColumn.js 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300
  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, isObject } from '../utils';
  5. import { range } from '../utils/format/number';
  6. import { preventDefault } 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. var MOMENTUM_LIMIT_TIME = 300;
  12. 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. }
  25. export default createComponent({
  26. mixins: [TouchMixin],
  27. props: {
  28. valueKey: String,
  29. readonly: Boolean,
  30. allowHtml: Boolean,
  31. className: String,
  32. itemHeight: Number,
  33. defaultIndex: Number,
  34. swipeDuration: [Number, String],
  35. visibleItemCount: [Number, String],
  36. initialOptions: {
  37. type: Array,
  38. default: function _default() {
  39. return [];
  40. }
  41. }
  42. },
  43. data: function data() {
  44. return {
  45. offset: 0,
  46. duration: 0,
  47. options: deepClone(this.initialOptions),
  48. currentIndex: this.defaultIndex
  49. };
  50. },
  51. created: function created() {
  52. if (this.$parent.children) {
  53. this.$parent.children.push(this);
  54. }
  55. this.setIndex(this.currentIndex);
  56. },
  57. mounted: function mounted() {
  58. this.bindTouchEvent(this.$el);
  59. },
  60. destroyed: function destroyed() {
  61. var children = this.$parent.children;
  62. if (children) {
  63. children.splice(children.indexOf(this), 1);
  64. }
  65. },
  66. watch: {
  67. initialOptions: 'setOptions',
  68. defaultIndex: function defaultIndex(val) {
  69. this.setIndex(val);
  70. }
  71. },
  72. computed: {
  73. count: function count() {
  74. return this.options.length;
  75. },
  76. baseOffset: function baseOffset() {
  77. return this.itemHeight * (this.visibleItemCount - 1) / 2;
  78. }
  79. },
  80. methods: {
  81. setOptions: function setOptions(options) {
  82. if (JSON.stringify(options) !== JSON.stringify(this.options)) {
  83. this.options = deepClone(options);
  84. this.setIndex(this.defaultIndex);
  85. }
  86. },
  87. onTouchStart: function onTouchStart(event) {
  88. if (this.readonly) {
  89. return;
  90. }
  91. this.touchStart(event);
  92. if (this.moving) {
  93. var translateY = getElementTranslateY(this.$refs.wrapper);
  94. this.offset = Math.min(0, translateY - this.baseOffset);
  95. this.startOffset = this.offset;
  96. } else {
  97. this.startOffset = this.offset;
  98. }
  99. this.duration = 0;
  100. this.transitionEndTrigger = null;
  101. this.touchStartTime = Date.now();
  102. this.momentumOffset = this.startOffset;
  103. },
  104. onTouchMove: function onTouchMove(event) {
  105. if (this.readonly) {
  106. return;
  107. }
  108. this.touchMove(event);
  109. if (this.direction === 'vertical') {
  110. this.moving = true;
  111. preventDefault(event, true);
  112. }
  113. this.offset = range(this.startOffset + this.deltaY, -(this.count * this.itemHeight), this.itemHeight);
  114. var now = Date.now();
  115. if (now - this.touchStartTime > MOMENTUM_LIMIT_TIME) {
  116. this.touchStartTime = now;
  117. this.momentumOffset = this.offset;
  118. }
  119. },
  120. onTouchEnd: function onTouchEnd() {
  121. var _this = this;
  122. if (this.readonly) {
  123. return;
  124. }
  125. var distance = this.offset - this.momentumOffset;
  126. var duration = Date.now() - this.touchStartTime;
  127. var allowMomentum = duration < MOMENTUM_LIMIT_TIME && Math.abs(distance) > MOMENTUM_LIMIT_DISTANCE;
  128. if (allowMomentum) {
  129. this.momentum(distance, duration);
  130. return;
  131. }
  132. var index = this.getIndexByOffset(this.offset);
  133. this.duration = DEFAULT_DURATION;
  134. this.setIndex(index, true); // compatible with desktop scenario
  135. // use setTimeout to skip the click event Emitted after touchstart
  136. setTimeout(function () {
  137. _this.moving = false;
  138. }, 0);
  139. },
  140. onTransitionEnd: function onTransitionEnd() {
  141. this.stopMomentum();
  142. },
  143. onClickItem: function onClickItem(index) {
  144. if (this.moving || this.readonly) {
  145. return;
  146. }
  147. this.transitionEndTrigger = null;
  148. this.duration = DEFAULT_DURATION;
  149. this.setIndex(index, true);
  150. },
  151. adjustIndex: function adjustIndex(index) {
  152. index = range(index, 0, this.count);
  153. for (var i = index; i < this.count; i++) {
  154. if (!isOptionDisabled(this.options[i])) return i;
  155. }
  156. for (var _i = index - 1; _i >= 0; _i--) {
  157. if (!isOptionDisabled(this.options[_i])) return _i;
  158. }
  159. },
  160. getOptionText: function getOptionText(option) {
  161. if (isObject(option) && this.valueKey in option) {
  162. return option[this.valueKey];
  163. }
  164. return option;
  165. },
  166. setIndex: function setIndex(index, emitChange) {
  167. var _this2 = this;
  168. index = this.adjustIndex(index) || 0;
  169. var offset = -index * this.itemHeight;
  170. var trigger = function trigger() {
  171. if (index !== _this2.currentIndex) {
  172. _this2.currentIndex = index;
  173. if (emitChange) {
  174. _this2.$emit('change', index);
  175. }
  176. }
  177. }; // trigger the change event after transitionend when moving
  178. if (this.moving && offset !== this.offset) {
  179. this.transitionEndTrigger = trigger;
  180. } else {
  181. trigger();
  182. }
  183. this.offset = offset;
  184. },
  185. setValue: function setValue(value) {
  186. var options = this.options;
  187. for (var i = 0; i < options.length; i++) {
  188. if (this.getOptionText(options[i]) === value) {
  189. return this.setIndex(i);
  190. }
  191. }
  192. },
  193. getValue: function getValue() {
  194. return this.options[this.currentIndex];
  195. },
  196. getIndexByOffset: function getIndexByOffset(offset) {
  197. return range(Math.round(-offset / this.itemHeight), 0, this.count - 1);
  198. },
  199. momentum: function momentum(distance, duration) {
  200. var speed = Math.abs(distance / duration);
  201. distance = this.offset + speed / 0.003 * (distance < 0 ? -1 : 1);
  202. var index = this.getIndexByOffset(distance);
  203. this.duration = +this.swipeDuration;
  204. this.setIndex(index, true);
  205. },
  206. stopMomentum: function stopMomentum() {
  207. this.moving = false;
  208. this.duration = 0;
  209. if (this.transitionEndTrigger) {
  210. this.transitionEndTrigger();
  211. this.transitionEndTrigger = null;
  212. }
  213. },
  214. genOptions: function genOptions() {
  215. var _this3 = this;
  216. var h = this.$createElement;
  217. var optionStyle = {
  218. height: this.itemHeight + "px"
  219. };
  220. return this.options.map(function (option, index) {
  221. var _domProps;
  222. var text = _this3.getOptionText(option);
  223. var disabled = isOptionDisabled(option);
  224. var data = {
  225. style: optionStyle,
  226. attrs: {
  227. role: 'button',
  228. tabindex: disabled ? -1 : 0
  229. },
  230. class: [bem('item', {
  231. disabled: disabled,
  232. selected: index === _this3.currentIndex
  233. })],
  234. on: {
  235. click: function click() {
  236. _this3.onClickItem(index);
  237. }
  238. }
  239. };
  240. var childData = {
  241. class: 'van-ellipsis',
  242. domProps: (_domProps = {}, _domProps[_this3.allowHtml ? 'innerHTML' : 'textContent'] = text, _domProps)
  243. };
  244. return h("li", _mergeJSXProps([{}, data]), [_this3.slots('option', option) || h("div", _mergeJSXProps2([{}, childData]))]);
  245. });
  246. }
  247. },
  248. render: function render() {
  249. var h = arguments[0];
  250. var wrapperStyle = {
  251. transform: "translate3d(0, " + (this.offset + this.baseOffset) + "px, 0)",
  252. transitionDuration: this.duration + "ms",
  253. transitionProperty: this.duration ? 'all' : 'none'
  254. };
  255. return h("div", {
  256. "class": [bem(), this.className]
  257. }, [h("ul", {
  258. "ref": "wrapper",
  259. "style": wrapperStyle,
  260. "class": bem('wrapper'),
  261. "on": {
  262. "transitionend": this.onTransitionEnd
  263. }
  264. }, [this.genOptions()])]);
  265. }
  266. });