# cc-city-picker 中国省市区三级联动选择器picker 选择地址组件模版 ### 我的技术公众号(关注私信可加前端技术交流群) 群内气氛挺不错的,应该或许可能大概,算是为数不多的,专搞技术的前端群,偶尔聊天摸鱼  #### 使用方法 ```使用方法 <!-- themeColor:主题颜色 ref:设置唯一ref pickerValueDefault:默认选择 @onCancel:取消事件 @onConfirm:确认事件 --> <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"> <!-- leftTitle:左边标题 name:输入框名字 value:输入框选择值 placeholder:占位符 @click:点击事件--> <ccInputSelView leftTitle="收获地址" name="location" :value="pickerText" placeholder="请选择位置" @click="showMulLinkageThreePicker"></ccInputSelView> <ccInputView leftTitle="详细地址" name="address" :value="address" placeholder="请输入详细地址"> </ccInputView> <!-- themeColor:主题颜色 ref:设置唯一ref pickerValueDefault:默认选择 @onCancel:取消事件 @onConfirm:确认事件 --> <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> ```