隨著技術(shù)的發(fā)展，開(kāi)發(fā)的復(fù)雜度也越來(lái)越高，傳統(tǒng)開(kāi)發(fā)方式將一個(gè)系統(tǒng)做成了整塊應(yīng)用，經(jīng)常出現(xiàn)的情況就是一個(gè)小小的改動(dòng)或者一個(gè)小功能的增加可能會(huì)引起整體邏輯的修改，造成牽一發(fā)而動(dòng)全身。通過(guò)組件化開(kāi)發(fā)，可以有效實(shí)現(xiàn)單獨(dú)開(kāi)發(fā)，單獨(dú)維護(hù)，而且他們之間可以隨意的進(jìn)行組合。大大提升開(kāi)發(fā)效率低，降低維護(hù)成本。
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-764799.html
組件化對(duì)于任何一個(gè)業(yè)務(wù)場(chǎng)景復(fù)雜的前端應(yīng)用以及經(jīng)過(guò)多次迭代之后的產(chǎn)品來(lái)說(shuō)都是必經(jīng)之路。組件化要做的不僅僅是表面上看到的模塊拆分解耦，其背后還有很多工作來(lái)支撐組件化的進(jìn)行，例如結(jié)合業(yè)務(wù)特性的模塊拆分策略、模塊間的交互方式和構(gòu)建系統(tǒng)等等 。
?文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-764799.html
本文給大家介紹的一款組件是：
前端vue uni-app基于原生input組件的增強(qiáng)簡(jiǎn)單通用實(shí)用輸入框，
效果圖如下:
?
實(shí)現(xiàn)代碼如下：
# 前端基于原生input組件的增強(qiáng)簡(jiǎn)單通用實(shí)用輸入框
#### 使用方法
```使用方法
<!-- leftTitle：左邊標(biāo)題 name：輸入框名字? value：輸入框值? placeholder:占位符 -->
<ccInputView leftTitle="姓名" name="name" value="" placeholder="請(qǐng)輸入姓名"></ccInputView>
```
#### HTML代碼部分
```html
<template>
<view class="content">
<form @submit="formSubmit" @reset="formReset">
<!-- leftTitle：左邊標(biāo)題 name：輸入框名字? value：輸入框值? placeholder:占位符 -->
<ccInputView leftTitle="姓名" name="name" value="" placeholder="請(qǐng)輸入姓名"></ccInputView>
<!-- leftTitle：左邊標(biāo)題 name：輸入框名字? value：輸入框值? placeholder:占位符 -->
<ccInputView leftTitle="手機(jī)號(hào)" name="phone" value="" placeholder="請(qǐng)輸入手機(jī)號(hào)"></ccInputView>
? ? <ccInputView leftTitle="住址" name="address" value="" placeholder="請(qǐng)輸入地址"></ccInputView>
<ccInputView leftTitle="愛(ài)好" name="interest" value="" placeholder="請(qǐng)輸入愛(ài)好"></ccInputView>
<view class="uni-btn-v">
<button class="botBtn" type="primary" form-type="submit">下一步</button>
<view class="tipText"> 注意事項(xiàng): 請(qǐng)確保您填寫的信息真實(shí)無(wú)誤 </view>
</view>
</form>
</view>
</template>
```
#### JS代碼 （引入組件 填充數(shù)據(jù)）
```javascript
<script>
import ccInputView from '../../components/ccInputView.vue'
export default {
components:{
ccInputView
},
data() {
return {
}
},
methods: {
formSubmit: function(e) {
? ? console.log('form發(fā)生了submit事件，攜帶數(shù)據(jù)為：' + JSON.stringify(e));
? ? var formdata = e.detail.value;
uni.showModal({
title:'溫馨提示',
content:'formsubmit事件攜帶數(shù)據(jù)為：' + JSON.stringify(e.detail.value)
})
},
towardPickerChange: function(e) {
this.towardIndex = e.target.value;
console.log(e.target.value);
},
floorPickerChange: function(e) {
this.floorIndex = e.target.value;
console.log(e.target.value);
},
liftPickerChange: function(e) {
this.liftIndex = e.target.value;
console.log(e.target.value);
},
decoratePickerChange: function(e) {
this.decorateIndex = e.target.value;
console.log(e.target.value);
},
}
}
</script>
```
#### CSS
```CSS
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.uni-btn-v{
width: 100%;
height: auto;
}
.botBtn {
width: 90%;
margin-top: 36px;
}
.tipText {
width: 100%;
margin-left: 0px;
text-align: center;
color: #666666;
margin-top: 36px;
margin-bottom: 36px;
font-size: 28rpx;
}
</style>
```
閱讀全文下載完整組件代碼請(qǐng)關(guān)注微信公眾號(hào)： 前端組件開(kāi)發(fā)
?
?
到了這里，關(guān)于前端vue uni-app基于原生input組件的增強(qiáng)簡(jiǎn)單通用實(shí)用輸入框的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
