Card 卡片

概述

基础容器,用来显示文字、列表、图文等内容,也可以配合其它组件一起使用。

代码示例

Card 卡片 - 图1

基本用法

自定义标题、额外操作和主体内容,可以完全自由控制各个部分,也可以结合其它组件一起使用,较为灵活。

2.12.0 版本开始,可以通过设置属性 titleicon 快速设置标题栏。
  1. <template>
  2. <Card style="width:350px">
  3. <p slot="title">
  4. <Icon type="ios-film-outline"></Icon>
  5. Classic film
  6. </p>
  7. <a href="#" slot="extra" @click.prevent="changeLimit">
  8. <Icon type="ios-loop-strong"></Icon>
  9. Change
  10. </a>
  11. <ul>
  12. <li v-for="item in randomMovieList">
  13. <a :href="item.url" target="_blank">{{ item.name }}</a>
  14. <span>
  15. <Icon type="ios-star" v-for="n in 4" :key="n"></Icon><Icon type="ios-star" v-if="item.rate >= 9.5"></Icon><Icon type="ios-star-half" v-else></Icon>
  16. {{ item.rate }}
  17. </span>
  18. </li>
  19. </ul>
  20. </Card>
  21. </template>
  22. <script>
  23. export default {
  24. data () {
  25. return {
  26. movieList: [
  27. {
  28. name: 'The Shawshank Redemption',
  29. url: 'https://movie.douban.com/subject/1292052/',
  30. rate: 9.6
  31. },
  32. {
  33. name: 'Leon:The Professional',
  34. url: 'https://movie.douban.com/subject/1295644/',
  35. rate: 9.4
  36. },
  37. {
  38. name: 'Farewell to My Concubine',
  39. url: 'https://movie.douban.com/subject/1291546/',
  40. rate: 9.5
  41. },
  42. {
  43. name: 'Forrest Gump',
  44. url: 'https://movie.douban.com/subject/1292720/',
  45. rate: 9.4
  46. },
  47. {
  48. name: 'Life Is Beautiful',
  49. url: 'https://movie.douban.com/subject/1292063/',
  50. rate: 9.5
  51. },
  52. {
  53. name: 'Spirited Away',
  54. url: 'https://movie.douban.com/subject/1291561/',
  55. rate: 9.2
  56. },
  57. {
  58. name: 'Schindler's List',
  59. url: 'https://movie.douban.com/subject/1295124/',
  60. rate: 9.4
  61. },
  62. {
  63. name: 'The Legend of 1900',
  64. url: 'https://movie.douban.com/subject/1292001/',
  65. rate: 9.2
  66. },
  67. {
  68. name: 'WALL·E',
  69. url: 'https://movie.douban.com/subject/2131459/',
  70. rate: 9.3
  71. },
  72. {
  73. name: 'Inception',
  74. url: 'https://movie.douban.com/subject/3541415/',
  75. rate: 9.2
  76. }
  77. ],
  78. randomMovieList: []
  79. }
  80. },
  81. methods: {
  82. changeLimit () {
  83. function getArrayItems(arr, num) {
  84. const temp_array = [];
  85. for (let index in arr) {
  86. temp_array.push(arr[index]);
  87. }
  88. const return_array = [];
  89. for (let i = 0; i<num; i++) {
  90. if (temp_array.length>0) {
  91. const arrIndex = Math.floor(Math.random()*temp_array.length);
  92. return_array[i] = temp_array[arrIndex];
  93. temp_array.splice(arrIndex, 1);
  94. } else {
  95. break;
  96. }
  97. }
  98. return return_array;
  99. }
  100. this.randomMovieList = getArrayItems(this.movieList, 5);
  101. }
  102. },
  103. mounted () {
  104. this.changeLimit();
  105. }
  106. }
  107. </script>

Card 卡片 - 图2

无边框

通过设置属性bordered为 false ,可以不添加边框,建议在灰色背景下使用。

  1. <template>
  2. <div style="background:#eee;padding: 20px">
  3. <Card :bordered="false">
  4. <p slot="title">No border title</p>
  5. <p>Content of no border type. Content of no border type. Content of no border type. Content of no border type. </p>
  6. </Card>
  7. </div>
  8. </template>
  9. <script>
  10. export default {
  11. }
  12. </script>

Card 卡片 - 图3

禁用悬停阴影

通过设置属性dis-hover来禁用鼠标悬停显示阴影的效果。

  1. <template>
  2. <Row>
  3. <Col span="11">
  4. <Card>
  5. <p slot="title">The standard card</p>
  6. <p>Content of card</p>
  7. <p>Content of card</p>
  8. <p>Content of card</p>
  9. </Card>
  10. </Col>
  11. <Col span="11" offset="2">
  12. <Card dis-hover>
  13. <p slot="title">Disable card with hover shadows</p>
  14. <p>Content of card</p>
  15. <p>Content of card</p>
  16. <p>Content of card</p>
  17. </Card>
  18. </Col>
  19. </Row>
  20. </template>
  21. <script>
  22. export default {
  23. }
  24. </script>

Card 卡片 - 图4

卡片阴影

通过设置属性shadow来显示卡片阴影,使用该属性后,bordereddis-hover将无效,建议在灰色背景下使用。

  1. <template>
  2. <Row style="background:#eee;padding:20px">
  3. <Col span="11">
  4. <Card :bordered="false">
  5. <p slot="title">Borderless card</p>
  6. <p>Content of card</p>
  7. <p>Content of card</p>
  8. <p>Content of card</p>
  9. </Card>
  10. </Col>
  11. <Col span="11" offset="2">
  12. <Card shadow>
  13. <p slot="title">Use a card with a shadow effect</p>
  14. <p>Content of card</p>
  15. <p>Content of card</p>
  16. <p>Content of card</p>
  17. </Card>
  18. </Col>
  19. </Row>
  20. </template>
  21. <script>
  22. export default {
  23. }
  24. </script>

Card 卡片 - 图5

简洁卡片

只包含内容区域,没有标题。

  1. <template>
  2. <Card style="width:320px">
  3. <div style="text-align:center">
  4. <img src="../../images/logo.png">
  5. <h3>A high quality UI Toolkit based on Vue.js</h3>
  6. </div>
  7. </Card>
  8. </template>
  9. <script>
  10. export default {
  11. }
  12. </script>

API

Card props

属性说明类型默认值
bordered是否显示边框,建议在灰色背景下使用Booleantrue
dis-hover禁用鼠标悬停显示阴影Booleanfalse
shadow卡片阴影,建议在灰色背景下使用Booleanfalse
padding卡片内部间距,单位 pxNumber16
title标题,2.12.0 新增String-
icon标题前的图标,2.12.0 新增String-

Card slot

名称说明
title自定义卡片标题,如果是简单文字,可以使用<p>标签包裹
extra额外显示的内容,默认位置在右上角
卡片主体内容