Select.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  2. import PropTypes from '../_util/vue-types';
  3. import BaseMixin from '../_util/BaseMixin';
  4. import classnames from 'classnames';
  5. import raf from 'raf';
  6. function noop() {}
  7. var scrollTo = function scrollTo(element, to, duration) {
  8. // jump to target if duration zero
  9. if (duration <= 0) {
  10. raf(function () {
  11. element.scrollTop = to;
  12. });
  13. return;
  14. }
  15. var difference = to - element.scrollTop;
  16. var perTick = difference / duration * 10;
  17. raf(function () {
  18. element.scrollTop += perTick;
  19. if (element.scrollTop === to) return;
  20. scrollTo(element, to, duration - 10);
  21. });
  22. };
  23. var Select = {
  24. mixins: [BaseMixin],
  25. props: {
  26. prefixCls: PropTypes.string,
  27. options: PropTypes.array,
  28. selectedIndex: PropTypes.number,
  29. type: PropTypes.string
  30. // onSelect: PropTypes.func,
  31. // onMouseEnter: PropTypes.func,
  32. },
  33. data: function data() {
  34. return {
  35. active: false
  36. };
  37. },
  38. mounted: function mounted() {
  39. var _this = this;
  40. this.$nextTick(function () {
  41. // jump to selected option
  42. _this.scrollToSelected(0);
  43. });
  44. },
  45. watch: {
  46. selectedIndex: function selectedIndex() {
  47. var _this2 = this;
  48. this.$nextTick(function () {
  49. // smooth scroll to selected option
  50. _this2.scrollToSelected(120);
  51. });
  52. }
  53. },
  54. methods: {
  55. onSelect: function onSelect(value) {
  56. var type = this.type;
  57. this.__emit('select', type, value);
  58. },
  59. onEsc: function onEsc(e) {
  60. this.__emit('esc', e);
  61. },
  62. getOptions: function getOptions() {
  63. var _this3 = this;
  64. var h = this.$createElement;
  65. var options = this.options,
  66. selectedIndex = this.selectedIndex,
  67. prefixCls = this.prefixCls;
  68. return options.map(function (item, index) {
  69. var _classnames;
  70. var cls = classnames((_classnames = {}, _defineProperty(_classnames, prefixCls + '-select-option-selected', selectedIndex === index), _defineProperty(_classnames, prefixCls + '-select-option-disabled', item.disabled), _classnames));
  71. var onClick = item.disabled ? noop : function () {
  72. _this3.onSelect(item.value);
  73. };
  74. var onKeyDown = function onKeyDown(e) {
  75. if (e.keyCode === 13) onClick();else if (e.keyCode === 27) _this3.onEsc();
  76. };
  77. return h(
  78. 'li',
  79. {
  80. attrs: {
  81. role: 'button',
  82. disabled: item.disabled,
  83. tabIndex: '0'
  84. },
  85. on: {
  86. 'click': onClick,
  87. 'keydown': onKeyDown
  88. },
  89. 'class': cls,
  90. key: index },
  91. [item.value]
  92. );
  93. });
  94. },
  95. handleMouseEnter: function handleMouseEnter(e) {
  96. this.setState({ active: true });
  97. this.__emit('mouseenter', e);
  98. },
  99. handleMouseLeave: function handleMouseLeave() {
  100. this.setState({ active: false });
  101. },
  102. scrollToSelected: function scrollToSelected(duration) {
  103. // move to selected item
  104. var select = this.$el;
  105. var list = this.$refs.list;
  106. if (!list) {
  107. return;
  108. }
  109. var index = this.selectedIndex;
  110. if (index < 0) {
  111. index = 0;
  112. }
  113. var topOption = list.children[index];
  114. var to = topOption.offsetTop;
  115. scrollTo(select, to, duration);
  116. }
  117. },
  118. render: function render() {
  119. var _cls;
  120. var h = arguments[0];
  121. var prefixCls = this.prefixCls,
  122. options = this.options,
  123. active = this.active;
  124. if (options.length === 0) {
  125. return null;
  126. }
  127. var cls = (_cls = {}, _defineProperty(_cls, prefixCls + '-select', 1), _defineProperty(_cls, prefixCls + '-select-active', active), _cls);
  128. return h(
  129. 'div',
  130. { 'class': cls, on: {
  131. 'mouseenter': this.handleMouseEnter,
  132. 'mouseleave': this.handleMouseLeave
  133. }
  134. },
  135. [h(
  136. 'ul',
  137. { ref: 'list' },
  138. [this.getOptions()]
  139. )]
  140. );
  141. }
  142. };
  143. export default Select;