1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495 |
- <template>
- <view class="u-grid" :class="{'u-border-top u-border-left': border}" :style="[gridStyle]"><slot /></view>
- </template>
- <script>
- export default {
- name: 'u-grid',
- props: {
-
- col: {
- type: [Number, String],
- default: 3
- },
-
- border: {
- type: Boolean,
- default: true
- },
-
- align: {
- type: String,
- default: 'left'
- },
-
- hoverClass: {
- type: String,
- default: 'u-hover-class'
- }
- },
- data() {
- return {
- index: 0,
- }
- },
- provide() {
- return {
- uGrid: this
- }
- },
- computed: {
-
- gridStyle() {
- let style = {};
- switch(this.align) {
- case 'left':
- style.justifyContent = 'flex-start';
- break;
- case 'center':
- style.justifyContent = 'center';
- break;
- case 'right':
- style.justifyContent = 'flex-end';
- break;
- default: style.justifyContent = 'flex-start';
- };
- return style;
- }
- },
- methods: {
- click(index) {
- this.$emit('click', index);
- }
- }
-
- };
- </script>
- <style scoped lang="scss">
- @import "../../libs/css/style.components.scss";
- .u-grid {
- width: 100%;
-
- position: relative;
- box-sizing: border-box;
- overflow: hidden;
-
-
-
- display: flex;
- flex-wrap: wrap;
- align-items: center;
-
- }
- </style>
|