vant

utils/dist/dialog/dialog.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="miniprogram-api-typings" />
+declare type DialogAction = 'confirm' | 'cancel';
+declare type DialogOptions = {
+    lang?: string;
+    show?: boolean;
+    title?: string;
+    width?: string | number;
+    zIndex?: number;
+    context?: WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
+    message?: string;
+    overlay?: boolean;
+    selector?: string;
+    ariaLabel?: string;
+    className?: string;
+    customStyle?: string;
+    transition?: string;
+    asyncClose?: boolean;
+    businessId?: number;
+    sessionFrom?: string;
+    overlayStyle?: string;
+    appParameter?: string;
+    messageAlign?: string;
+    sendMessageImg?: string;
+    showMessageCard?: boolean;
+    sendMessagePath?: string;
+    sendMessageTitle?: string;
+    confirmButtonText?: string;
+    cancelButtonText?: string;
+    showConfirmButton?: boolean;
+    showCancelButton?: boolean;
+    closeOnClickOverlay?: boolean;
+    confirmButtonOpenType?: string;
+};
+interface Dialog {
+    (options: DialogOptions): Promise<DialogAction>;
+    alert?: (options: DialogOptions) => Promise<DialogAction>;
+    confirm?: (options: DialogOptions) => Promise<DialogAction>;
+    close?: () => void;
+    stopLoading?: () => void;
+    install?: () => void;
+    setDefaultOptions?: (options: DialogOptions) => void;
+    resetDefaultOptions?: () => void;
+    defaultOptions?: DialogOptions;
+    currentOptions?: DialogOptions;
+}
+declare const Dialog: Dialog;
+export default Dialog;

utils/dist/dialog/dialog.js

@@ -0,0 +1,63 @@
+let queue = [];
+function getContext() {
+    const pages = getCurrentPages();
+    return pages[pages.length - 1];
+}
+const Dialog = options => {
+    options = Object.assign(Object.assign({}, Dialog.currentOptions), options);
+    return new Promise((resolve, reject) => {
+        const context = options.context || getContext();
+        const dialog = context.selectComponent(options.selector);
+        delete options.context;
+        delete options.selector;
+        if (dialog) {
+            dialog.setData(Object.assign({ onCancel: reject, onConfirm: resolve }, options));
+            queue.push(dialog);
+        }
+        else {
+            console.warn('未找到 van-dialog 节点，请确认 selector 及 context 是否正确');
+        }
+    });
+};
+Dialog.defaultOptions = {
+    show: true,
+    title: '',
+    width: null,
+    message: '',
+    zIndex: 100,
+    overlay: true,
+    selector: '#van-dialog',
+    className: '',
+    asyncClose: false,
+    transition: 'scale',
+    customStyle: '',
+    messageAlign: '',
+    overlayStyle: '',
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    showConfirmButton: true,
+    showCancelButton: false,
+    closeOnClickOverlay: false,
+    confirmButtonOpenType: ''
+};
+Dialog.alert = Dialog;
+Dialog.confirm = options => Dialog(Object.assign({ showCancelButton: true }, options));
+Dialog.close = () => {
+    queue.forEach(dialog => {
+        dialog.close();
+    });
+    queue = [];
+};
+Dialog.stopLoading = () => {
+    queue.forEach(dialog => {
+        dialog.stopLoading();
+    });
+};
+Dialog.setDefaultOptions = options => {
+    Object.assign(Dialog.currentOptions, options);
+};
+Dialog.resetDefaultOptions = () => {
+    Dialog.currentOptions = Object.assign({}, Dialog.defaultOptions);
+};
+Dialog.resetDefaultOptions();
+export default Dialog;

utils/dist/dialog/index.d.ts

@@ -0,0 +1 @@
+export {};

utils/dist/dialog/index.js

@@ -0,0 +1,119 @@
+import { VantComponent } from '../common/component';
+import { button } from '../mixins/button';
+import { openType } from '../mixins/open-type';
+import { addUnit } from '../common/utils';
+import { GRAY, BLUE } from '../common/color';
+VantComponent({
+    mixins: [button, openType],
+    props: {
+        show: Boolean,
+        title: String,
+        message: String,
+        useSlot: Boolean,
+        className: String,
+        customStyle: String,
+        asyncClose: Boolean,
+        messageAlign: String,
+        overlayStyle: String,
+        useTitleSlot: Boolean,
+        showCancelButton: Boolean,
+        closeOnClickOverlay: Boolean,
+        confirmButtonOpenType: String,
+        width: {
+            type: null,
+            observer: 'setWidthWithUnit'
+        },
+        zIndex: {
+            type: Number,
+            value: 2000
+        },
+        confirmButtonText: {
+            type: String,
+            value: '确认'
+        },
+        cancelButtonText: {
+            type: String,
+            value: '取消'
+        },
+        confirmButtonColor: {
+            type: String,
+            value: BLUE
+        },
+        cancelButtonColor: {
+            type: String,
+            value: GRAY
+        },
+        showConfirmButton: {
+            type: Boolean,
+            value: true
+        },
+        overlay: {
+            type: Boolean,
+            value: true
+        },
+        transition: {
+            type: String,
+            value: 'scale'
+        }
+    },
+    data: {
+        loading: {
+            confirm: false,
+            cancel: false
+        }
+    },
+    watch: {
+        show(show) {
+            !show && this.stopLoading();
+        }
+    },
+    methods: {
+        onConfirm() {
+            this.handleAction('confirm');
+        },
+        onCancel() {
+            this.handleAction('cancel');
+        },
+        onClickOverlay() {
+            this.onClose('overlay');
+        },
+        handleAction(action) {
+            if (this.data.asyncClose) {
+                this.setData({
+                    [`loading.${action}`]: true
+                });
+            }
+            this.onClose(action);
+        },
+        close() {
+            this.setData({
+                show: false
+            });
+        },
+        stopLoading() {
+            this.setData({
+                loading: {
+                    confirm: false,
+                    cancel: false
+                }
+            });
+        },
+        onClose(action) {
+            if (!this.data.asyncClose) {
+                this.close();
+            }
+            this.$emit('close', action);
+            // 把 dialog 实例传递出去，可以通过 stopLoading() 在外部关闭按钮的 loading
+            this.$emit(action, { dialog: this });
+            const callback = this.data[action === 'confirm' ? 'onConfirm' : 'onCancel'];
+            if (callback) {
+                callback(this);
+            }
+        },
+        setWidthWithUnit(val) {
+            this.setData({
+                widthWithUnit: addUnit(val)
+            });
+        }
+    }
+});

utils/dist/dialog/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-popup": "../popup/index",
+    "van-button": "../button/index"
+  }
+}

utils/dist/dialog/index.wxml

@@ -0,0 +1,69 @@
+<van-popup
+  show="{{ show }}"
+  z-index="{{ zIndex }}"
+  overlay="{{ overlay }}"
+  transition="{{ transition }}"
+  custom-class="van-dialog {{ className }}"
+  custom-style="{{ widthWithUnit ? 'width: ' + widthWithUnit + ';' : '' }}{{ customStyle }}"
+  overlay-style="{{ overlayStyle }}"
+  close-on-click-overlay="{{ closeOnClickOverlay }}"
+  bind:close="onClickOverlay"
+>
+  <view
+    wx:if="{{ title || useTitleSlot  }}"
+    class="van-dialog__header {{ message || useSlot ? '' : 'van-dialog--isolated' }}"
+  >
+    <slot wx:if="{{ useTitleSlot }}" name="title" />
+    <block wx:elif="{{ title }}"> {{ title }}</block>
+  </view>
+
+  <slot wx:if="{{ useSlot }}" />
+  <view
+    wx:elif="{{ message }}"
+    class="van-dialog__message {{ title ? 'van-dialog__message--has-title' : '' }} {{ messageAlign ? 'van-dialog__message--' + messageAlign : '' }}"
+  >
+    <text class="van-dialog__message-text">{{ message }}</text>
+  </view>
+
+  <view class="van-hairline--top van-dialog__footer">
+    <van-button
+      wx:if="{{ showCancelButton }}"
+      size="large"
+      loading="{{ loading.cancel }}"
+      class="van-dialog__button van-hairline--right"
+      custom-class="van-dialog__cancel"
+      custom-style="color: {{ cancelButtonColor }}"
+      bind:click="onCancel"
+    >
+      {{ cancelButtonText }}
+    </van-button>
+    <van-button
+      wx:if="{{ showConfirmButton }}"
+      size="large"
+      class="van-dialog__button"
+      loading="{{ loading.confirm }}"
+      custom-class="van-dialog__confirm"
+      custom-style="color: {{ confirmButtonColor }}"
+
+      open-type="{{ confirmButtonOpenType }}"
+      lang="{{ lang }}"
+      business-id="{{ businessId }}"
+      session-from="{{ sessionFrom }}"
+      send-message-title="{{ sendMessageTitle }}"
+      send-message-path="{{ sendMessagePath }}"
+      send-message-img="{{ sendMessageImg }}"
+      show-message-card="{{ showMessageCard }}"
+      app-parameter="{{ appParameter }}"
+
+      bind:click="onConfirm"
+      bindgetuserinfo="bindGetUserInfo"
+      bindcontact="bindContact"
+      bindgetphonenumber="bindGetPhoneNumber"
+      binderror="bindError"
+      bindlaunchapp="bindLaunchApp"
+      bindopensetting="bindOpenSetting"
+    >
+      {{ confirmButtonText }}
+    </van-button>
+  </view>
+</van-popup>

utils/dist/dialog/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-dialog{top:45%!important;overflow:hidden;width:320px;width:var(--dialog-width,320px);font-size:16px;font-size:var(--dialog-font-size,16px);border-radius:16px;border-radius:var(--dialog-border-radius,16px);background-color:#fff;background-color:var(--dialog-background-color,#fff)}@media (max-width:321px){.van-dialog{width:90%;width:var(--dialog-small-screen-width,90%)}}.van-dialog__header{text-align:center;padding-top:24px;padding-top:var(--dialog-header-padding-top,24px);font-weight:500;font-weight:var(--dialog-header-font-weight,500);line-height:24px;line-height:var(--dialog-header-line-height,24px)}.van-dialog__header--isolated{padding:24px 0;padding:var(--dialog-header-isolated-padding,24px 0)}.van-dialog__message{overflow-y:auto;text-align:center;-webkit-overflow-scrolling:touch;font-size:14px;font-size:var(--dialog-message-font-size,14px);line-height:20px;line-height:var(--dialog-message-line-height,20px);max-height:60vh;max-height:var(--dialog-message-max-height,60vh);padding:24px;padding:var(--dialog-message-padding,24px)}.van-dialog__message-text{word-wrap:break-word}.van-dialog__message--has-title{padding-top:12px;padding-top:var(--dialog-has-title-message-padding-top,12px);color:#646566;color:var(--dialog-has-title-message-text-color,#646566)}.van-dialog__message--left{text-align:left}.van-dialog__message--right{text-align:right}.van-dialog__footer{display:-webkit-flex;display:flex}.van-dialog__button{-webkit-flex:1;flex:1}.van-dialog__cancel,.van-dialog__confirm{border:0!important}.van-dialog-bounce-enter{-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7);opacity:0}.van-dialog-bounce-leave-active{-webkit-transform:translate3d(-50%,-50%,0) scale(.9);transform:translate3d(-50%,-50%,0) scale(.9);opacity:0}