zx_bms_uni/miniprogram_npm/@vant/weapp/grid-item/index.vue

<template>
    <view :class="'custom-class ' + utils.bem('grid-item', { square })" :style="viewStyle" @tap="onClick">
        <view
            :class="
                'content-class ' +
                utils.bem('grid-item__content', [direction, { center, square, clickable, surround: border && gutter }]) +
                ' ' +
                (border ? 'van-hairline--surround' : '')
            "
            :style="contentStyle"
        >
            <block v-if="useSlot">
                <slot />
            </block>
            <block v-else>
                <view class="van-grid-item__icon icon-class">
                    <van-icon v-if="icon" :name="icon" :dot="dot" :info="badge || info" :size="iconSize" />
                    <slot v-else name="icon"></slot>
                </view>
                <view class="van-grid-item__text text-class">
                    <text v-if="text">{{ text }}</text>
                    <slot v-else name="text"></slot>
                </view>
            </block>
        </view>
    </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 link_1 = require('../mixins/link');
var component_1 = require('../common/component');
var utils_1 = require('../common/utils');
component_1.VantComponent({
    relation: {
        name: 'grid',
        type: 'ancestor',
        current: 'grid-item'
    },
    classes: ['content-class', 'icon-class', 'text-class'],
    mixins: [link_1.link],
    props: {
        icon: String,
        dot: Boolean,
        info: null,
        badge: null,
        text: String,
        useSlot: Boolean
    },
    data: {
        viewStyle: ''
    },
    mounted: function () {
        this.updateStyle();
    },
    methods: {
        updateStyle: function () {
            if (!this.parent) {
                return;
            }
            var _a = this.parent;
            var data = _a.data;
            var children = _a.children;
            var columnNum = data.columnNum;
            var border = data.border;
            var square = data.square;
            var gutter = data.gutter;
            var clickable = data.clickable;
            var center = data.center;
            var direction = data.direction;
            var iconSize = data.iconSize;
            var width = 100 / columnNum + '%';
            var styleWrapper = [];
            styleWrapper.push('width: ' + width);
            if (square) {
                styleWrapper.push('padding-top: ' + width);
            }
            if (gutter) {
                var gutterValue = utils_1.addUnit(gutter);
                styleWrapper.push('padding-right: ' + gutterValue);
                var index = children.indexOf(this);
                if (index >= columnNum && !square) {
                    styleWrapper.push('margin-top: ' + gutterValue);
                }
            }
            var contentStyle = '';
            if (square && gutter) {
                var gutterValue = utils_1.addUnit(gutter);
                contentStyle = '\n          right: ' + gutterValue + ';\n          bottom: ' + gutterValue + ';\n          height: auto;\n        ';
            }
            this.setData({
                viewStyle: styleWrapper.join('; '),
                contentStyle: contentStyle,
                center: center,
                border: border,
                square: square,
                gutter: gutter,
                clickable: clickable,
                direction: direction,
                iconSize: iconSize
            });
        },
        onClick: function () {
            this.$emit('click');
            this.jumpLink();
        }
    }
});
</script>
<style>
@import './index.css';
</style>