zx_bms_uni/node_modules/@vant/weapp/lib/skeleton/index.vue

<template>
    <view>
        <view v-if="loading" :class="'custom-class ' + utils.bem('skeleton', [{ animate }])">
            <view v-if="avatar" :class="'avatar-class ' + utils.bem('skeleton__avatar', [avatarShape])" :style="'width:' + avatarSize + ';height:' + avatarSize" />
            <view :class="utils.bem('skeleton__content')">
                <view v-if="title" :class="'title-class ' + utils.bem('skeleton__title')" :style="'width:' + titleWidth" />
                <view
                    :class="'row-class ' + utils.bem('skeleton__row')"
                    :style="'width:' + (isArray ? rowWidth[index] : rowWidth)"
                    v-for="(item, index) in rowArray"
                    :key="index"
                ></view>
            </view>
        </view>
        <view v-else :class="utils.bem('skeleton__content')">
            <slot />
        </view>
    </view>
</template>
<script module="utils" lang="wxs" src="@/node_modules/@vant/weapp/lib/wxs/utils.wxs"></script>
<script>
'use strict';
Object.defineProperty(exports, '__esModule', {
    value: true
});
var component_1 = require('../common/component');
component_1.VantComponent({
    classes: ['avatar-class', 'title-class', 'row-class'],
    props: {
        row: {
            type: Number,
            value: 0,
            observer: function (value) {
                this.setData({
                    rowArray: Array.from({
                        length: value
                    })
                });
            }
        },
        title: Boolean,
        avatar: Boolean,
        loading: {
            type: Boolean,
            value: true
        },
        animate: {
            type: Boolean,
            value: true
        },
        avatarSize: {
            type: String,
            value: '32px'
        },
        avatarShape: {
            type: String,
            value: 'round'
        },
        titleWidth: {
            type: String,
            value: '40%'
        },
        rowWidth: {
            type: null,
            value: '100%',
            observer: function (val) {
                this.setData({
                    isArray: val instanceof Array
                });
            }
        }
    },
    data: {
        isArray: false,
        rowArray: []
    }
});
</script>
<style>
@import './index.css';
</style>