一、Content 列表

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

效果展示：

实现的功能：

在一个 List 中实现文本和输入框(单行/多行)的上下布局；
上面为文本 label 标签，纯文字展示。可通过 require 字段来判断是否必填，必填项则前面会有红色的 *。
下面为输入值 input/textarea 标签。

二、使用案例

<template><div><el-context:list="contentList"        :result="contentItem"        /></div>
</template>
<script>
export default {data(){return {contentList:[{title:"工作内容",require:true,field:"content",placeholder:'请输入工作内容。如休假请填休假（240字以内）',renderType:'textarea',maxLength:"240"},{title:"时长",require:true,field:"time",placeholder:'请输入小时数，保留一位小数。如休假请填0',renderType:'number'},{title:"备注",require:false,field:"remark",placeholder:'请输入备注（240字以内）',renderType:'textarea',maxLength:"240",dealWithKeyboard:true},],contentItem:{content:'',time:'',remark:'',},}}
}
</script>

三、API 使用指南

属性	说明	类型	默认值
list	页面展示的静态内容集合	Array	[]
renderType	组件类型	String	–
maxLength	最大长度限制	String	–
label	展示文本	String	–
field	输入值字段	String	–
placeholder	提示	String	–
require	是否为必输字段	Boolean	–
disabled	值是 true 或者 disabled 则为反显值，否则为输入值	Boolean	false
dealWithKeyboard	是否要处理安卓键盘遮挡问题	Boolean	false
result	对应的字段值集合	Object	{}

四、源代码

Context.vue
文件路径：share/context/Context.vue

<template><div><div v-for="item in list"><div class="cm-p-02 cm-bottom"><div class="cm-fs-030"><span class="cm-c-red" v-if="item.require">*</span><span :class="[focusText==item.field?'edit-focus-text':'',!item.require?'cm-ml-02':'']">{{item.title}}</span></div><el-inputv-if="item.renderType==='number'"@focus="changeStyle(item)"type="text"@input.native="changeNumber":placeholder="item.placeholder"class="edit-input cm-w-full cm-fs-028 cm-c-333"v-model="result[item.field]"></el-input><el-input:type="item.renderType"v-else@focus="changeStyle(item)":autosize="{ minRows: 2, maxRows: 4}":maxlength="item.maxLength"class="edit-input cm-w-full cm-fs-028 cm-c-333":placeholder="item.placeholder"rows="2"v-model="result[item.field]"></el-input></div></div></div>
</template>
<script>import {autoTextarea,isAndroid} from '../../utils/common';export default {name: "ElContent",data(){return{focusText:""}},//获取子组件传过来的激活tabprops:{list:{type: Array,default: function () {return [];}},result:{type:Object,default:{}},},mounted(){//为了适应苹果浏览器初始时展现多行状态。setTimeout(() => {autoTextarea();}, 100);},methods:{changeNumber({target}){//此为数字输入框，控制非数字输入target.value=(target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || null},changeStyle(item){//聚焦时改变label样式this.focusText = item.field;//避免安卓手机输入法弹出框挡住输入框if(item.dealWithKeyboard && isAndroid()){document.body.style.height = document.body.clientHeight + 100 +'px';}}}}
</script><style scoped>.edit-focus-text{color: #3296FA;font-size: 0.22rem;}
</style>

export function isAndroid(){var u = navigator.userAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端if (isAndroid) {return true}else {return false}
}
export function autoTextarea(){var textarea = document.getElementsByTagName("textarea");for(var i=0;i<textarea.length;i++){textarea[i].style.height = 'auto';textarea[i].scrollTop = 0; //防抖动textarea[i].style.height = textarea[i].scrollHeight + 'px';textarea[i].addEventListener('input',function (e) {console.log(e.target.scrollHeight);e.target.style.height = 'auto';e.target.scrollTop = 0;if(e.target.scrollHeight>=100){//控制最高4行e.target.style.height = 100 + 'px';}else {e.target.style.height = e.target.scrollHeight + 'px';}//}})}
}

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

import Content from './Content.vue';/* istanbul ignore next */
Content.install = function(Vue) {Vue.component(Content.name, Content);
};export default Content;

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

Vue 组件封装之 Content 列表(处理多行输入框 textarea)相关推荐

Vue 组件封装之 List 列表
Vue 组件封装之 List 列表一.List 列表二.使用案例三.API 使用指南四.源代码一.List 列表组件说明: 实现 List 列表布局排版. 效果展示: 实现的功能: 在一个 ...
Vue 组件封装之 Carousel 轮播图
Vue 组件封装之 Carousel 轮播图一.Carousel 轮播图组件二.使用案例三.API 使用指南四.源代码一.Carousel 轮播图组件组件说明: 实现无缝轮播. 效果展示: ...
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 组件封装之 Content 列表(处理多行输入框 textarea)

Vue 组件封装之 Content 列表

一、Content 列表

二、使用案例

三、API 使用指南

四、源代码

Vue 组件封装之 Content 列表(处理多行输入框 textarea)相关推荐

最新文章

热门文章