JxlDescription 信息描述

滿足開發(fā)者采用配置的方式，快速搭建信息描述的需求。

基于 ElementUI 的 el-row 和 el-col 標簽封裝。

<template>
  <div class="description-list">
    <template v-if="group">
      <div v-for="(groupItem, key) in items" :key="key" :class="['description-group', indent ? '' : 'no-indent']">
        <div class="description-group-title">{{ groupItem.title }}</div>
        <div class="description-group-items">
          <el-row v-bind="layout.row">
            <el-col v-for="(item, index) in groupItem.items" :key="index" v-bind="layout.col">
              <jxl-description-item
                v-if="itemVisible(item)"
                :item="item"
                :colon="colon"
                :prop="prop"
                :data="data"
                :layout="layout"
                :ellipsis="ellipsis"
                :label-width="labelWidth"
                :label-align="labelAlign"
                :label-direction="labelDirection"
              >
                <template v-if="_typeof(item.slotName) === String && $scopedSlots[item.slotName]" v-slot:content>
                  <slot :name="item.slotName" :row="item" />
                </template>
              </jxl-description-item>
            </el-col>
          </el-row>
        </div>
      </div>
    </template>
    <template v-else>
      <el-row v-bind="layout.row">
        <el-col v-for="(item, index) in items" :key="index" v-bind="layout.col">
          <jxl-description-item
            v-if="itemVisible(item)"
            :item="item"
            :colon="colon"
            :prop="prop"
            :data="data"
            :layout="layout"
            :ellipsis="ellipsis"
            :label-width="labelWidth"
            :label-align="labelAlign"
            :label-direction="labelDirection"
          >
            <template v-if="_typeof(item.slotName) === String && $scopedSlots[item.slotName]" v-slot:content>
              <slot :name="item.slotName" :row="item" />
            </template>
          </jxl-description-item>
        </el-col>
      </el-row>
    </template>
  </div>
</template>

<script>
import JxlDescriptionItem from '@/components/libs/Description/JxlDescriptionItem'
import mixin from '@/components/libs/mixin'
import { _typeof } from '@/components/libs/util'

export default {
  name: 'JxlDescription',
  components: { JxlDescriptionItem },
  mixins: [mixin],
  props: {
    /**
     * 數(shù)據(jù)項名稱固定寬度
     */
    labelWidth: {
      type: String,
      default: undefined
    },
    /**
     * 數(shù)據(jù)項名稱對齊方式
     * 可選值：left、right、center
     */
    labelAlign: {
      type: String,
      default: 'left'
    },
    /**
     * 數(shù)據(jù)項名稱擺放方向
     * 可選值：row、column
     */
    labelDirection: {
      type: String,
      default: 'row'
    },
    /**
     * 數(shù)據(jù)來源是否是 prop
     */
    prop: {
      type: Boolean,
      default: true
    },
    /**
     * 是否顯示冒號
     */
    colon: {
      type: Boolean,
      default: true
    },
    /**
     * 分組模式下標題與子項縮進
     */
    indent: {
      type: Boolean,
      default: true
    },
    /**
     * 是否限制內容行數(shù)，超出的部分內容省略
     * 0 表示不限制；正整數(shù)表示限制的行數(shù)
     */
    ellipsis: {
      type: Number,
      default: 0
    },
    /**
     * 是否是分組展示
     */
    group: {
      type: Boolean,
      default: false
    },
    /**
     * 布局
     */
    layout: {
      type: Object,
      default: () => {
        return {}
      }
    },
    /**
     * 數(shù)據(jù)項
     */
    items: {
      type: [Object, Array],
      default: () => {
        return {}
      },
      required: true
    },
    /**
     * 數(shù)據(jù)來源
     */
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {}
  },
  methods: {
    /**
     * 描述可見
     */
    itemVisible(item) {
      if (_typeof(item.hidden) === Function) return !item.hidden()
      return !item.hidden
    }
  }
}
</script>

<style lang="less" scoped>
.description-list {
  .description-group {
    margin-bottom: 24px;

    &:last-child {
      margin-bottom: 0;
    }
    &.no-indent {
      .description-group-title {
        padding-left: 0;

        &:before {
          display: none;
        }
      }
      .description-group-items {
        padding-left: 0;
      }
    }
    .description-group-title {
      position: relative;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #303233;
      font-weight: 600;
      font-size: 16px;
      line-height: 1.5;
      padding-left: 12px;
      margin-bottom: 20px;

      &:before {
        display: block;
        content: '';
        position: absolute;
        left: 0;
        top: 3px;
        width: 2px;
        height: 13px;
        background-color: #1890ff;
      }
    }
    .description-group-items {
      padding-left: 12px;
    }
  }
  /deep/ .el-col:last-of-type {
     .description-item {
      margin-bottom: 0 !important;
    }
  }
}
</style>

JxlDescriptionItem 信息描述項

滿足開發(fā)者采用配置的方式，快速搭建信息描述的需求。

基于 自封組件的 jxl-tip 和 jxl-ellipsis 標簽封裝。

<template>
  <div class="description-item" :class="hasLabelDirection" v-bind="item.itemAttrs">
    <div :class="['description-item__label', hasColon ? 'has-colon' : '']" :style="{ width: labelWidth ? labelWidth : undefined, textAlign: labelAlign ? labelAlign : undefined }" v-bind="item.labelAttrs">
      <!-- 條目名稱 -->
      <span>{{ item.label }}</span>
      <!-- 條目提示符 -->
      <jxl-tip v-if="item.tip" :options="item.tip" />
    </div>
    <div class="description-item__value" :style="item.valueStyle" v-bind="item.valueAttrs">
      <!-- 自定義插槽 -->
      <template v-if="_typeof(item.slotName) === String && $scopedSlots['content']"><slot name="content" /></template>
      <!-- 自定義組件 -->
      <component :is="item.component" v-else-if="_typein(item.component, [String, Object])" v-bind="item.attrs" v-on="item.events" />
      <!-- 省略文本 -->
      <jxl-ellipsis v-else-if="hasEllipsis" :line="getEllipsis" :text="renderItem()" />
      <!-- 普通文本 -->
      <template v-else>{{ renderItem() }}</template>
    </div>
  </div>
</template>

<script>
import JxlTip from '@/components/libs/Tip/JxlTip'
import mixin from '@/components/libs/mixin'
import JxlEllipsis from '@/components/libs/Ellipsis/JxlEllipsis'

export default {
  name: 'JxlDescriptionItem',
  components: { JxlEllipsis, JxlTip },
  mixins: [mixin],
  props: {
    /**
     * 數(shù)據(jù)項名稱固定寬度
     */
    labelWidth: {
      type: String,
      default: undefined
    },
    /**
     * 數(shù)據(jù)項名稱對齊方式
     * 可選值：left、right、center
     */
    labelAlign: {
      type: String,
      default: undefined
    },
    /**
     * 數(shù)據(jù)項名稱擺放方向
     * 可選值：row、column
     */
    labelDirection: {
      type: String,
      default: 'row'
    },
    /**
     * 數(shù)據(jù)來源是否是 prop
     */
    prop: {
      type: Boolean,
      default: false
    },
    /**
     * 是否顯示冒號
     */
    colon: {
      type: Boolean,
      default: true
    },
    /**
     * 是否限制內容行數(shù)，超出的部分內容省略
     * 0 表示不限制；正整數(shù)表示限制的行數(shù)
     */
    ellipsis: {
      type: Number,
      default: 0
    },
    /**
     * 布局
     */
    layout: {
      type: Object,
      default: () => {
        return {}
      }
    },
    /**
     * 數(shù)據(jù)項
     */
    item: {
      type: Object,
      default: () => {
        return {}
      }
    },
    /**
     * 數(shù)據(jù)來源
     */
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    /**
     * 是否需要冒號
     * @returns {boolean|*}
     */
    hasColon() {
      if (this._typeof(this.item.colon) === Boolean) return this.item.colon
      return this.colon
    },
    /**
     * 獲取是否需要省略
     * @returns {boolean}
     */
    hasEllipsis() {
      if (this._typeof(this.item.ellipsis) === Number && this.item.ellipsis > 0) return true
      return this._typeof(this.ellipsis) === Number && this.ellipsis > 0
    },
    /**
     * 獲取省略的行數(shù)
     * @returns {number}
     */
    getEllipsis() {
      if (this._typeof(this.item.ellipsis) === Number) return this.item.ellipsis
      if (this._typeof(this.ellipsis) === Number) return this.ellipsis
      return 0
    },
    /**
     * 數(shù)據(jù)項名稱擺放方向
     */
    hasLabelDirection() {
      if (this._typeof(this.item.labelDirection) === String) {
        if (this.item.labelDirection === 'column') return 'description-item-direction-column'
        return 'description-item-direction-row'
      }
      if (this.labelDirection === 'column') return 'description-item-direction-column'
      return 'description-item-direction-row'
    }
  },
  methods: {
    /**
     * 渲染數(shù)據(jù)項
     */
    renderItem() {
      if (this._typeof(this.item.render) === Function) {
        return this.friendly(this.item.render(this.getItemValue()), this.isVoid(this.item.void) ? '-' : this.item.void)
      }
      return this.friendly(this.getItemValue(), this.isVoid(this.item.void) ? '-' : this.item.void)
    },
    /**
     * 獲取數(shù)據(jù)項值
     * @returns {*}
     */
    getItemValue() {
      if (this.prop) return this._get(this.data, this.item.prop)
      return this.item.value
    }
  }
}
</script>

<style lang="less" scoped>
  .description-item {
    display: flex;
    line-height: 1.5;
    margin-bottom: 20px;

    &.description-item-direction-row {
      flex-direction: row;

      .description-item__label {
        margin-right: 16px;
      }
    }
    &.description-item-direction-column {
      flex-direction: column;

      .description-item__label {
        margin-bottom: 8px;
      }
    }
  .description-item__label {
    color: #606366;
    font-size: 14px;
    line-height: 22px;
    flex-shrink: 0; // 當寬度不足時，babel不能被擠壓

    &.has-colon {
      margin-right: 8px;
      padding-right: 4px;

      &:after {
        content: ":";
        position: relative;
        left: 4px;
        top: -1px;
        font-weight: 600;
      }
    }
  }
  .description-item__value {
    flex: 1;
    color: #303233;
    line-height: 22px;
    font-size: 14px;
  }
}
</style>