✨(component): 新增 card 组件 footer 插槽
This commit is contained in:
		
							parent
							
								
									3f608a5935
								
							
						
					
					
						commit
						0bb87c9c2e
					
				@ -16,6 +16,14 @@
 | 
				
			|||||||
  font-size: 14px;
 | 
					  font-size: 14px;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.layui-card .layui-card-footer {
 | 
				
			||||||
 | 
					  height: 42px;
 | 
				
			||||||
 | 
					  line-height: 42px;
 | 
				
			||||||
 | 
					  padding: 0 15px;
 | 
				
			||||||
 | 
					  border-top: 1px solid #f6f6f6;
 | 
				
			||||||
 | 
					  font-size: 14px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.layui-card .layui-card-header .layui-card-header-extra {
 | 
					.layui-card .layui-card-header .layui-card-header-extra {
 | 
				
			||||||
  float: right;
 | 
					  float: right;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
				
			|||||||
@ -44,5 +44,8 @@ const classes = computed(() => {
 | 
				
			|||||||
      <slot name="body" v-if="slot.body"></slot>
 | 
					      <slot name="body" v-if="slot.body"></slot>
 | 
				
			||||||
      <slot v-else></slot>
 | 
					      <slot v-else></slot>
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
 | 
					    <div class="layui-card-footer" v-if="slot.footer">
 | 
				
			||||||
 | 
					      <slot name="footer"></slot>
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
  </div>
 | 
					  </div>
 | 
				
			||||||
</template>
 | 
					</template>
 | 
				
			||||||
@ -1,18 +1,30 @@
 | 
				
			|||||||
<template>
 | 
					<template>
 | 
				
			||||||
  <div class="layui-scroll" :class="{ hide: data.winWidth < 500 }" :style="{ height: height }">
 | 
					  <div
 | 
				
			||||||
 | 
					    class="layui-scroll"
 | 
				
			||||||
 | 
					    :class="{ hide: data.winWidth < 500 }"
 | 
				
			||||||
 | 
					    :style="{ height: height }"
 | 
				
			||||||
 | 
					  >
 | 
				
			||||||
    <div class="layui-scroll-y">
 | 
					    <div class="layui-scroll-y">
 | 
				
			||||||
      <div ref="scrollRef" class="layui-scroll-wrap" @scroll="onMosewheel">
 | 
					      <div ref="scrollRef" class="layui-scroll-wrap" @scroll="onMosewheel">
 | 
				
			||||||
        <slot></slot>
 | 
					        <slot></slot>
 | 
				
			||||||
      </div>
 | 
					      </div>
 | 
				
			||||||
      <div ref="barRef" class="layui-scroll-track" :style="{
 | 
					      <div
 | 
				
			||||||
 | 
					        ref="barRef"
 | 
				
			||||||
 | 
					        class="layui-scroll-track"
 | 
				
			||||||
 | 
					        :style="{
 | 
				
			||||||
          backgroundColor: data.heightPre == 1 ? 'rgba(0,0,0,0)' : trackColor,
 | 
					          backgroundColor: data.heightPre == 1 ? 'rgba(0,0,0,0)' : trackColor,
 | 
				
			||||||
      }">
 | 
					        }"
 | 
				
			||||||
        <div :style="{
 | 
					      >
 | 
				
			||||||
 | 
					        <div
 | 
				
			||||||
 | 
					          :style="{
 | 
				
			||||||
            height: data.barHeight + 'px',
 | 
					            height: data.barHeight + 'px',
 | 
				
			||||||
            width: thumbWidth + 'px',
 | 
					            width: thumbWidth + 'px',
 | 
				
			||||||
            transform: 'translateY(' + data.translateY + 'px)',
 | 
					            transform: 'translateY(' + data.translateY + 'px)',
 | 
				
			||||||
            backgroundColor: data.heightPre == 1 ? 'rgba(0,0,0,0)' : thumbColor,
 | 
					            backgroundColor: data.heightPre == 1 ? 'rgba(0,0,0,0)' : thumbColor,
 | 
				
			||||||
        }" class="layui-scroll-thumb" @mousedown.stop.prevent="moveStart"></div>
 | 
					          }"
 | 
				
			||||||
 | 
					          class="layui-scroll-thumb"
 | 
				
			||||||
 | 
					          @mousedown.stop.prevent="moveStart"
 | 
				
			||||||
 | 
					        ></div>
 | 
				
			||||||
      </div>
 | 
					      </div>
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
  </div>
 | 
					  </div>
 | 
				
			||||||
 | 
				
			|||||||
@ -55,6 +55,9 @@ export default {
 | 
				
			|||||||
      <template v-slot:body>
 | 
					      <template v-slot:body>
 | 
				
			||||||
      内容
 | 
					      内容
 | 
				
			||||||
      </template>
 | 
					      </template>
 | 
				
			||||||
 | 
					      <template v-slot:footer>
 | 
				
			||||||
 | 
					      底部
 | 
				
			||||||
 | 
					      </template>
 | 
				
			||||||
  </lay-card>
 | 
					  </lay-card>
 | 
				
			||||||
</div>
 | 
					</div>
 | 
				
			||||||
</template>
 | 
					</template>
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user