feat: add ShareSheet component

2020-04-09 13:09:32 +08:00
parent 8144e3de50
commit 5080761cfe
8 changed files with 356 additions and 1 deletions
@@ -0,0 +1,97 @@
+// Utils
+import { createNamespace, isDef } from '../utils';
+
+// Mixins
+import { popupMixinProps } from '../mixins/popup';
+
+// Components
+import Popup from '../popup';
+
+const PRESET_ICONS = ['wechat', 'link', 'qrcode', 'poster'];
+
+const [createComponent, bem, t] = createNamespace('share-sheet');
+
+export default createComponent({
+  props: {
+    ...popupMixinProps,
+    title: String,
+    cancelText: String,
+    description: String,
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    safeAreaInsetBottom: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  methods: {
+    onCancel() {
+      this.toggle(false);
+    },
+
+    onSelect(option, index) {
+      this.$emit('select', option, index);
+    },
+
+    toggle(val) {
+      this.$emit('input', val);
+    },
+
+    getIconURL(icon) {
+      if (PRESET_ICONS.indexOf(icon) !== -1) {
+        return `https://img.yzcdn.cn/vant/share-icon-${icon}.svg`;
+      }
+
+      return icon;
+    },
+
+    genOptions() {
+      return (
+        <div class={bem('options')}>
+          {this.options.map((option, index) => (
+            <div
+              class={bem('option')}
+              onClick={() => {
+                this.onSelect(option, index);
+              }}
+            >
+              <img src={this.getIconURL(option.icon)} class={bem('icon')} />
+              <span class={bem('name')}>{option.name || ''}</span>
+            </div>
+          ))}
+        </div>
+      );
+    },
+
+    genCancelText() {
+      const cancelText = isDef(this.cancelText) ? this.cancelText : t('cancel');
+
+      if (cancelText) {
+        return (
+          <button type="button" class={bem('cancel')} onClick={this.onCancel}>
+            {cancelText}
+          </button>
+        );
+      }
+    },
+  },
+
+  render() {
+    return (
+      <Popup
+        round
+        class={bem()}
+        value={this.value}
+        position="bottom"
+        safeAreaInsetBottom={this.safeAreaInsetBottom}
+        onInput={this.toggle}
+      >
+        {this.genOptions()}
+        {this.genCancelText()}
+      </Popup>
+    );
+  },
+});