zx_bms_uni/miniprogram_npm/@vant/weapp/action-sheet/index.vue

<template>
    <view>
        <van-popup
            :show="show"
            position="bottom"
            :round="round"
            :z-index="zIndex"
            :overlay="overlay"
            custom-class="van-action-sheet"
            :safe-area-inset-bottom="safeAreaInsetBottom"
            :close-on-click-overlay="closeOnClickOverlay"
            @close="onClickOverlay"
        >
            <view v-if="title" class="van-hairline--bottom van-action-sheet__header">
                {{ title }}
                <van-icon name="close" custom-class="van-action-sheet__close" @click="onClose" />
            </view>
            <view v-if="description" class="van-action-sheet__description">
                {{ description }}
            </view>
            <view v-if="actions && actions.length">
                <!-- button外包一层view，防止actions动态变化，导致渲染时button被打散 -->
                <button
                    :open-type="item.openType"
                    :style="item.color ? 'color: ' + item.color : ''"
                    :class="utils.bem('action-sheet__item', { disabled: item.disabled || item.loading }) + ' van-hairline--top ' + (item.className || '')"
                    hover-class="van-action-sheet__item--hover"
                    :data-index="index"
                    @tap="onSelect"
                    @getuserinfo="bindGetUserInfo"
                    @contact="bindContact"
                    @getphonenumber="bindGetPhoneNumber"
                    @error="bindError"
                    @launchapp="bindLaunchApp"
                    @opensetting="bindOpenSetting"
                    :lang="lang"
                    :session-from="sessionFrom"
                    :send-message-title="sendMessageTitle"
                    :send-message-path="sendMessagePath"
                    :send-message-img="sendMessageImg"
                    :show-message-card="showMessageCard"
                    :app-parameter="appParameter"
                    v-for="(item, index) in actions"
                    :key="index"
                >
                    <block v-if="!item.loading">
                        {{ item.name }}
                        <text v-if="item.subname" class="van-action-sheet__subname">{{ item.subname }}</text>
                    </block>

                    <van-loading v-else custom-class="van-action-sheet__loading" size="20px" />
                </button>
            </view>
            <slot />
            <view v-if="cancelText" class="van-action-sheet__cancel" hover-class="van-action-sheet__cancel--hover" hover-stay-time="70" @tap="onCancel">
                {{ cancelText }}
            </view>
        </van-popup>
    </view>
</template>
<script module="utils" lang="wxs" src="@/miniprogram_npm/@vant/weapp/wxs/utils.wxs"></script>
<script>
'use strict';
Object.defineProperty(exports, '__esModule', {
    value: true
});
var component_1 = require('../common/component');
var button_1 = require('../mixins/button');
var open_type_1 = require('../mixins/open-type');
component_1.VantComponent({
    mixins: [button_1.button, open_type_1.openType],
    props: {
        show: Boolean,
        title: String,
        cancelText: String,
        description: String,
        round: {
            type: Boolean,
            value: true
        },
        zIndex: {
            type: Number,
            value: 100
        },
        actions: {
            type: Array,
            value: []
        },
        overlay: {
            type: Boolean,
            value: true
        },
        closeOnClickOverlay: {
            type: Boolean,
            value: true
        },
        closeOnClickAction: {
            type: Boolean,
            value: true
        },
        safeAreaInsetBottom: {
            type: Boolean,
            value: true
        }
    },
    methods: {
        onSelect: function (event) {
            var index = event.currentTarget.dataset.index;
            var item = this.actions[index];
            if (item && !item.disabled && !item.loading) {
                this.$emit('select', item);
                if (this.closeOnClickAction) {
                    this.onClose();
                }
            }
        },
        onCancel: function () {
            this.$emit('cancel');
        },
        onClose: function () {
            this.$emit('close');
        },
        onClickOverlay: function () {
            this.$emit('click-overlay');
            this.onClose();
        }
    }
});
</script>
<style>
@import './index.css';
</style>