Medical UI Docs

# Card卡片

# 标准卡片

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

使用 med-s-card 标签来定义基本的卡片




 


<template>
  <div>
      <med-s-card title="以我为准">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</med-s-card>
  </div>
</template>
显示代码

# 简洁卡片

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

使用 med-s-card 标签来定义基本的卡片




 


<template>
  <div>
      <med-s-card>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</med-s-card>
  </div>
</template>
显示代码

# 带tab栏的卡片

tab1

使用 med-s-card 标签来定义基本的卡片




 

























<template>
  <div>
      <med-s-card  :activeTabKey="activeTabKey" :tabList='tabList' @tabChange="handleChange">
        <div v-if="current==='tab1'">tab1</div>
        <div v-if="current==='tab2'">tab2</div>
        <div v-if="current==='tab3'">tab3</div>
      </med-s-card>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        tabList:[{"key":"tab1","tab":"tab1"},{"key":"tab2","tab":"tab2"},{"key":"tab3","tab":"tab3"}],
        activeTabKey: 'tab1',
        current:'tab1'
      }
    },
    methods:{
      handleChange(val) {
        this.current = val
      }
    }
  }
</script>
<style>

</style>
显示代码

# 不要边框

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

使用 med-s-card 标签来定义基本的卡片




 


<template>
  <div>
      <med-s-card title="以我为准" :bordered="false" >哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</med-s-card>
  </div>
</template>
显示代码

# 加载loading

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

使用 med-s-card 标签来定义基本的卡片




 


<template>
  <div>
      <med-s-card title="以我为准" loading>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</med-s-card>
  </div>
</template>
显示代码

# 插槽

我是内容

使用 med-s-card 标签来定义基本的卡片




 








<template>
  <div>
      <med-s-card title="以我为准">
        我是内容
        <template #extra>看我</template>
        <template #actions>
          <med-button>我是在底部的插槽</med-button>
        </template>
      </med-s-card>
  </div>
</template>
显示代码

# 参数列表

参数 方式 示例 解释
tabStyle Prop tabStyle="true" 设置tablist页签样式
activeTabKey Prop activeTabKey="tab1" 设置tablist激活的页签
size Prop size="small " 设置卡片大小，可选值为 small default 或者不设
width Prop width="300px" 卡片宽度，例如 300px
hoverable Prop hoverable="true" 鼠标移过时可浮起
actions Slots <template #actions>actions</template> 插槽卡片操作组，位置在卡片底部
extra Slots <template #extra>extra</template> 插槽，位置在卡片右上角
tabChange Actions @tabChange="tabChange" tab改变时触发的事件

Pin卡贴