Key.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. import { createNamespace } from '../utils';
  2. import { TouchMixin } from '../mixins/touch';
  3. import Loading from '../loading';
  4. import DeleteIcon from './DeleteIcon';
  5. import CollapseIcon from './CollapseIcon';
  6. var _createNamespace = createNamespace('key'),
  7. createComponent = _createNamespace[0],
  8. bem = _createNamespace[1];
  9. export default createComponent({
  10. mixins: [TouchMixin],
  11. props: {
  12. type: String,
  13. text: [Number, String],
  14. color: String,
  15. wider: Boolean,
  16. large: Boolean,
  17. loading: Boolean
  18. },
  19. data: function data() {
  20. return {
  21. active: false
  22. };
  23. },
  24. mounted: function mounted() {
  25. this.bindTouchEvent(this.$el);
  26. },
  27. methods: {
  28. onTouchStart: function onTouchStart(event) {
  29. // compatible with Vue 2.6 event bubble bug
  30. event.stopPropagation();
  31. this.touchStart(event);
  32. this.active = true;
  33. },
  34. onTouchMove: function onTouchMove(event) {
  35. this.touchMove(event);
  36. if (this.direction) {
  37. this.active = false;
  38. }
  39. },
  40. onTouchEnd: function onTouchEnd(event) {
  41. if (this.active) {
  42. // eliminate tap delay on safari
  43. // see: https://github.com/vant-ui/vant/issues/6836
  44. if (!this.slots('default')) {
  45. event.preventDefault();
  46. }
  47. this.active = false;
  48. this.$emit('press', this.text, this.type);
  49. }
  50. },
  51. genContent: function genContent() {
  52. var h = this.$createElement;
  53. var isExtra = this.type === 'extra';
  54. var isDelete = this.type === 'delete';
  55. var text = this.slots('default') || this.text;
  56. if (this.loading) {
  57. return h(Loading, {
  58. "class": bem('loading-icon')
  59. });
  60. }
  61. if (isDelete) {
  62. return text || h(DeleteIcon, {
  63. "class": bem('delete-icon')
  64. });
  65. }
  66. if (isExtra) {
  67. return text || h(CollapseIcon, {
  68. "class": bem('collapse-icon')
  69. });
  70. }
  71. return text;
  72. }
  73. },
  74. render: function render() {
  75. var h = arguments[0];
  76. return h("div", {
  77. "class": bem('wrapper', {
  78. wider: this.wider
  79. })
  80. }, [h("div", {
  81. "attrs": {
  82. "role": "button",
  83. "tabindex": "0"
  84. },
  85. "class": bem([this.color, {
  86. large: this.large,
  87. active: this.active,
  88. delete: this.type === 'delete'
  89. }])
  90. }, [this.genContent()])]);
  91. }
  92. });