1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- import { link } from '../mixins/link';
- import { VantComponent } from '../common/component';
- import { addUnit } from '../common/utils';
- VantComponent({
- relation: {
- name: 'grid',
- type: 'ancestor',
- current: 'grid-item',
- },
- classes: ['content-class', 'icon-class', 'text-class'],
- mixins: [link],
- props: {
- icon: String,
- iconColor: String,
- dot: Boolean,
- info: null,
- badge: null,
- text: String,
- useSlot: Boolean,
- },
- data: {
- viewStyle: '',
- },
- mounted() {
- this.updateStyle();
- },
- methods: {
- updateStyle() {
- if (!this.parent) {
- return;
- }
- const { data, children } = this.parent;
- const {
- columnNum,
- border,
- square,
- gutter,
- clickable,
- center,
- direction,
- iconSize,
- } = data;
- const width = `${100 / columnNum}%`;
- const styleWrapper = [];
- styleWrapper.push(`width: ${width}`);
- if (square) {
- styleWrapper.push(`padding-top: ${width}`);
- }
- if (gutter) {
- const gutterValue = addUnit(gutter);
- styleWrapper.push(`padding-right: ${gutterValue}`);
- const index = children.indexOf(this);
- if (index >= columnNum && !square) {
- styleWrapper.push(`margin-top: ${gutterValue}`);
- }
- }
- let contentStyle = '';
- if (square && gutter) {
- const gutterValue = addUnit(gutter);
- contentStyle = `
- right: ${gutterValue};
- bottom: ${gutterValue};
- height: auto;
- `;
- }
- this.setData({
- viewStyle: styleWrapper.join('; '),
- contentStyle,
- center,
- border,
- square,
- gutter,
- clickable,
- direction,
- iconSize,
- });
- },
- onClick() {
- this.$emit('click');
- this.jumpLink();
- },
- },
- });
|