element基础详情页-文本描述组件

妖狐艹你老母 2021-10-24 06:18 1292阅读 0赞

##### 前言 #####

> 对于常做topB系统的小伙伴们，基础信息详情页是最常见不过的；也是我们最容易封装的，这里小编简易写了一点东西。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYyNDcyNA_size_16_color_FFFFFF_t_70]

##### 使用 #####

> 只是做了简易版，相关参数并不支持render的写法；有兴趣的可以写写，支持render后扩展性会更好

import DescriptionList from "./Description.vue"; // 引入组件
    
    <DescriptionList title="退款申请" col="6" :content="data"> // col element-ui栅格栏布局同官网使用
      <Description term="取货单号">1000000000</Description> // 组件内使用固定标签
      <Description term="状态">已取货</Description>
      <Description term="销售单号">1234123421</Description>
      <Description term="子订单">3214321432</Description>
    </DescriptionList>

##### 组件 #####

/** * 文本详情描述组件 */
    <template>
      <div class="description_text">
        <div v-if="title" class="title">{ { title}}</div>
        <el-row :gutter="gutter">
          <el-col :key="key" :span="+col" v-for="(item, key) in dataSource">
            <div class="term">{ { item.term}}</div>
            <div class="detail">{ { item.detail}}</div>
          </el-col>
        </el-row>
      </div>
    </template>
    
    <script>
    const handleArrayObj = data => { 
      return data
        .filter(item => item.tag === "Description")
        .map(item => ({ 
          tag: item.tag,
          term: (item.data && item.data.attrs.term) || "暂无",
          detail: (item.children && item.children[0].text) || "暂无"
        }));
    };
    
    export default { 
      name: "Description",
      props: { 
      	title: String,
      	content: [Object, Array],
        gutter: { 
          type: [Number, String],
          default: 20
        },
        col: { 
          type: [Number, String],
          default: 8
        }
      },
    
      data() { 
        return { 
          dataSource: handleArrayObj(this.$slots.default || [])
        };
      },
      watch: { 
      	content() { 
      		this.dataSource = handleArrayObj(this.$slots.default || []) 
      	} // 监听重渲染
    };
    </script>
    
    <style lang="less" scoped>
    .description_text { 
      .title { 
        font-weight: 700;
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 20px;
        color: rgba(0, 0, 0, 0.85);
      }
      .term { 
        color: rgba(0,0,0,.85);
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
        padding-bottom: 16px;
        margin-right: 8px;
        white-space: nowrap;
        display: table-cell;
        &:after { 
          content: ":";
          margin: 0 8px 0 2px;
          position: relative;
          top: -0.5px;
        }
      }
      .detail { 
        font-size: 14px;
        line-height: 1.5;
        width: 100%;
        padding-bottom: 16px;
        color: rgba(0, 0, 0, 0.65);
        display: table-cell;
      }
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYyNDcyNA_size_16_color_FFFFFF_t_70]: /images/20211023/55062b3ea9df4f24b3042e2c0b6e0608.png