前端Vue自定义简单实用中国省市区三级联动选择器

置顶前端组件开发

已于 2024-03-17 07:40:05 修改

阅读量2k

点赞数 1

文章标签：前端 vue.js javascript uni-app 前端框架 html5

于 2023-06-20 09:25:36 首次发布

本文链接：https://blog.csdn.net/chenchuang0128/article/details/131299974

版权

随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。

组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦，其背后还有很多工作来支撑组件化的进行，例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等。

本文给大家介绍的组件是：前端Vue自定义简单实用中国省市区三级联动选择器，

效果图如下：

#### 使用方法

```使用方法

<cc-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"

@onCancel="onCancel" @onConfirm="onConfirm"></cc-city-picker>

```

#### HTML代码实现部分

```html

<template>

<view class="content">

<form @submit="formSubmit" @reset="formReset">



<ccInputSelView leftTitle="收获地址" name="location" :value="pickerText" placeholder="请选择位置"

@click="showMulLinkageThreePicker"></ccInputSelView>

<ccInputView leftTitle="详细地址" name="address" :value="address" placeholder="请输入详细地址">

</ccInputView>



<cc-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"

@onCancel="onCancel" @onConfirm="onConfirm"></cc-city-picker>

<view class="uni-btn-v">

<button class="botBtn" type="primary" form-type="submit">下一步</button>

<view class="tipText"> 注意事项: 请确保您填写的房屋信息真实无误 </view>

</view>

</form>

</view>

</template>

<script>

import ccInputSelView from '../../components/cc-inputSelView/ccInputSelView.vue'

import ccInputView from '../../components/cc-inputSelView/ccInputView.vue'

export default {

components: {

ccInputSelView,

ccInputView

},

data() {

return {

cityPickerValueDefault: [0, 0, 1],

themeColor: '#0BBBEF',

pickerText: '',

address: ''

}

},

methods: {

// 三级联动选择

showMulLinkageThreePicker() {

this.$refs.mpvueCityPicker.show()

},

onConfirm(e) {

this.pickerText = e.label

},

onCancel(e) {

console.log(e)

},

formSubmit: function(e) {

console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e));

var formdata = e.detail.value;

uni.showModal({

title: '温馨提示',

content: 'formsubmit事件携带数据为：' + JSON.stringify(e.detail.value)

})

},

}

}

</script>

<style>

.content {

display: flex;

flex-direction: column;

}

.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>