index.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. // Utils
  3. import { createNamespace } from '../utils'; // Mixins
  4. import { popupMixinProps } from '../mixins/popup'; // Components
  5. import Popup from '../popup';
  6. var PRESET_ICONS = ['qq', 'link', 'weibo', 'wechat', 'poster', 'qrcode', 'weapp-qrcode', 'wechat-moments'];
  7. var _createNamespace = createNamespace('share-sheet'),
  8. createComponent = _createNamespace[0],
  9. bem = _createNamespace[1],
  10. t = _createNamespace[2];
  11. export default createComponent({
  12. props: _extends({}, popupMixinProps, {
  13. title: String,
  14. duration: String,
  15. cancelText: String,
  16. description: String,
  17. getContainer: [String, Function],
  18. options: {
  19. type: Array,
  20. default: function _default() {
  21. return [];
  22. }
  23. },
  24. overlay: {
  25. type: Boolean,
  26. default: true
  27. },
  28. closeOnPopstate: {
  29. type: Boolean,
  30. default: true
  31. },
  32. safeAreaInsetBottom: {
  33. type: Boolean,
  34. default: true
  35. },
  36. closeOnClickOverlay: {
  37. type: Boolean,
  38. default: true
  39. }
  40. }),
  41. methods: {
  42. onCancel: function onCancel() {
  43. this.toggle(false);
  44. this.$emit('cancel');
  45. },
  46. onSelect: function onSelect(option, index) {
  47. this.$emit('select', option, index);
  48. },
  49. toggle: function toggle(val) {
  50. this.$emit('input', val);
  51. },
  52. getIconURL: function getIconURL(icon) {
  53. if (PRESET_ICONS.indexOf(icon) !== -1) {
  54. return "https://img01.yzcdn.cn/vant/share-sheet-" + icon + ".png";
  55. }
  56. return icon;
  57. },
  58. genHeader: function genHeader() {
  59. var h = this.$createElement;
  60. var title = this.slots('title') || this.title;
  61. var description = this.slots('description') || this.description;
  62. if (!title && !description) {
  63. return;
  64. }
  65. return h("div", {
  66. "class": bem('header')
  67. }, [title && h("h2", {
  68. "class": bem('title')
  69. }, [title]), description && h("span", {
  70. "class": bem('description')
  71. }, [description])]);
  72. },
  73. genOptions: function genOptions(options, showBorder) {
  74. var _this = this;
  75. var h = this.$createElement;
  76. return h("div", {
  77. "class": bem('options', {
  78. border: showBorder
  79. })
  80. }, [options.map(function (option, index) {
  81. return h("div", {
  82. "attrs": {
  83. "role": "button",
  84. "tabindex": "0"
  85. },
  86. "class": [bem('option'), option.className],
  87. "on": {
  88. "click": function click() {
  89. _this.onSelect(option, index);
  90. }
  91. }
  92. }, [h("img", {
  93. "attrs": {
  94. "src": _this.getIconURL(option.icon)
  95. },
  96. "class": bem('icon')
  97. }), option.name && h("span", {
  98. "class": bem('name')
  99. }, [option.name]), option.description && h("span", {
  100. "class": bem('option-description')
  101. }, [option.description])]);
  102. })]);
  103. },
  104. genRows: function genRows() {
  105. var _this2 = this;
  106. var options = this.options;
  107. if (Array.isArray(options[0])) {
  108. return options.map(function (item, index) {
  109. return _this2.genOptions(item, index !== 0);
  110. });
  111. }
  112. return this.genOptions(options);
  113. },
  114. genCancelText: function genCancelText() {
  115. var _this$cancelText;
  116. var h = this.$createElement;
  117. var cancelText = (_this$cancelText = this.cancelText) != null ? _this$cancelText : t('cancel');
  118. if (cancelText) {
  119. return h("button", {
  120. "attrs": {
  121. "type": "button"
  122. },
  123. "class": bem('cancel'),
  124. "on": {
  125. "click": this.onCancel
  126. }
  127. }, [cancelText]);
  128. }
  129. },
  130. onClickOverlay: function onClickOverlay() {
  131. this.$emit('click-overlay');
  132. }
  133. },
  134. render: function render() {
  135. var h = arguments[0];
  136. return h(Popup, {
  137. "attrs": {
  138. "round": true,
  139. "value": this.value,
  140. "position": "bottom",
  141. "overlay": this.overlay,
  142. "duration": this.duration,
  143. "lazyRender": this.lazyRender,
  144. "lockScroll": this.lockScroll,
  145. "getContainer": this.getContainer,
  146. "closeOnPopstate": this.closeOnPopstate,
  147. "closeOnClickOverlay": this.closeOnClickOverlay,
  148. "safeAreaInsetBottom": this.safeAreaInsetBottom
  149. },
  150. "class": bem(),
  151. "on": {
  152. "input": this.toggle,
  153. "click-overlay": this.onClickOverlay
  154. }
  155. }, [this.genHeader(), this.genRows(), this.genCancelText()]);
  156. }
  157. });