123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108 |
- <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,
- }
- },
- watch: {
-
- parentData() {
- if(this.children.length) {
- this.children.map(child => {
-
- typeof(child.updateParentData) == 'function' && child.updateParentData();
- })
- }
- },
- },
- created() {
-
- this.children = [];
- },
- computed: {
-
- parentData() {
- return [this.hoverClass, this.col, this.size, this.border];
- },
-
- 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;
-
-
-
- @include vue-flex;
- flex-wrap: wrap;
- align-items: center;
-
- }
- </style>
|