Vue 组件封装之 List 列表

一、List 列表

组件说明：
实现 List 列表布局排版。

效果展示：

实现的功能：

1. 在一个 List 中实现左中右三栏布局；
2. 左边为文本 label 标签，纯文字展示。可通过 require 字段来判断是否必填，必填项则前面会有红色的 *。
3. 中间为输入值 input 标签。
4. 右边为图标 img 标签，可通过 icon 属性来判断是否展现图标。并且暴露出该图标的点击事件。

二、使用案例

<template>
     <div>
     <el-list
          :list="textList"        
          :result="item"
           width="80px"
        />
      </div>
</template>
<script>
import address from '../assets/address.png';
import right from '../assets/right.png';
export default {
  data(){
     return {
     textList:[
          {label:"地址",field:"address",icon:address,require:true,onRightClick:this.choseAddress},
          {label:"学历",field:"education",icon:right,require:true,onRightClick:this.choseEducation},
          {label:"电话",field:"telephone",require:true},
          {label:"人口",field:"population",disabled:true,require:true,suffixUnit:"万"},
          {label:"收入",field:"income",require:true,prefixUnit:"$"},
          {label:"网址",field:"website"},
        ],
        item:{
          address:"",
          education:"",
          telephone:"",
          population:"1000",
          income:"200",
          website:"",
        },
    }
  }
  methods: {
      choseAddress(){      
          this.item.address="上海市浦东新区";
      },
      choseEducation(){
       this.item.education="本科";
      },
  }
}
</script>	

三、API 使用指南

属性	说明	类型	默认值
list	页面展示的静态内容集合	Array	[]
label	左边展示文本	String	–
field	中间输入值字段	String	–
icon	右边的图标	String	–
onRightClick	点击右边图标时触发事件,为了良好的用户体验，事件绑在在行	Function	–
require	是否为必输字段	Boolean	–
disabled	值是 true 或者 disabled 则为反显值，否则为输入值	Boolean	false
prefixUnit	输入值前缀,比如输入值表示收入1000。加个前缀 “￥”，则输入值为“￥1000”	String	–
suffixUnit	输入值后缀,比如输入值表示人口1000。加个后缀 “万”，则输入值为“1000万”	String	–
item	对应的字段值集合	Object	{}
width	固定左边文本展示的宽度	String	–

四、源代码

List.vue
文件路径：share/list/List.vue

<template>
  <div>
  <div v-for="(item,index) in list" @click="onRightClick(item)" class="cm-flex cm-ai-fs cm-jc-sb cm-p-02 cm-border-bottom-eee">
    <div class="cm-flex cm-ai-fs cm-flex-1 cm-mr-02">
      <div class="cm-fs-030 cm-mr-04" :style="getWidth()">
        <span class="cm-c-red cm-pt-01" v-if="item.require">*</span>{{item.label}}
      </div>
      <span class="cm-mr-02 cm-c-999 cm-flex-1" v-if="item.icon||item.disabled">
        <span v-if="item.prefixUnit">{{item.prefixUnit}}</span>
        {{result[item.field]}}
        <span v-if="item.suffixUnit">{{item.suffixUnit}}</span></span>
      <input type="text" v-model="result[item.field]" class="item-input" v-if="!item.icon&&!item.disabled">
    </div>
    <img :src="item.icon" alt="" class="cm-img-03" v-if="item.icon">
  </div>
  </div>
</template>
<script>
  export default {
    name: "ElList",
    data(){
      return{
      }
    },
    //获取子组件传过来的激活tab
    props:{
      list:{
        type: Array,
        default: function () {
          return [];
        }
      },
      result:{
        type:Object,
        default:{}
      },
      width:{
        type:String,
        default:""
      }
    },
    created(){

    },
    methods:{
      getWidth(){
        if(this.width){
            return "width:"+this.width
        }
      },
      onRightClick(item){
          if(item.onRightClick){
            item.onRightClick();
          }
      }
    }
  }
</script>

<style scoped>
  .item-input{
    height: 30px;
    font-size: 0.3rem;
    flex: 1;
    border: none;
    outline: none;
    background: #fff;
  }
</style>

index.js
文件路径：share/list/index.js

import List from './List.vue';

/* istanbul ignore next */
List.install = function(Vue) {
  Vue.component(List.name, List);
};

export default List;

注：里面用到一些公共样式，公共样式内容比较多，就不贴出来了。有需要的留言。