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;

注：裏面用到一些公共樣式，公共樣式內容比較多，就不貼出來了。有需要的留言。