文檔:
https://distpicker.pigjian.com/
功能:vue端加載省.市.區(qū).
流程:
1.終端vue項(xiàng)目下,輸入命令
a. npm install v-distpicker --save
b. yarn add v-distpicker --save
上面兩個(gè)二選一,我當(dāng)時(shí)用a報(bào)錯(cuò),選擇的b指令;

2.引用插件
a.全局插件,寫(xiě)在main.js里面

import VDistpicker from 'v-distpicker'
Vue.component('v-distpicker', VDistpicker)

b.單頁(yè)面引用

import VDistpicker from 'v-distpicker'
    export default {
      components: { VDistpicker }
}

3.使用

<template>
    <v-distpicker></v-distpicker>
<template>

<script>
    import VDistpicker from 'v-distpicker'

    export default {
      components: { VDistpicker },
    }
</script>

4.案例:

  <div class="region-list">
      <v-distpicker type="mobile" @selected="show_modal"></v-distpicker>
  </div>

<script>
    import VDistpicker from 'v-distpicker'

    export default {
        components: {VDistpicker},
        data() {
            return {
                address: {},
                show: false
            }
        },
        //初始化
        created() {
        },
        methods: {
            is_show() {
                this.show = true
            },
            show_modal(data) {
                this.show = !this.show
                this.address.pca = data.province.value + ' ' + data.city.value + ' ' + data.area.value
                // console.log(this.address.pca)
            },
            storeAddress() {
                const data = {
                    name: this.address.name,
                    tel: this.address.tel,
                    pca: this.address.pca,
                    detail: this.address.detail,
                }
                this.axios.post(`/api/address/store`, data).then((res) => {
                    this.$router.push({name: 'address_list'})
                })
            }
        },
    }
</script>

細(xì)節(jié):

1. is_show是調(diào)出省市縣的選擇框,因?yàn)?code>show默認(rèn)是false,點(diǎn)擊is_show之后,變成true,搭配標(biāo)簽內(nèi)的v-if="show"
2. show_modal(data)是點(diǎn)擊之后,做了兩件事,第一件當(dāng)省,市,縣都選擇之后,關(guān)閉選擇框,第二件是將選擇的省,市,縣的value屬性拼接,然后賦值到this.address.pca用于下面新增或者編輯的時(shí)候調(diào)用,data是提交的值
3. storeAddress是點(diǎn)擊保存,將需要保存的數(shù)據(jù)賦值到data里面.然后傳給后端,后端拆分接收

public function store(Request $request)
    {
        $customer_id = auth('api')->user()->id;
        //將接收來(lái)的對(duì)象轉(zhuǎn)成數(shù)組
        $pca = explode(" ", $request->pca);
        Address::create([
            'customer_id' => $customer_id,
            'province' => $pca[0],
            'city' => $pca[1],
            'area' => $pca[2],
            'tel' => $request->tel,
            'detail' => $request->detail,
            'name' => $request->name,
        ]);
    }

init: function () {
     let id = this.$route.params.id       
     this.axios.get(`/api/address/edit/${id}`)
  .then((res) => {
     this.address = res.data.address
     this.address.pca = this.address.province + ' ' + this.address.city + ' ' + this.address.area
               })
            },

從列表頁(yè)面?zhèn)饕粋€(gè)地址id過(guò)來(lái),編輯頁(yè)面接收id,獲取edit頁(yè)面,后端寫(xiě)法
路由:Route::get('edit/{id}', 'AddressController@edit');
控制器:

public function edit($id)
    {
        $address = Address::find($id);
        return response()->json(compact('address'));
    }

b. 編輯頁(yè)面更新的時(shí)候,傳參data里面要帶id過(guò)去
后端路由:Route::put('update', 'AddressController@update');
控制器:

public function update(Request $request)
    {
        $pca = explode(" ", $request->pca);
        Address::where('id', $request->id)->update([
            'province' => $pca[0],
            'city' => $pca[1],
            'area' => $pca[2],
            'tel' => $request->tel,
            'detail' => $request->detail,
            'name' => $request->name,
        ]);
    }