12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 |
- <template>
- <view
- class="u-grid"
- ref='u-grid'
- :style="[gridStyle]"
- >
- <slot />
- </view>
- </template>
- <script>
- import props from './props.js';
-
- export default {
- name: 'u-grid',
- mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
- data() {
- return {
- index: 0,
- width: 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 uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
- }
- },
- methods: {
-
- childClick(name) {
- this.$emit('click', name)
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- @import "../../libs/css/components.scss";
- $u-grid-width:100% !default;
- .u-grid {
-
- width: $u-grid-width;
- position: relative;
- box-sizing: border-box;
- overflow: hidden;
- display: block;
-
- justify-content: center;
- @include flex;
- flex-wrap: wrap;
- align-items: center;
- }
- </style>
|