Vue3卡片（Card）

效果如下图在线预览APIsCard参数说明类型默认值width卡片宽度单位pxnumber | string‘auto’bordered是否有边框booleantruesize卡片的尺寸‘small’ | ‘middle’ | ‘large’‘middle’hoverable鼠标移过时可浮起booleanfalseloading当卡片内容还在加载中时可以用loading展示一个占位booleanfalseskeletonProps加载中时骨架屏的属性配置参考 Skeleton Propsobject{}title卡片标题string | slotundefinedextra卡片右上角的操作区域string | slotundefinedheadStyle自定义标题区域样式CSSProperties{}bodyStyle自定义内容区域样式CSSProperties{}Slots名称说明类型title自定义卡片标题v-slot:titleextra自定义右上角的操作区域v-slot:extra创建卡片组件Card.vue其中引入使用了以下组件和工具函数Vue3骨架屏Skeleton监听插槽存在 useSlotsExistscript setup langtsimport{computed}fromvueimporttype{CSSProperties}fromvueimportSkeletonfromcomponents/skeletonimport{useSlotsExist}fromcomponents/utilsexportinterfaceProps{width?:number|string// 卡片宽度单位 pxbordered?:boolean// 是否有边框size?:small|middle|large// 卡片的尺寸hoverable?:boolean// 鼠标移过时可浮起loading?:boolean// 当卡片内容还在加载中时可以用 loading 展示一个占位skeletonProps?:object// 加载中时骨架屏的属性配置参考 Skeleton Propstitle?:string// 卡片标题 string | slotextra?:string// 卡片右上角的操作区域 string | slotheadStyle?:CSSProperties// 自定义标题区域样式bodyStyle?:CSSProperties// 自定义内容区域样式}constpropswithDefaults(definePropsProps(),{width:auto,bordered:true,size:middle,hoverable:false,loading:false,skeletonProps:()({}),title:undefined,extra:undefined,headStyle:()({}),bodyStyle:()({})})constslotsExistuseSlotsExist([title,extra])constcardWidthcomputed((){if(typeofprops.widthnumber){return${props.width}px}returnprops.width})constshowHeadercomputed((){returnslotsExist.title||slotsExist.extra||props.title||props.extra})constshowTitlecomputed((){returnslotsExist.title||props.title})constshowExtracomputed((){returnslotsExist.extra||props.extra})/scripttemplatedivclasscard-wrap:class{card-bordered:bordered,card-small:sizesmall,card-middle:sizemiddle,card-large:sizelarge,card-hoverable:hoverable}:stylewidth: ${cardWidth};divclasscard-head:styleheadStylev-ifshowHeaderdivclasshead-wrapperdiv v-ifshowTitleclasshead-titleslot nametitle{{title}}/slot/divdiv v-ifshowExtraclasshead-extraslot nameextra{{extra}}/slot/div/div/divdivclasscard-body:stylebodyStyleSkeleton:titlefalse:loadingloadingv-bindskeletonPropsslot/slot/Skeleton/div/div/templatestyle langlessscoped.card-wrap{font-size:14px;color:rgba(0,0,0,0.88);line-height:1.5714285714285714;position:relative;background:#ffffff;border-radius:8px;text-align:left;transition:width0.2s;.card-head{display:flex;justify-content:center;flex-direction:column;margin-bottom:-1px;color:rgba(0,0,0,0.88);font-weight:600;background:transparent;border-bottom:1px solid #f0f0f0;border-radius:8px 8px00;transition:all0.2s;.head-wrapper{width:100%;display:flex;align-items:center;gap:8px;.head-title{display:inline-block;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.head-extra{margin-left:auto;font-weight:normal;font-size:14px;transition:font-size0.2s;}}}.card-body{border-radius:008px 8px;transition:padding0.2s;}}.card-bordered{border:1px solid #f0f0f0;}.card-small{.card-head{min-height:38px;padding:012px;font-size:14px;}.card-body{padding:12px;}}.card-middle{.card-head{min-height:56px;padding:024px;font-size:16px;}.card-body{padding:24px;}}.card-large{font-size:16px;.card-head{min-height:74px;padding:036px;font-size:18px;.head-wrapper.head-extra{font-size:16px;}}.card-body{padding:36px;}}.card-hoverable{cursor:pointer;transition:box-shadow0.2s,border-color0.2s;:hover{box-shadow:01px 2px-2pxrgba(0,0,0,0.16),03px 6px0rgba(0,0,0,0.12),05px 12px 4pxrgba(0,0,0,0.09);}}/style在要使用的页面引入其中引入使用了以下组件Vue3间距SpaceVue3单选框RadioVue3栅格Gridscript setup langtsimportCardfrom./Card.vueimport{ref}fromvueconstsizeOptions[{label:small,value:small},{label:middle,value:middle},{label:large,value:large}]constcardWidth{small:240,middle:300,large:360}constsizeref(middle)constloadingref(true)/scripttemplatedivh1{{$route.name}}{{$route.meta.title}}/h1h2classmt30 mb10基本使用/h2Card titleDefault size card:width300template #extraa href#more/a/templatepcard content/ppcard content/ppcard content/p/Cardh2classmt30 mb10在灰色背景上使用无边框的卡片/h2div styledisplay: inline-block; background: #ececec; padding: 30px; border-radius: 8pxCard titleCard title:borderedfalse:width300pCard content/ppCard content/ppCard content/p/Card/divh2classmt30 mb10简洁卡片/h2Card hoverable:width300pCard content/ppCard content/ppCard content/p/Cardh2classmt30 mb10三种尺寸/h2Space verticalRadio:optionssizeOptionsv-model:valuesizebutton button-stylesolid/Card:sizesize:title${size.toUpperCase()} size card:widthcardWidth[size as keyof typeof cardWidth]template #extraa href#more/a/templatepcard content/ppcard content/ppcard content/p/Card/Spaceh2classmt30 mb10鼠标移过时可浮起/h2Card hoverable titleCard title:width300pCard content/ppCard content/ppCard content/p/Cardh2classmt30 mb10预加载卡片/h2Space verticalSpace aligncenterLoading State:Switch v-modelloading//SpaceCard:loadingloadingtitleCard title:width300pCard content/ppCard content/ppCard content/p/Card/Spaceh2classmt30 mb10自定义样式/h2Card titleDefault size card:width300:headStyle{ fontSize: 18px, color: #fff, backgroundColor: #1677ff }:bodyStyle{ fontSize: 16px, color: #fff, backgroundColor: #52c41a }template #extraa href#more/a/templatepcard content/ppcard content/ppcard content/p/Cardh2classmt30 mb10内部嵌套卡片/h2Card titleCard title:width360p stylefont-size: 14px; color: rgba(0, 0, 0, 0.85); margin-bottom: 16px; font-weight: 500Group title/pCard titleInner card titletemplate #extraa href#More/a/templateInner Card content/CardCard titleInner card title:style{ marginTop: 16px }template #extraa href#More/a/templateInner Card content/Card/Cardh2classmt30 mb10栅格卡片/h2div stylebackground-color: #ececec; padding: 20px; border-radius: 8pxRow:gutter16Col:span8Card titleCard title:borderedfalsepcard content/p/Card/ColCol:span8Card titleCard title:borderedfalsepcard content/p/Card/ColCol:span8Card titleCard title:borderedfalsepcard content/p/Card/Col/Row/div/div/template