一个上下布局的小模块的组件

组件的vue

<template name="upDownModule">     <view >         <view class="module" v-if="showNum==0">             <image :src="imgUrl" mode="" class="img-list"></image>             <text class="text-style">{{meRegis}}</text>         </view>         <view class="module" v-if="showNum==1">             <text class="text-list">{{numText}}</text>             <text class="text-style">{{meRegis}}</text>         </view>     </view>                          </template>

<script>     export default {         name:'upDownModule',         data() {             return {                              };         },         props:{             imgUrl:'',             meRegis:'',             showNum:0,             numText:''         },              } </script>

<style> .text-style{     font-size: 24rpx;         margin-top: 10rpx; } .img-list{     width: 70rpx;     height: 70rpx; } .module{     display: flex;     flex-direction: column;     width: 142rpx;     align-items: center;     height: 200rpx; } .text-list{     text-align: center;     width: 80rpx;     height: 80rpx;     line-height: 80rpx; } </style> 在需要的页面引用

<template>

<view>

     <upDownModule :showNum="showNum" :imgUrl="payImg"  :meRegis="payRegis">      </upDownModule>

</view>

</template>

import upDownModule from '../../components/upDownModule.vue'

components:{             upDownModule         },

data(){

return {

showNum:0,

payImg:'../../static/pic/fu.png',

payRegis:'待付款',

}

 

}

就是这一个一个的小块，用几个放几个。