60 lines
		
	
	
		
			951 B
		
	
	
	
		
			Vue
		
	
	
	
		
		
			
		
	
	
			60 lines
		
	
	
		
			951 B
		
	
	
	
		
			Vue
		
	
	
	
| 
								 | 
							
								<!--
							 | 
						||
| 
								 | 
							
								* @Description: Description
							 | 
						||
| 
								 | 
							
								* @ComponentName: FlexCol
							 | 
						||
| 
								 | 
							
								* @Author: wangzhigang11
							 | 
						||
| 
								 | 
							
								* @Date: 2023-05-10 13:42
							 | 
						||
| 
								 | 
							
								-->
							 | 
						||
| 
								 | 
							
								<template>
							 | 
						||
| 
								 | 
							
								  <div class="FlexCenter" :style="{height: cHeight}">
							 | 
						||
| 
								 | 
							
								    <slot></slot>
							 | 
						||
| 
								 | 
							
								  </div>
							 | 
						||
| 
								 | 
							
								</template>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								<script>
							 | 
						||
| 
								 | 
							
								import {getSize} from "@/utils/tools";
							 | 
						||
| 
								 | 
							
								  export default {
							 | 
						||
| 
								 | 
							
								    name: 'FlexCenter',
							 | 
						||
| 
								 | 
							
								    components: {},
							 | 
						||
| 
								 | 
							
								    mixins: [],
							 | 
						||
| 
								 | 
							
								    inject: [],
							 | 
						||
| 
								 | 
							
								    provide() {
							 | 
						||
| 
								 | 
							
								      return {
							 | 
						||
| 
								 | 
							
								        FlexCol: this
							 | 
						||
| 
								 | 
							
								      }
							 | 
						||
| 
								 | 
							
								    },
							 | 
						||
| 
								 | 
							
								    props: {
							 | 
						||
| 
								 | 
							
								      height: {
							 | 
						||
| 
								 | 
							
								        type: String,
							 | 
						||
| 
								 | 
							
								        default: ''
							 | 
						||
| 
								 | 
							
								      }
							 | 
						||
| 
								 | 
							
								    },
							 | 
						||
| 
								 | 
							
								    data() {
							 | 
						||
| 
								 | 
							
								      return {}
							 | 
						||
| 
								 | 
							
								    },
							 | 
						||
| 
								 | 
							
								    computed: {
							 | 
						||
| 
								 | 
							
								      cHeight () {
							 | 
						||
| 
								 | 
							
								        return getSize(this.height)
							 | 
						||
| 
								 | 
							
								      }
							 | 
						||
| 
								 | 
							
								    },
							 | 
						||
| 
								 | 
							
								    watch: {},
							 | 
						||
| 
								 | 
							
								    created() {
							 | 
						||
| 
								 | 
							
								    },
							 | 
						||
| 
								 | 
							
								    beforeDestroy() {
							 | 
						||
| 
								 | 
							
								    },
							 | 
						||
| 
								 | 
							
								    mounted() {
							 | 
						||
| 
								 | 
							
								    },
							 | 
						||
| 
								 | 
							
								    methods: {},
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								</script>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								<style scoped lang="less">
							 | 
						||
| 
								 | 
							
								@import "assets/styles/mixin";
							 | 
						||
| 
								 | 
							
								  .FlexCenter {
							 | 
						||
| 
								 | 
							
								    width: 100%;
							 | 
						||
| 
								 | 
							
								    height: 100%;
							 | 
						||
| 
								 | 
							
								    .flex-row;
							 | 
						||
| 
								 | 
							
								    justify-content: center;
							 | 
						||
| 
								 | 
							
								    align-items: center;
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								</style>
							 |