天津河东做网站公司,做网站时联系我们制作模板,商业空间设计效果图,专业做网站公司怎么收费#x1f601; 整体功能效果与 ant design vue 保持高度一致 #x1f601;
包含两种组件#xff1a;Descriptions 和 DescriptionsItem#xff08;必须搭配使用#xff01;#xff09;
效果如下图#xff1a;在线预览 APIs
Descriptions
参数说明类型默认值必传title… 整体功能效果与 ant design vue 保持高度一致
包含两种组件Descriptions 和 DescriptionsItem必须搭配使用
效果如下图在线预览 APIs
Descriptions
参数说明类型默认值必传title描述列表的标题显示在最顶部string | slot‘’falsebordered是否展示边框booleanfalsefalsecolumn一行的 DescriptionItems 数量可以写成数值或支持响应式的对象写法 { xs: 8, sm: 16, md: 24}number | Responsive{xs: 1, sm: 2, md: 3}falseextra描述列表的操作区域显示在右上方string | slot‘’falsesize设置列表的大小‘default’ | ‘middle’ | ‘small’‘default’labelStyle自定义标签样式优先级低于 DescriptionItemsCSSProperties{}falsecontentStyle自定义内容样式优先级低于 DescriptionItemsCSSProperties{}false
Responsive Type
名称说明类型必传xs576px 响应式栅格numberfalsesm≥576px 响应式栅格numberfalsemd≥768px 响应式栅格numberfalselg≥992px 响应式栅格numberfalsexl≥1200px 响应式栅格numberfalsexxl≥1600px 响应式栅格numberfalse
DescriptionsItem
参数说明类型默认值必传label内容的描述标签string | slot‘’falsespan包含列的数量number1falselabelStyle自定义标签样式优先级高于 DescriptionCSSProperties{}falsecontentStyle自定义内容样式优先级高于 DescriptionCSSProperties{}false
Descriptions组件
script setup langts
import { onMounted, onUnmounted, computed, nextTick, ref, watch, watchEffect } from vue
import type { CSSProperties } from vue
interface Responsive {xs?: number // 576px 响应式栅格sm?: number // ≥576px 响应式栅格md?: number // ≥768px 响应式栅格lg?: number // ≥992px 响应式栅格xl?: number // ≥1200px 响应式栅格xxl?: number // ≥1600px 响应式栅格
}
interface Props {title?: string // 描述列表的标题显示在最顶部 string | slotbordered?: boolean // 是否展示边框column?: number|Responsive // 一行的 DescriptionItems 数量可以写成数值或支持响应式的对象写法 { xs: 8, sm: 16, md: 24}extra?: string // 描述列表的操作区域显示在右上方 string | slotsize?: default|middle|small // 设置列表的大小labelStyle?: CSSProperties // 自定义标签样式优先级低于 DescriptionItemscontentStyle?: CSSProperties // 自定义内容样式优先级低于 DescriptionItems
}
const props withDefaults(definePropsProps(), {title: ,bordered: false,column: () ({xs: 1, sm: 2, md: 3}),extra: ,size: default,labelStyle: () ({}),contentStyle: () ({})
})
const clientWidth ref(document.documentElement.clientWidth)
onMounted(() {window.addEventListener(resize, getBrowserSize)
})
onUnmounted(() {window.removeEventListener(resize, getBrowserSize)
})
function getBrowserSize () {// document.documentElement返回html元素clientWidth.value document.documentElement.clientWidth
}
const responsiveColumn computed(() {if (typeof props.column object) {if (clientWidth.value 1600 props.column.xxl) {return props.column.xxl}if (clientWidth.value 1200 props.column.xl) {return props.column.xl}if (clientWidth.value 992 props.column.lg) {return props.column.lg}if (clientWidth.value 768 props.column.md) {return props.column.md}if (clientWidth.value 576 props.column.sm) {return props.column.sm}if (clientWidth.value 576 props.column.xs) {return props.column.xs}}return props.column
})
const view ref()
const children refany[]() // DescriptionsItems 节点
const cols ref() // 放置 DescriptionsItems 节点的模板引用数组
const rows ref() // 放置 DescriptionsItems 节点的模板引用数组带边框
const groupItems refany[]([]) // 处理后的 DescriptionsItems 节点数组
const groupRows computed(() {return groupItems.value.length
})
watchEffect(() {if (props.bordered) {children.value Array.from(view.value.children).filter((element: any) element.className m-desc-item-bordered)} else {children.value Array.from(view.value.children).filter((element: any) element.className m-desc-item)}
}, {flush: post})
watch(children, (to) {groupItems.value []nextTick(() {getGroupItems(to, responsiveColumn.value as number)})
})
watch(responsiveColumn, (to) {groupItems.value []nextTick(() {getGroupItems(children.value, to as number)})
})
// 根据不同 cloumn 处理 DescriptionsItems 节点
function getGroupItems (children: any, responsiveColumn: number) {const len children.lengthlet group: any[] []for (let n 0; n len; n) {const item {span: Math.min(children[n].dataset.span, responsiveColumn),element: children[n]}if (getTotalSpan(group) responsiveColumn) { // 已有 items 的 totalSpan columnitem.span Math.min(item.span, responsiveColumn - getTotalSpan(group))if (n len - 1) { // 最后一个item.span responsiveColumn - getTotalSpan(group)}group.push(item)if (n len - 1) {groupItems.value.push(group)}} else {groupItems.value.push(group)group [item]if (n len - 1) { // 最后一个item.span responsiveColumngroupItems.value.push(group)}}}if (props.bordered) { // 带边框nextTick(() {groupItems.value.forEach((items: any, index: number) {// 每一行 tritems.forEach((item: any) {const itemChildren: any[] Array.from(item.element.children)// 创建节点副本否则原节点将先被移除后插入到新位置影响后续响应式布局计算const th itemChildren[0].cloneNode(true)th.colSpan 1// 动态添加节点样式setStyle(th, props.labelStyle)setStyle(th, JSON.parse(item.element.dataset.labelStyle))const td itemChildren[1].cloneNode(true)td.colSpan item.span * 2 - 1// 动态添加节点样式setStyle(td, props.contentStyle)setStyle(td, JSON.parse(item.element.dataset.contentStyle))// 插入节点到指定位置rows.value[index].appendChild(th)rows.value[index].appendChild(td)})})})} else {nextTick(() {children.forEach((element: any, index: number) {const elementChildren: any[] Array.from(element.children)const label elementChildren[0]// 动态添加节点样式setStyle(label, props.labelStyle)setStyle(label, JSON.parse(element.dataset.labelStyle))const content elementChildren[1]// 动态添加节点样式setStyle(content, props.contentStyle)setStyle(content, JSON.parse(element.dataset.contentStyle))// 插入节点到指定位置cols.value[index].appendChild(element)})})}
}
// 计算当前 group 中所有 span 之和
function getTotalSpan (group: any): number {return group.reduce((accumulator: number, currentValue: any) accumulator currentValue.span, 0)
}
// 为元素添加内联样式
function setStyle(element: any, style: any) {if (JSON.stringify(style) ! {}) {Object.keys(style).forEach(key {element.style[key] style[key]})}
}
/script
templatediv classm-desc :classdesc-${size}div classm-headerdiv classu-titleslot nametitle{{ title }}/slot/divdiv classu-extraslot nameextra{{ extra }}/slot/div/divdiv refview v-showfalseslot/slot/divdiv classm-desc-view :class{m-bordered: bordered}tabletbody v-if!borderedtr v-for(items, row) in groupItems :keyrowtdrefcolsclassu-item-td:colspanitem.spanv-for(item, col) in items :keycol/td/tr/tbodytbody v-elsetemplate v-ifgroupRowstrrefrowsclasstr-borderedv-forrow of groupRows :keyrow/tr/template/tbody/table/div/div
/template
style langless scoped
.m-desc {font-size: 14px;color: rgba(0, 0, 0, .88);line-height: 1.5714285714285714;.m-header {display: flex;align-items: center;margin-bottom: 20px;.u-title {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;flex: auto;font-weight: 600;font-size: 16px;color: rgba(0, 0, 0, .88);line-height: 1.5;}.u-extra {margin-inline-start: auto;color: rgba(0, 0, 0, .88);font-size: 14px;}}.m-desc-view {width: 100%;border-radius: 8px;table {width: 100%;table-layout: fixed;display: table; // 可选只为兼容 vitepress 总 .vp-doc 的样式入侵下同border-collapse: separate; // 可选margin: 0; // 可选tr { // 可选border: none;background: transparent;}.u-item-td {padding: 0; // 可选border: none; // 可选padding-bottom: 16px;vertical-align: top;}}}.m-bordered {border: 1px solid rgba(5, 5, 5, .06);table {table-layout: auto;border-collapse: collapse;display: table; // 可选margin: 0; // 可选.tr-bordered {border-bottom: 1px solid rgba(5, 5, 5, .06);:last-child {border-bottom: none;}:deep(.u-label-th) {border: none; // 可选color: rgba(0, 0, 0, .88);font-weight: normal;font-size: 14px;line-height: 1.5714285714285714;text-align: start;background-color: rgba(0, 0, 0, .02);padding: 16px 24px;border-inline-end: 1px solid rgba(5, 5, 5, .06);}:deep(.u-content-td) {border: none; // 可选display: table-cell;flex: 1;padding: 16px 24px;border-inline-end: 1px solid rgba(5, 5, 5, .06);color: rgba(0, 0, 0, .88);font-size: 14px;line-height: 1.5714285714285714;word-break: break-word;overflow-wrap: break-word;:last-child {border-inline-end: none;}}}}}
}
.desc-middle {.m-desc-view {.u-item-td {padding-bottom: 12px !important;}}.m-bordered {:deep(.u-label-th) {padding: 12px 24px !important;}:deep(.u-content-td) {padding: 12px 24px !important;}}
}
.desc-small {.m-desc-view {.u-item-td {padding-bottom: 8px !important;}}.m-bordered {:deep(.u-label-th) {padding: 8px 16px !important;}:deep(.u-content-td) {padding: 8px 16px !important;}}
}
/styleDescriptionsItem组件
script setup langts
import type { CSSProperties } from vue
interface Props {label?: string // 内容的描述标签 string | slotspan?: number // 包含列的数量labelStyle?: CSSProperties // 自定义标签样式优先级高于 DescriptioncontentStyle?: CSSProperties // 自定义内容样式优先级高于 Description
}
withDefaults(definePropsProps(), {label: ,span: 1,labelStyle: () ({}),contentStyle: () ({})
})
/script
templatediv classm-desc-item :data-spanspan :data-label-styleJSON.stringify(labelStyle) :data-content-styleJSON.stringify(contentStyle)span classu-labelslot namelabel{{ label }}/slot/spanspan classu-contentslot/slot/span/divdiv classm-desc-item-bordered :data-spanspan :data-label-styleJSON.stringify(labelStyle) :data-content-styleJSON.stringify(contentStyle)th classu-label-thslot namelabel{{ label }}/slot/thtd classu-content-tdslot/slot/td/div
/template
style langless scoped
.m-desc-item {display: flex;.u-label {display: inline-flex;align-items: baseline;color: rgba(0, 0, 0, .88);font-weight: normal;font-size: 14px;line-height: 1.5714285714285714;text-align: start;::after {content: :;position: relative;top: -.5px;margin-inline: 2px 8px;}}.u-content {display: inline-flex;align-items: baseline;flex: 1;color: rgba(0, 0, 0, .88);font-size: 14px;line-height: 1.5714285714285714;word-break: break-word;overflow-wrap: break-word;}
}
/style在要使用的页面引入
其中引入使用了 Vue3单选Radio
script setup langts
import { ref } from vue
const size ref(default)
const options ref([{label: default,value: default},{label: middle,value: middle},{label: small,value: small}
])
const onChange (value: any) {console.log(size checked, value)size.value value
}
/script
templatedivh1Descriptions 描述列表/h1h2 classmt30 mb10基本使用/h2Descriptions titleUser Infotemplate #extraa href#more/a/templateDescriptionsItem labelUserNameZhou Maomao/DescriptionsItemDescriptionsItem labelTelephone1810000000/DescriptionsItemDescriptionsItem labelLiveHangzhou, Zhejiang/DescriptionsItemDescriptionsItem labelRemarkempty/DescriptionsItemDescriptionsItem labelAddressNo. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China/DescriptionsItem/Descriptionsh2 classmt30 mb10带边框的/h2Descriptions titleUser Info borderedDescriptionsItem labelProductCloud Database/DescriptionsItemDescriptionsItem labelBilling ModePrepaid/DescriptionsItemDescriptionsItem labelAutomatic RenewalYES/DescriptionsItemDescriptionsItem labelOrder time2018-04-24 18:00:00/DescriptionsItemDescriptionsItem labelUsage Time :span22019-04-24 18:00:00/DescriptionsItemDescriptionsItem labelStatus :span3Badge statusprocessing textRunning //DescriptionsItemDescriptionsItem labelNegotiated Amount$80.00/DescriptionsItemDescriptionsItem labelDiscount$20.00/DescriptionsItemDescriptionsItem labelOfficial Receipts$60.00/DescriptionsItemDescriptionsItem labelConfig InfoData disk type: MongoDBbr /Database version: 3.4br /Package: dds.mongo.midbr /Storage space: 10 GBbr /Replication factor: 3br /Region: East China 1br //DescriptionsItem/Descriptionsh2 classmt30 mb10响应式描述列表/h2DescriptionstitleResponsive Descriptionsbordered:column{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }DescriptionsItem labelProductCloud Database/DescriptionsItemDescriptionsItem labelBillingPrepaid/DescriptionsItemDescriptionsItem labelTime18:00:00/DescriptionsItemDescriptionsItem labelAmount$80.00/DescriptionsItemDescriptionsItem labelDiscount$20.00/DescriptionsItemDescriptionsItem labelOfficial$60.00/DescriptionsItemDescriptionsItem labelConfig InfoData disk type: MongoDBbr /Database version: 3.4br /Package: dds.mongo.midbr /Storage space: 10 GBbr /Replication factor: 3br /Region: East China 1/DescriptionsItem/Descriptionsh2 classmt30 mb10自定义尺寸/h2Radio :optionsoptions v-model:valuesize changeonChange /br /br /Descriptions bordered titleCustom Size :sizesizetemplate #extraButton typeprimaryEdit/Button/templateDescriptionsItem labelProductCloud Database/DescriptionsItemDescriptionsItem labelBillingPrepaid/DescriptionsItemDescriptionsItem labelTime18:00:00/DescriptionsItemDescriptionsItem labelAmount$80.00/DescriptionsItemDescriptionsItem labelDiscount$20.00/DescriptionsItemDescriptionsItem labelOfficial$60.00/DescriptionsItemDescriptionsItem labelConfig InfoData disk type: MongoDBbr /Database version: 3.4br /Package: dds.mongo.midbr /Storage space: 10 GBbr /Replication factor: 3br /Region: East China 1br //DescriptionsItem/Descriptionsbr /br /Descriptions titleCustom Size :sizesizetemplate #extraButton typeprimaryEdit/Button/templateDescriptionsItem labelProductCloud Database/DescriptionsItemDescriptionsItem labelBillingPrepaid/DescriptionsItemDescriptionsItem labelTime18:00:00/DescriptionsItemDescriptionsItem labelAmount$80.00/DescriptionsItemDescriptionsItem labelDiscount$20.00/DescriptionsItemDescriptionsItem labelOfficial$60.00/DescriptionsItem/Descriptionsh2 classmt30 mb10自定义内容 标签样式/h2DescriptionsborderedtitleCustom Style:labelStyle{fontWeight: 800, color: #faad14}:contentStyle{fontWeight: 600, color: #1677ff}template #extraButton typeprimaryEdit/Button/templateDescriptionsItem labelProductCloud Database/DescriptionsItemDescriptionsItem labelBillingPrepaid/DescriptionsItemDescriptionsItem labelTime18:00:00/DescriptionsItemDescriptionsItem labelAmount :labelStyle{color: #52c41a} :contentStyle{color: #ff4d4f}$80.00/DescriptionsItemDescriptionsItem labelDiscount$20.00/DescriptionsItemDescriptionsItem labelOfficial$60.00/DescriptionsItemDescriptionsItem labelConfig InfoData disk type: MongoDBbr /Database version: 3.4br /Package: dds.mongo.midbr /Storage space: 10 GBbr /Replication factor: 3br /Region: East China 1br //DescriptionsItem/Descriptionsbr /br /DescriptionstitleCustom Style:labelStyle{fontWeight: 800, color: #faad14}:contentStyle{fontWeight: 600, color: #1677ff}template #extraButton typeprimaryEdit/Button/templateDescriptionsItem labelProductCloud Database/DescriptionsItemDescriptionsItem labelBillingPrepaid/DescriptionsItemDescriptionsItem labelTime18:00:00/DescriptionsItemDescriptionsItem labelAmount :labelStyle{color: #52c41a} :contentStyle{color: #ff4d4f}$80.00/DescriptionsItemDescriptionsItem labelDiscount$20.00/DescriptionsItemDescriptionsItem labelOfficial$60.00/DescriptionsItem/Descriptions/div
/template
