国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網首頁
  2. >Toy博客

前端Vue自定義簡單通用省市區(qū)選擇器picker地區(qū)選擇器picker 收獲地址界面模版

1年前作者：前端組件開發(fā)分類：Toy博客閱讀(24)違法舉報

這篇具有很好參考價值的文章主要介紹了前端Vue自定義簡單通用省市區(qū)選擇器picker地區(qū)選擇器picker 收獲地址界面模版。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

隨著技術的發(fā)展，開發(fā)的復雜度也越來越高，傳統(tǒng)開發(fā)方式將一個系統(tǒng)做成了整塊應用，經常出現(xiàn)的情況就是一個小小的改動或者一個小功能的增加可能會引起整體邏輯的修改，造成牽一發(fā)而動全身。通過組件化開發(fā)，可以有效實現(xiàn)單獨開發(fā)，單獨維護，而且他們之間可以隨意的進行組合。大大提升開發(fā)效率低，降低維護成本。

組件化對于任何一個業(yè)務場景復雜的前端應用以及經過多次迭代之后的產品來說都是必經之路。組件化要做的不僅僅是表面上看到的模塊拆分解耦，其背后還有很多工作來支撐組件化的進行，例如結合業(yè)務特性的模塊拆分策略、模塊間的交互方式和構建系統(tǒng)等等 。

本文給大家介紹的一款組件是：前端Vue自定義簡單通用省市區(qū)選擇器picker地區(qū)選擇器picker 收獲地址界面模版，

效果圖如下:

省市區(qū)選擇器,vue.js,前端,javascript,前端框架,ecmascript,html5,uni-app

省市區(qū)選擇器,vue.js,前端,javascript,前端框架,ecmascript,html5,uni-app

省市區(qū)選擇器,vue.js,前端,javascript,前端框架,ecmascript,html5,uni-app

代碼實現(xiàn)如下：

# cc-selectDity

#### 使用方法

```使用方法

<!-- 省市區(qū)選擇 show:是否顯示? @sureSelectArea：確認事件 @hideShow：隱藏事件-->

<cc-selectDity :show="show" @sureSelectArea="onsetCity" @hideShow="onhideShow"></cc-selectDity>

main.js文件設置全局函數

Vue.mixin({

methods: {

setData: function(obj, callback) {

let that = this;

const handleData = (tepData, tepKey, afterKey) => {

tepKey = tepKey.split('.');

tepKey.forEach(item => {

if (tepData[item] === null || tepData[item] === undefined) {

let reg = /^[0-9]+$/;

tepData[item] = reg.test(afterKey) ? [] : {};

tepData = tepData[item];

} else {

tepData = tepData[item];

}

});

return tepData;

};

const isFn = function(value) {

return typeof value == 'function' || false;

};

Object.keys(obj).forEach(function(key) {

let val = obj[key];

key = key.replace(/\]/g, '').replace(/\[/g, '.');

let front, after;

let index_after = key.lastIndexOf('.');

if (index_after != -1) {

after = key.slice(index_after + 1);

front = handleData(that, key.slice(0, index_after), after);

} else {

after = key;

front = that;

}

if (front.$data && front.$data[after] === undefined) {

Object.defineProperty(front, after, {

get() {

return front.$data[after];

},

set(newValue) {

front.$data[after] = newValue;

that.$forceUpdate();

},

enumerable: true,

configurable: true

});

front[after] = val;

} else {

that.$set(front, after, val);

}

});

isFn(callback) && this.$nextTick(callback);

}

}

});

```

#### HTML代碼實現(xiàn)部分

```html

<template>

<view>

<view class="editaddress">

<view class="content">

<view class="row">

<view class="nominal">收件人</view>

<view class="input"><input placeholder="請輸入收件人姓名" v-model="addressData.name" type="text"></input>

</view>

</view>

<view class="row">

<view class="nominal">電話號碼</view>

<view class="input"><input placeholder="請輸入收件人電話號碼" v-model="addressData.phone" type="number"

maxlength="11"></input></view>

</view>

<view class="row">

<view class="nominal">所在地區(qū)</view>

<view class="input selectcity" @tap="openPicker">

<input placeholder="請選擇省市區(qū)" disabled type="text" v-model="addressData.address"></input>

<image src="/static/images/home/right.png" class="rights"></image>

</view>

</view>

<view class="row">

<view class="nominal">詳細地址</view>

<view class="input"><textarea style="font-size: 28upx;" v-model="addressData.moreAddres"

auto-height="true" placeholder="輸入詳細地址" v-if="show == false"></textarea></view>

</view>

<view class="row">

<view class="nominal" style="color: #999;margin-top: 10upx;">設為默認地址</view>

<view class="input switch">

<switch :color="colors" style="transform:scale(0.8)" @change="switchChange"

:checked="addressData.isdefult == 1"></switch>

</view>

</view>

</view>

<view class="save">

<view class="btn" :style="'background:' + colors">保存地址</view>

</view>

<!-- 省市區(qū)選擇 show:是否顯示? @sureSelectArea：確認事件 @hideShow：隱藏事件-->

<cc-selectDity :show="show" @sureSelectArea="onsetCity" @hideShow="onhideShow"></cc-selectDity>

</view>

</view>

</template>

<script>

var app = getApp();

export default {

data() {

return {

colors: '',

show: false,

addressData: {

name: '',

phone: '',

address: '',

moreAddres: '',

isdefult: 0

},

isShow: true

};

},

components: {

},

props: {},

/**

* 生命周期函數--監(jiān)聽頁面加載

*/

onLoad: function(options) {

},

/**

* 生命周期函數--監(jiān)聽頁面初次渲染完成

*/

onReady: function() {},

/**

* 生命周期函數--監(jiān)聽頁面顯示

*/

onShow: function() {},

/**

* 生命周期函數--監(jiān)聽頁面隱藏

*/

onHide: function() {},

/**

* 生命周期函數--監(jiān)聽頁面卸載

*/

onUnload: function() {},

/**

* 頁面相關事件處理函數--監(jiān)聽用戶下拉動作

*/

onPullDownRefresh: function() {},

/**

* 頁面上拉觸底事件的處理函數

*/

onReachBottom: function() {},

/**

* 用戶點擊右上角分享

*/

onShareAppMessage: function() {},

methods: {

openPicker() {

console.log('執(zhí)行')

this.show = true

},

onhideShow() {

this.show = false

console.log('執(zhí)行了')

},

onsetCity(e) { //選中省市區(qū)

let data = e.detail.target.dataset;

let address = data.province + data.city + data.area;

this.show = false

this.addressData.address = address

},

switchChange(e) {

this.setData({

checked: e.detail.value

});

}

}

};

</script>

<style lang="scss" scoped>

.save {

position: fixed;

bottom: 0;

width: 100%;

height: 120upx;

display: flex;

justify-content: center;

align-items: center;

}

.save view {

display: flex;

}

.save .btn {

box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);

width: 70%;

height: 80upx;

border-radius: 80upx;

background-color: #f23a3a;

color: #fff;

justify-content: center;

align-items: center;

font-size: 30upx;

margin-bottom: 60px;

}

.save .btn .icon {

height: 80upx;

color: #fff;

font-size: 30upx;

justify-content: center;

align-items: center;

}

.content {

display: flex;

flex-wrap: wrap;

margin-top: 40upx;

}

.content view {

display: flex;

}

.content .row {

width: 92%;

margin: 0 4%;

border-bottom: solid 1upx #eee;

}

.content .row .nominal {

width: 30%;

height: 80upx;

font-size: 28upx;

font-family: Droid Sans Fallback;

font-weight: 400;

color: rgba(51, 51, 51, 1);

align-items: center;

}

.content .row .input {

width: 70%;

padding: 20upx 0;

align-items: center;

font-size: 28upx;

}

.content .row .input input {

font-size: 28upx;

color: #333333;

}

.content .row .switch {

justify-content: flex-end;

}

.content .row .input textarea {

min-height: 40upx;

line-height: 40upx;

}

.content .del_box {

width: 100%;

display: block;

overflow: hidden;

margin-right: 30upx;

}

.content .del {

width: 240upx;

height: 80upx;

float: right;

justify-content: center;

align-items: center;

font-size: 28upx;

color: #F23A3A;

margin: 0 auto;

margin-top: 50upx;

border-radius: 38upx;

background-color: rgba(255, 0, 0, 0.05);

border-bottom: solid 1upx #eee;

}

.selectcity input {

width: 90%;

}

.selectcity image {

width: 40upx;

height: 40upx;

float: right;

}

</style>

```

?閱讀全文下載完整組件代碼請關注微信公眾號： 前端組件開發(fā)

省市區(qū)選擇器,vue.js,前端,javascript,前端框架,ecmascript,html5,uni-app文章來源地址http://www.zghlxwxcb.cn/news/detail-688726.html

到了這里，關于前端Vue自定義簡單通用省市區(qū)選擇器picker地區(qū)選擇器picker 收獲地址界面模版的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！

本文來自互聯(lián)網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如若轉載，請注明出處： 如若內容造成侵權/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經查實，立即刪除！

領支付寶紅包贊助服務器費用

相關文章

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領取紅包，優(yōu)惠每天領

二維碼1

領取紅包

二維碼2

領紅包