Vue 组件封装之 List 列表

绝地灬酷狼 2023-02-18 04:30 1阅读 0赞

### Vue 组件封装之 List 列表 ###

*  一、List 列表
 *  二、使用案例
 *  三、API 使用指南
 *  四、源代码

# 一、List 列表 #

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

**效果展示：**

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

**实现的功能：**

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 使用指南 #

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

# 四、源代码 #

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;

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200616113404784.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ==,size_16,color_FFFFFF,t_70