优秀平面设计网站,wap网站源码下载,google永久免费的服务器,c 开发商城网站开发效果如下图#xff1a;在线预览 APIs
List
参数说明类型默认值bordered是否展示边框booleanfalsevertical是否使用竖直样式booleanfalsesplit是否展示分割线booleantruesize列表尺寸‘small’ | ‘middle’ | ‘large’‘middle’loading是否加载中booleanfalsehoverable是否…效果如下图在线预览 APIs
List
参数说明类型默认值bordered是否展示边框booleanfalsevertical是否使用竖直样式booleanfalsesplit是否展示分割线booleantruesize列表尺寸‘small’ | ‘middle’ | ‘large’‘middle’loading是否加载中booleanfalsehoverable是否显示悬浮样式booleanfalseheader列表头部string | slotundefinedfooter列表底部string | slotundefinedspinPropsSpin 组件属性配置参考 Spin Props用于配置列表加载中样式object{}emptyPropsEmpty 组件属性配置参考 Empty Props用于配置暂无数据样式object{}showPagination是否显示分页booleanfalsepaginationPagination 组件属性配置参考 Pagination Props用于配置分页功能object{}
ListItem
参数说明类型默认值avatar列表元素的图标字符string | slotundefinedavatarPropsAvatar 组件属性配置参考 Avatar Props用于配置列表图标样式object{}title列表元素的标题string | slotundefineddescription列表元素的描述内容string | slotundefinedactions列表操作组slotundefinedextra额外内容展示在列表右侧string | slotundefinedavatarStyle设置图标的样式CSSProperties{}titleStyle设置标题的样式CSSProperties{}descriptionStyle设置描述内容的样式CSSProperties{}contentStyle设置内容的样式CSSProperties{}actionsStyle设置操作区域的样式CSSProperties{}extraStyle设置额外内容的样式CSSProperties{}
创建 List.vue 组件
其中引入使用了以下组件
[Vue3加载中Spin]((https://blog.csdn.net/Dandrose/article/details/129989730)Vue3空状态EmptyVue3分页Pagination
script setup langts
import { computed, useSlots } from vue
import Spin from ../spin
import Empty from ../empty
import Pagination from ../pagination
interface Props {bordered?: boolean // 是否展示边框vertical?: boolean // 是否使用竖直样式split?: boolean // 是否展示分割线size?: small | middle | large // 列表尺寸loading?: boolean // 是否加载中hoverable?: boolean // 是否显示悬浮样式header?: string // 列表头部 string | slotfooter?: string // 列表底部 string | slotspinProps?: object // Spin 组件属性配置参考 Spin Props用于配置列表加载中样式emptyProps?: object // Empty 组件属性配置参考 Empty Props用于配置暂无数据样式showPagination?: boolean // 是否显示分页pagination?: object // Pagination 组件属性配置参考 Pagination Props用于配置分页功能
}
const props withDefaults(definePropsProps(), {bordered: false,vertical: false,split: true,size: middle,loading: false,hoverable: false,header: undefined,footer: undefined,spinProps: () ({}),emptyProps: () ({}),showPagination: false,pagination: () ({})
})
const slots useSlots()
const showHeader computed(() {const headerSlots slots.header?.()return Boolean(headerSlots headerSlots?.length) || props.header
})
const showDefault computed(() {const defaultSlots slots.default?.()return Boolean(defaultSlots defaultSlots?.length defaultSlots[0].children?.length)
})
const showFooter computed(() {const footerSlots slots.footer?.()return Boolean(footerSlots footerSlots?.length) || props.footer
})
/script
templateSpin :spinningloading sizesmall v-bindspinPropsdivclassm-list:class{list-bordered: bordered,list-vertical: vertical,list-split: split,list-small: size small,list-large: size large,list-hoverable: hoverable}div classm-list-header v-ifshowHeaderslot nameheader{{ header }}/slot/divslot v-ifshowDefault/slotdiv classm-list-empty v-elseEmpty imageoutlined v-bindemptyProps //divdiv classm-list-footer v-ifshowFooterslot namefooter{{ footer }}/slot/divdiv classm-list-pagination v-ifshowPaginationPagination placementright v-bindpagination //div/div/Spin
/template
style langless scoped
.m-list {margin: 0;position: relative;color: rgba(0, 0, 0, 0.88);font-size: 14px;line-height: 1.5714285714285714;.m-list-header,.m-list-footer {background: transparent;padding: 12px 0;transition: all 0.3s;}.m-list-empty {padding: 16px;}.m-list-pagination {margin-top: 24px;}
}
.list-bordered {border: 1px solid #d9d9d9;border-radius: 8px;.m-list-header,:deep(.m-list-item),.m-list-footer {padding-inline: 24px;}.m-list-pagination {margin: 16px 24px;}
}
.list-vertical {:deep(.m-list-item) {align-items: initial;.m-list-item-main {display: block;.m-list-item-meta {margin-bottom: 16px;.m-list-item-content {.list-item-title {margin-bottom: 12px;color: rgba(0, 0, 0, 0.88);font-size: 16px;font-weight: 700;line-height: 1.5;}}}.list-item-actions {margin-top: 16px;margin-left: auto; * {padding: 0 16px;:first-child {padding-left: 0;}}}}}
}
.list-split {.m-list-header {border-bottom: 1px solid rgba(5, 5, 5, 0.06);}:deep(.m-list-item) {:not(:last-child) {border-bottom: 1px solid rgba(5, 5, 5, 0.06);}}
}
.list-small {:deep(.m-list-item) {padding: 8px 16px;}
}
.list-bordered.list-small {.m-list-header,:deep(.m-list-item),.m-list-footer {padding: 8px 16px;}
}
.list-large {:deep(.m-list-item) {padding: 16px 24px;}
}
.list-bordered.list-large {.m-list-header,:deep(.m-list-item),.m-list-footer {padding: 16px 24px;}
}
.list-hoverable {:deep(.m-list-item) {:hover {background-color: rgba(0, 0, 0, 0.02);}}
}
/style创建 ListItem.vue 组件
其中引入使用了以下组件
Vue3头像Avatar
script setup langts
import { computed, useSlots } from vue
import type { CSSProperties, Slot } from vue
import Avatar from ../avatar
interface Props {avatar?: string // 列表元素的图标字符 string | slotavatarProps?: object // Avatar 组件属性配置参考 Avatar Props用于配置列表图标样式title?: string // 列表元素的标题 string | slotdescription?: string // 列表元素的描述内容 string | slotactions?: Slot // 列表操作组 slotextra?: string // 额外内容额外内容展示在列表右侧 string | slotavatarStyle?: CSSProperties // 设置图标的样式titleStyle?: CSSProperties // 设置标题的样式descriptionStyle?: CSSProperties // 设置描述内容的样式contentStyle?: CSSProperties // 设置内容的样式actionsStyle?: CSSProperties // 设置操作区域的样式extraStyle?: CSSProperties // 设置额外内容的样式
}
const props withDefaults(definePropsProps(), {avatar: undefined,avatarProps: () ({}),title: undefined,description: undefined,actions: undefined,extra: undefined,avatarStyle: () ({}),titleStyle: () ({}),descriptionStyle: () ({}),contentStyle: () ({}),actionsStyle: () ({}),extraStyle: () ({})
})
const slots useSlots()
const showAvatar computed(() {const avatarSlots slots.avatar?.()return Boolean(avatarSlots avatarSlots?.length) || props.avatar || JSON.stringify(props.avatarProps) ! {}
})
const showContent computed(() {const titleSlots slots.title?.()const descriptionSlots slots.description?.()let n 0if (titleSlots titleSlots?.length) {n}if (descriptionSlots descriptionSlots?.length) {n}return Boolean(n) || props.title || props.description
})
const showDefault computed(() {const defaultSlots slots.default?.()return Boolean(defaultSlots defaultSlots?.length)
})
const showActions computed(() {const actionsSlots slots.actions?.()return Boolean(actionsSlots actionsSlots?.length)
})
const showExtra computed(() {const extraSlots slots.extra?.()return Boolean(extraSlots extraSlots?.length) || props.extra
})
/script
templatediv classm-list-itemdiv classm-list-item-maindiv classm-list-item-meta v-ifshowAvatar || showContentdiv classm-list-item-avatar v-ifshowAvatar :styleavatarStyleslot nameavatarAvatar v-bindavatarProps{{ avatar }}/Avatar/slot/divdiv classm-list-item-content v-ifshowContentp classlist-item-title :styletitleStyleslot nametitle{{ title }}/slot/pdiv classlist-item-description :styledescriptionStyleslot namedescription{{ description }}/slot/div/div/divdiv v-ifshowDefault :stylecontentStyleslot/slot/divdiv classlist-item-actions v-ifshowActions :styleactionsStyleslot nameactions/slot/div/divdiv classlist-item-extra v-ifshowExtra :styleextraStyleslot nameextra{{ extra }}/slot/div/div
/template
style langless scoped
.m-list-item {display: flex;justify-content: space-between;align-items: center;padding: 12px 24px;color: rgba(0, 0, 0, 0.88);max-width: 100%;transition: all 0.3s;.m-list-item-main {display: flex;align-items: center;flex: 1;.m-list-item-meta {display: flex;flex: 1;align-items: flex-start;max-width: 100%;.m-list-item-avatar {margin-right: 16px;}.m-list-item-content {flex: 1 0;width: 0;color: rgba(0, 0, 0, 0.88);.list-item-title {margin-bottom: 4px;color: rgba(0, 0, 0, 0.88);font-size: 14px;font-weight: 700;line-height: 1.5714285714285714;:deep(a) {font-weight: 700;color: rgba(0, 0, 0, 0.88);transition: all 0.3s;:hover {color: themeColor;}}}.list-item-description {color: rgba(0, 0, 0, 0.45);font-size: 14px;line-height: 1.5714285714285714;}}}.list-item-actions {flex: 0 0 auto;margin-left: 48px;font-size: 0; * {// 选择所有直接子元素不包括深层的后代position: relative;display: inline-flex;align-items: center;padding: 0 8px;color: rgba(0, 0, 0, 0.45);font-size: 14px;line-height: 1.5714285714285714;text-align: center;:first-child {padding-left: 0;}:not(:last-child) {::after {position: absolute;top: 50%;right: 0;width: 1px;height: 14px;transform: translateY(-50%);background-color: rgba(5, 5, 5, 0.06);content: ;}}} :deep(a) {// 选择所有直接子元素且是 a 标签color: themeColor;transition: color 0.3s;:hover {color: #4096ff;}}}}.list-item-extra {margin-left: 24px;}
}
/style其中引入使用了以下组件
Vue3头像AvatarVue3开关SwitchVue3单选框RadioVue3弹性布局FlexVue3栅格GridVue3间距SpaceVue3输入框Input
在要使用的页面引入
script setup langts
import List from ./List.vue
import ListItem from ./ListItem.vue
import { ref, reactive } from vue
const listData ref([{title: Vue Amazing UI Title 1,description: Vue Amazing UI, An Amazing Vue3 UI Components Library.,content: content},{title: Vue Amazing UI Title 2,description: Vue Amazing UI, An Amazing Vue3 UI Components Library.,content: content},{title: Vue Amazing UI Title 3,description: Vue Amazing UI, An Amazing Vue3 UI Components Library.,content: content},{title: Vue Amazing UI Title 4,description: Vue Amazing UI, An Amazing Vue3 UI Components Library.,content: content}
])
const bordered ref(true)
const simpleListData ref([{title: Vue Amazing UI Title 1,description: An Amazing Vue3 UI Components Library.,content: content},{title: Vue Amazing UI Title 2,description: An Amazing Vue3 UI Components Library.,content: content},{title: Vue Amazing UI Title 3,description: An Amazing Vue3 UI Components Library.,content: content},{title: Vue Amazing UI Title 4,description: An Amazing Vue3 UI Components Library.,content: content}
])
const simpleList ref([Vue Amazing UI is developed using TypeScript,An Amazing Vue3 UI Components Library,Streamline web development with Vue Amazing UI,Incredible Vue components for modern web design,Transform your Vue interface with Vue Amazing UI
])
const sizeOptions [{label: small,value: small},{label: middle,value: middle},{label: large,value: large}
]
const size ref(middle)
const loading ref(true)
const allListData refany[]([])
for (let i 1; i 8; i) {allListData.value.push({href: https://themusecatcher.github.io/vue-amazing-ui/,title: Vue Amazing UI part ${i},avatar: https://cdn.jsdelivr.net/gh/themusecatcher/resources0.0.5/1.jpg,description: Vue Amazing UI, An Amazing Vue3 UI Components Library.,content:Vue Amazing UI supplies streamline web development, incredible Vue components for modern web design and transform your Vue interface completely.})
}
const paginationListData refany[]([])
paginationListData.value allListData.value.slice(0, 3)
const pagination {page: 1,pageSize: 3,total: 8,onChange: (page: number, pageSize: number) {console.log(change page, page)console.log(change pageSize, pageSize)const start (page - 1) * pageSize 1const end page * pageSize 8 ? 8 : page * pageSizepaginationListData.value allListData.value.slice(start - 1, end)}
}
const allConfigListData refang[]([])
for (let i 1; i 30; i) {allConfigListData.value.push({href: https://themusecatcher.github.io/vue-amazing-ui/,title: Vue Amazing UI Title ${i},description: Vue Amazing UI, An Amazing Vue3 UI Components Library.,content: Incredible Vue components for modern web design})
}
const configListData refany[]([])
configListData.value allConfigListData.value.slice(0, 5)
const state reactive({bordered: true,vertical: false,split: true,size: middle,loading: false,hoverable: true,header: list header,footer: list footer,extra: extra,showPagination: true,pagination: {page: 1,pageSize: 5,total: 30,showTotal: (total: number, range: number[]) ${range[0]}-${range[1]} of ${total} items,showSizeChanger: true,showQuickJumper: true,onChange: (page: number, pageSize: number) {console.log(change page, page)console.log(change pageSize, pageSize)const start (page - 1) * pageSize 1const end page * pageSize state.pagination.total ? state.pagination.total : page * pageSizeconfigListData.value allConfigListData.value.slice(start - 1, end)}}
})
/script
templatedivh1{{ $route.name }} {{ $route.meta.title }}/h1h2 classmt30 mb10基本使用/h2ListListItem v-for(data, index) in listData :keyindex :titledata.titletemplate #avatarAvatar srchttps://cdn.jsdelivr.net/gh/themusecatcher/resources0.0.5/1.jpg //templatetemplate #description{{ data.description }}/template/ListItem/Listh2 classmt30 mb10隐藏分割线/h2List :splitfalseListItem v-for(data, index) in listData :keyindex :titledata.titletemplate #avatarAvatar srchttps://cdn.jsdelivr.net/gh/themusecatcher/resources0.0.5/1.jpg //templatetemplate #description{{ data.description }}/template/ListItem/Listh2 classmt30 mb10带边框列表/h2Flex verticalSpace aligncenter bordered:Switch v-modelbordered / /SpaceList :borderedborderedtemplate #headerdivHeader/div/templateListItem v-for(data, index) in listData :keyindex :titledata.titletemplate #avatarAvatar srchttps://cdn.jsdelivr.net/gh/themusecatcher/resources0.0.5/1.jpg //templatetemplate #description{{ data.description }}/template/ListItemtemplate #footerdivFooter/div/template/List/Flexh2 classmt30 mb10三种尺寸/h2Flex verticalRadio :optionssizeOptions v-model:valuesize button button-stylesolid /Row :gutter32Col :span12List bordered :sizesizeListItem v-for(data, index) in simpleListData :keyindextemplate #avatarAvatar srchttps://cdn.jsdelivr.net/gh/themusecatcher/resources0.0.5/1.jpg //templatetemplate #titlea hrefhttps://themusecatcher.github.io/vue-amazing-ui/{{ data.title }}/a/templatetemplate #description{{ data.description }}/template/ListItem/List/ColCol :span12List bordered :sizesizetemplate #headerdivHeader/div/templateListItem v-for(data, index) in simpleList :keyindex{{ data }}/ListItemtemplate #footerdivFooter/div/template/List/Col/Row/Flexh2 classmt30 mb10加载中/h2Flex verticalSpace aligncenter Loading state:Switch v-modelloading / /SpaceRow :gutter32Col :span12List bordered :loadingloadingListItem v-for(data, index) in simpleListData :keyindex :titledata.titletemplate #avatarAvatar srchttps://cdn.jsdelivr.net/gh/themusecatcher/resources0.0.5/1.jpg //templatetemplate #description{{ data.description }}/template/ListItem/List/ColCol :span12List bordered :loadingloading :spin-props{ indicator: dynamic-circle }template #headerdivHeader/div/templateListItem v-for(data, index) in simpleList :keyindex{{ data }}/ListItemtemplate #footerdivFooter/div/template/List/Col/Row/Flexh2 classmt30 mb10暂无数据/h2ListListItem v-for(data, index) in [] :keyindex/ListItem/Listh2 classmt30 mb10显示悬浮样式/h2Row :gutter32Col :span12List bordered hoverableListItem v-for(data, index) in simpleListData :keyindex :titledata.titletemplate #avatarAvatar srchttps://cdn.jsdelivr.net/gh/themusecatcher/resources0.0.5/1.jpg //templatetemplate #description{{ data.description }}/template/ListItem/List/ColCol :span12List bordered hoverabletemplate #headerdivHeader/div/templateListItem v-for(data, index) in simpleList :keyindex{{ data }}/ListItemtemplate #footerdivFooter/div/template/List/Col/Rowh2 classmt30 mb10列表添加操作项/h2ListListItem v-for(data, index) in listData :keyindex :titledata.titletemplate #avatarAvatar srchttps://cdn.jsdelivr.net/gh/themusecatcher/resources0.0.5/1.jpg //templatetemplate #description{{ data.description }}/template{{ data.content }}template #actionsaedit/aamore/a/template/ListItem/Listh2 classmt30 mb10自定义样式/h2ListListItem:avatar-props{src: https://cdn.jsdelivr.net/gh/themusecatcher/resources0.0.5/1.jpg,size: 56}:avatar-style{ alignSelf: center }:title-style{ fontSize: 20px }:description-style{ fontSize: 16px }:content-style{ fontSize: 18px, color: #f50, marginLeft: 16px }:extra-style{ overflow: hidden, borderRadius: 12px }v-for(data, index) in listData:keyindex:titledata.titletemplate #description{{ data.description }}/template{{ data.content }}template #actionsaedit/aamore/a/templatetemplate #extraimgclassu-imgwidth200altextrasrchttps://cdn.jsdelivr.net/gh/themusecatcher/resources0.0.5/2.jpg//template/ListItem/Listh2 classmt30 mb10竖排分页列表/h2List vertical sizelarge show-pagination :paginationpaginationListItem v-for(data, index) in paginationListData :keyindextemplate #titlea :hrefdata.href target_blank{{ data.title }}/a/templatetemplate #avatarAvatar srchttps://cdn.jsdelivr.net/gh/themusecatcher/resources0.0.5/1.jpg //templatetemplate #description{{ data.description }}/template{{ data.content }}template #actionsspansvgclassu-svgfocusablefalsedata-iconstarwidth1emheight1emfillcurrentColoraria-hiddentrueviewBox64 64 896 896pathdM908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z/path/svg156/spanspansvgclassu-svgfocusablefalsedata-iconlikewidth1emheight1emfillcurrentColoraria-hiddentrueviewBox64 64 896 896pathdM885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 00-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 00471 99.9c-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.5-5.4 47.6-20.3 78.3-66.8 78.3-118.4 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7-.2-12.6-2-25.1-5.6-37.1zM184 852V568h81v284h-81zm636.4-353l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 22.4-13.2 42.6-33.6 51.8H329V564.8l99.5-360.5a44.1 44.1 0 0142.2-32.3c7.6 0 15.1 2.2 21.1 6.7 9.9 7.4 15.2 18.6 14.6 30.5l-9.6 198.4h314.4C829 418.5 840 436.9 840 456c0 16.5-7.2 32.1-19.6 43z/path/svg156/spanspansvgclassu-svgfocusablefalsedata-iconmessagewidth1emheight1emfillcurrentColoraria-hiddentrueviewBox64 64 896 896pathdM464 512a48 48 0 1096 0 48 48 0 10-96 0zm200 0a48 48 0 1096 0 48 48 0 10-96 0zm-400 0a48 48 0 1096 0 48 48 0 10-96 0zm661.2-173.6c-22.6-53.7-55-101.9-96.3-143.3a444.35 444.35 0 00-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9a445.35 445.35 0 00-142 96.5c-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9A449.4 449.4 0 00112 714v152a46 46 0 0046 46h152.1A449.4 449.4 0 00510 960h2.1c59.9 0 118-11.6 172.7-34.3a444.48 444.48 0 00142.8-95.2c41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z/path/svg6/span/templatetemplate #extraimgclassu-imgwidth272altextrasrchttps://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png//template/ListItemtemplate #footerdivbVue Amazing UI/bfooter part/div/template/Listh2 classmt30 mb10列表配置器/h2Flex gaplarge verticalRow :gutter[24, 12]Col :span6Space gapsmall vertical bordered:Switch v-modelstate.bordered / /Space/ColCol :span6Space gapsmall vertical vertical:Switch v-modelstate.vertical / /Space/ColCol :span6Space gapsmall vertical split:Switch v-modelstate.split / /Space/ColCol :span6Space gapsmall verticalsize:Radio :optionssizeOptions v-model:valuestate.size button button-stylesolid //Space/ColCol :span6Space gapsmall vertical loading:Switch v-modelstate.loading / /Space/ColCol :span6Space gapsmall vertical hoverable:Switch v-modelstate.hoverable / /Space/ColCol :span6Flex gapsmall vertical header:Input v-model:valuestate.header placeholderheader / /Flex/ColCol :span6Flex gapsmall vertical footer:Input v-model:valuestate.footer placeholderfooter / /Flex/ColCol :span6Flex gapsmall vertical extra:Input v-model:valuestate.extra placeholderextra / /Flex/ColCol :span6Space gapsmall vertical showPagination:Switch v-modelstate.showPagination / /Space/ColCol :span6Space gapsmall vertical showSizeChanger:Switch v-modelstate.pagination.showSizeChanger / /Space/ColCol :span6Space gapsmall vertical showQuickJumper:Switch v-modelstate.pagination.showQuickJumper / /Space/Col/RowList:borderedstate.bordered:verticalstate.vertical:splitstate.split:sizestate.size:loadingstate.loading:hoverablestate.hoverable:headerstate.header:footerstate.footer:showPaginationstate.showPagination:paginationstate.paginationListItem v-for(data, index) in configListData :keyindex :extrastate.extratemplate #titlea :hrefdata.href target_blank{{ data.title }}/a/templatetemplate #avatarAvatar srchttps://cdn.jsdelivr.net/gh/themusecatcher/resources0.0.5/1.jpg //templatetemplate #description{{ data.description }}/template{{ data.content }}/ListItem/List/Flex/div
/template
style langless scoped
.u-img {display: inline-block;vertical-align: bottom;
}
.u-svg {margin-right: 8px;fill: rgba(0, 0, 0, 0.45);
}
/style
