vue-area-linkage 省市区Vue组件

叁歲伎倆 2022-05-17 13:09 81阅读 0赞

*   *   *  场景
         *  组件
         *  安装
         *  例子

### 场景 ###

*  一般的站点都会用到的，eg:标记某个用户的地址属性

### 组件 ###

*  [dwqs/vue-area-linkage][dwqs_vue-area-linkage]
 *  使用方法是简单的,github有很详细的用例

### 安装 ###

*  npm i –save-dev vue-area-linkage area-data  
    
    
     *  area-data组件提供数据（`不建议全局注册这个`）

### 例子 ###

*  下面是一个省市区三级联动案列

<template>
        <div>
            <sweet-modal :icon="icon_type" ref="modal_prompt" overlay-theme="light" modal-theme="dark">
                <p style="white-space: pre-line">{
       { msg_prompt }}</p>
                <button v-on:click="closeModel()" class="btn btn-primary pull-right">确认</button>
            </sweet-modal>
            <form class="form-horizontal" @submit.stop.prevent="update">
                <div class="form-group">
                    <label class="col-sm-2 control-label">现居地址</label>
                    <div class="col-sm-10">
                        // 组件
    <area-select :level="level" :placeholders="placeholder" type="text" v-model='area' :data="data"></area-select>
    ------------------------------------------------------------------------
    
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">个人简介</label>
                    <div class="col-sm-10">
                        <textarea v-model="profile" class="form-control"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <button class="btn btn-primary btn-sm pull-right btn-margin" type="submit">更新资料</button>
                </div>
            </form>
        </div>
    </template>
    
    <script> import { SweetModal, SweetModalTab } from 'sweet-modal-vue'; import {pca, pcaa} from 'area-data'; export default { name: "UserSetting", props: ['settings'], data: function () { return { icon_type : 'success', redirect_url :'', msg_prompt : '', level: 2, area: [], placeholder: ['选择省', '选择市', '选择区'], profile: '', selected: [] } }, mounted : function(){ this.initParams(); }, methods : { closeModel: function(){ this.$refs.modal_prompt.close(); if (this.redirect_url) { let vm = this; setTimeout(function(){ window.location.replace(vm.redirect_url); }, 500); } }, initParams: function(){ console.log(this.settings, typeof this.settings); let settings = JSON.parse(this.settings); console.log(settings, typeof settings); this.profile = settings.bio; this.area = settings.area ? settings.area : []; }, update : function(){ let url = '/api/setting'; let params = { bio : this.profile, area : this.area }; this.$http.post(url, params, {responseType: 'json'}).then(function (response) { console.log(response); if (response.body.status === 0) { this.msg_prompt = '更新配置成功！'; this.redirect_url = '/'; this.$refs.modal_prompt.open(); } else { this.msg_prompt = '更新配置失败！'; this.icon_type = 'error'; this.$refs.modal_prompt.open(); } }); } }, computed: { data: function () { return pcaa; } } } </script>
    
    <style scoped> .btn-margin { margin-right: 1%; } </style>

[dwqs_vue-area-linkage]: https://github.com/dwqs/vue-area-linkage