123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153 |
- <template>
- <div :class="['description-list', size, layout === 'vertical' ? 'vertical': 'horizontal']">
- <div v-if="title" class="title">{{ title }}</div>
- <a-row>
- <slot></slot>
- </a-row>
- </div>
- </template>
- <script>
- import { Col } from 'ant-design-vue/es/grid/'
- const Item = {
- name: 'DetailListItem',
- props: {
- term: {
- type: String,
- default: '',
- required: false
- }
- },
- inject: {
- col: {
- type: Number
- }
- },
- render () {
- return (
- <Col {...{ props: responsive[this.col] }}>
- <div class="term">{this.$props.term}</div>
- <div class="content">{this.$slots.default}</div>
- </Col>
- )
- }
- }
- const responsive = {
- 1: { xs: 24 },
- 2: { xs: 24, sm: 12 },
- 3: { xs: 24, sm: 12, md: 8 },
- 4: { xs: 24, sm: 12, md: 6 }
- }
- export default {
- name: 'DetailList',
- Item: Item,
- components: {
- Col
- },
- props: {
- title: {
- type: String,
- default: '',
- required: false
- },
- col: {
- type: Number,
- required: false,
- default: 3
- },
- size: {
- type: String,
- required: false,
- default: 'large'
- },
- layout: {
- type: String,
- required: false,
- default: 'horizontal'
- }
- },
- provide () {
- return {
- col: this.col > 4 ? 4 : this.col
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .description-list {
- .title {
- color: rgba(0,0,0,.85);
- font-size: 14px;
- font-weight: 500;
- margin-bottom: 16px;
- }
- /deep/ .term {
- color: rgba(0,0,0,.85);
- display: table-cell;
- line-height: 20px;
- margin-right: 8px;
- padding-bottom: 16px;
- white-space: nowrap;
- &:not(:empty):after {
- content: ":";
- margin: 0 8px 0 2px;
- position: relative;
- top: -.5px;
- }
- }
- /deep/ .content {
- color: rgba(0,0,0,.65);
- display: table-cell;
- min-height: 22px;
- line-height: 22px;
- padding-bottom: 16px;
- width: 100%;
- &:empty {
- content: ' ';
- height: 38px;
- padding-bottom: 16px;
- }
- }
- &.small {
- .title {
- font-size: 14px;
- color: rgba(0, 0, 0, .65);
- font-weight: normal;
- margin-bottom: 12px;
- }
- /deep/ .term, .content {
- padding-bottom: 8px;
- }
- }
- &.large {
- /deep/ .term, .content {
- padding-bottom: 16px;
- }
- .title {
- font-size: 16px;
- }
- }
- &.vertical {
- .term {
- padding-bottom: 8px;
- }
- /deep/ .term, .content {
- display: block;
- }
- }
- }
- </style>
|