一、List 列表

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

效果展示：

实现的功能：

在一个 List 中实现左中右三栏布局；
左边为文本 label 标签，纯文字展示。可通过 require 字段来判断是否必填，必填项则前面会有红色的 *。
中间为输入值 input 标签。
右边为图标 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	–
result	对应的字段值集合	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{}},//获取子组件传过来的激活tabprops:{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;

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

Vue 组件封装之 List 列表相关推荐

Vue 组件封装之 Content 列表(处理多行输入框 textarea)
Vue 组件封装之 Content 列表一.Content 列表二.使用案例三.API 使用指南四.源代码一.Content 列表组件说明: 实现 Content 列表布局排版. 效果展示 ...
vue组件封装技巧，如何对vue模块进行功能封装
如何对vue模块进行功能封装,vue组件封装技巧当业务不断累加,导致原本干净整洁的代码越来越冗余,各种变量和注释已经让他人望而却步,往往又苦于重构带来的成本,导致诞生很多巨石应用.与其让自己或他人面 ...
Vue 组件封装之 ScrollView 上拉加载更多
Vue 组件封装之 ScrollView 上拉加载更多一.ScrollView 上拉加载更多二.使用案例三.API 使用指南四.源代码一.ScrollView 上拉加载更多组件说明: 实现 ...
Vue 组件封装之 Questionnaire 问卷调查
Vue 组件封装之 Questionnaire 问卷调查前言一.Questionnaire 组件二.使用案例三.API 使用指南四.源代码前言问卷调查表也是目前前端比较常见的开发项目,目 ...
Vue 组件封装之 Search 搜索
Vue 组件封装之 Search 搜索一.Search 组件二.使用案例三.API 使用指南四.源代码一.Search 组件组件说明: 实现搜索功能. 效果展示: input 输入框背景铺 ...
Vue组件封装，（面试回答）
在我用vue开发项目的时候,一般我都会用到组件封装,采用组件化的思想进行项目开发,我在搭建一个项目的时候,就会创建一个views目录和一个commen目录和一个feature目录,views目录中放页 ...
Vue 组件封装之 Tab 切换
Vue 组件封装之 tab 切换一.Tab 切换组件二.使用案例三.API 使用指南四.源代码五.总结一.Tab 切换组件组件说明: 实现 tab 切换. 效果展示: 实现 tab 切换 ...
Vue组件封装的过程
Vue组件封装的过程 vue组件的定义组件(Component)是Vue.js最强大的功能之一组件可以扩展HTML元素,封装可重用代码在较高层面上,组件是自定义元素,Vue.js的编译器为他添加 ...
Vue 组件封装、组件传值、数据修改
Vue 组件封装封装的意义当一个页面元素过多或者一个组件在多个页面都会被使用,就可以进行组件封装,可以对单个页面解耦,增加代码的可读性,并且多次使用的组件方便修改,只用修改一个地方就能对用到这个组 ...

Vue 组件封装之 List 列表

Vue 组件封装之 List 列表

一、List 列表

二、使用案例

三、API 使用指南

四、源代码

Vue 组件封装之 List 列表相关推荐

最新文章

热门文章