Vue 组件封装之 List 列表

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

Vue 组件封装之 List 列表

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

一、List 列表

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

效果展示：

在这里插入图片描述

实现的功能：

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

二、使用案例

  1. <template>
  2.      <div>
  3.      <el-list
  4.           :list="textList"        
  5.           :result="item"
  6.            width="80px"
  7.         />
  8.       </div>
  9. </template>
  10. <script>
  11. import address from '../assets/address.png';
  12. import right from '../assets/right.png';
  13. export default { 
  14.   data(){ 
  15.      return { 
  16.      textList:[
  17.           { label:"地址",field:"address",icon:address,require:true,onRightClick:this.choseAddress},
  18.           { label:"学历",field:"education",icon:right,require:true,onRightClick:this.choseEducation},
  19.           { label:"电话",field:"telephone",require:true},
  20.           { label:"人口",field:"population",disabled:true,require:true,suffixUnit:"万"},
  21.           { label:"收入",field:"income",require:true,prefixUnit:"$"},
  22.           { label:"网址",field:"website"},
  23.         ],
  24.         item:{ 
  25.           address:"",
  26.           education:"",
  27.           telephone:"",
  28.           population:"1000",
  29.           income:"200",
  30.           website:"",
  31.         },
  32.     }
  33.   }
  34.   methods: { 
  35.       choseAddress(){       
  36.           this.item.address="上海市浦东新区";
  37.       },
  38.       choseEducation(){ 
  39.        this.item.education="本科";
  40.       },
  41.   }
  42. }
  43. </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 –
result 对应的字段值集合 Object {}
width 固定左边文本展示的宽度 String –

四、源代码

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

  1. <template>
  2.   <div>
  3.   <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">
  4.     <div class="cm-flex cm-ai-fs cm-flex-1 cm-mr-02">
  5.       <div class="cm-fs-030 cm-mr-04" :style="getWidth()">
  6.         <span class="cm-c-red cm-pt-01" v-if="item.require">*</span>{ { item.label}}
  7.       </div>
  8.       <span class="cm-mr-02 cm-c-999 cm-flex-1" v-if="item.icon||item.disabled">
  9.         <span v-if="item.prefixUnit">{ { item.prefixUnit}}</span>
  10.         { { result[item.field]}}
  11.         <span v-if="item.suffixUnit">{ { item.suffixUnit}}</span></span>
  12.       <input type="text" v-model="result[item.field]" class="item-input" v-if="!item.icon&&!item.disabled">
  13.     </div>
  14.     <img :src="item.icon" alt="" class="cm-img-03" v-if="item.icon">
  15.   </div>
  16.   </div>
  17. </template>
  18. <script>
  19.   export default { 
  20.     name: "ElList",
  21.     data(){ 
  22.       return{ 
  23.       }
  24.     },
  25.     //获取子组件传过来的激活tab
  26.     props:{ 
  27.       list:{ 
  28.         type: Array,
  29.         default: function () { 
  30.           return [];
  31.         }
  32.       },
  33.       result:{ 
  34.         type:Object,
  35.         default:{ }
  36.       },
  37.       width:{ 
  38.         type:String,
  39.         default:""
  40.       }
  41.     },
  42.     created(){ 
  44.     },
  45.     methods:{ 
  46.       getWidth(){ 
  47.         if(this.width){ 
  48.             return "width:"+this.width
  49.         }
  50.       },
  51.       onRightClick(item){ 
  52.           if(item.onRightClick){ 
  53.             item.onRightClick();
  54.           }
  55.       }
  56.     }
  57.   }
  58. </script>
  60. <style scoped>
  61.   .item-input{ 
  62.     height: 30px;
  63.     font-size: 0.3rem;
  64.     flex: 1;
  65.     border: none;
  66.     outline: none;
  67.     background: #fff;
  68.   }
  69. </style>

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

  1. import List from './List.vue';
  3. /* istanbul ignore next */
  4. List.install = function(Vue) { 
  5.   Vue.component(List.name, List);
  6. };
  8. export default List;

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

发表评论

表情：
评论列表 （有 0 条评论，26人围观）

还没有评论，来说两句吧...

相关阅读

    相关 笔记本列表：Vue 组件

    前言 经过第 3 部分（7 到 18 篇）的开发工作，项目核心架构已经搭建完毕，尤其是服务端的架构已经可以实现新功能的快速实现，能节省大量服务端开发时间。 第 4 部分

    缺乏、安全感缺乏、安全感/ 0 赞/ 153 阅读