频道栏目
首页 > 资讯 > HTML/CSS > 正文

vue+mintui+省市区三级联动(编辑地址)效果实现

17-09-07        来源:[db:作者]  
收藏   我要投稿

先去下载一个“省份、城市、区县” 三级联动数据

存为json引入页面

import s from '../../components/address.json';

html使用mint ui中的 mt-field以及mt-popup,点击所在地区,上选框出现。

>


    

组件使用方法

<script>
import s from '../../components/address.json';
import { Toast,Indicator,MessageBox } from 'mint-ui';

export default {
    data(){
        return{
            address_id:'',
            city:'',
            address:'',
            name:'',
            mobile:'',
            city:"请选择区域",
            popupVisible:false,
            addressSlots: [
                {
                    flex: 1,
                    defaultIndex: 1,
                    values: Object.keys(s),
                    className: 'slot1',
                    textAlign: 'center'
                }, {
                    divider: true,
                    content: '-',
                    className: 'slot2'
                }, {
                    flex: 1,
                    values: [],
                    className: 'slot3',
                    textAlign: 'center'
                }, {
                    divider: true,
                    content: '-',
                    className: 'slot4'
                }, {
                    flex: 1,
                    values: [],
                    className: 'slot5',
                    textAlign: 'center'
                }
            ],
            addressProvince: '省',
            addressCity: '市',
            addressXian:'区',
        }
    },
    methods:{
    //获取地区列表
      getAreaList : function(){
            getAreaList().then(response =>{
                let code = response["code"];
                if(code == "200"){
                    var length = response['areaList'].length;
                    this.area_vals = [];
                    this.area_ids = [];
                    for(var i=0;i{
                Indicator.close();
                let code = response["code"];
                if(code == "200"){
                    this.$router.push('/manageadress');
                }else{
                    Toast({message: response["message"],position: 'bottom',duration: 1000});
                }
            })
        },
        //删除地址
        deleteAddress(item){
            Indicator.open();
            var params = new URLSearchParams();
            params.append('address_id', this.address_id);
            deleteAddress(params).then(response =>{
                Indicator.close();
                let code = response["code"];
                if(code == "200"){
                    this.$router.push('/manageadress');
                }else{
                    Toast({message: response["message"],position: 'bottom',duration: 1000});
                }
            })
        },
        delAddress(item){
            MessageBox.confirm('确定要删除此地址?')
            .then(action => {
                this.deleteAddress(item);
            }).catch(err => {
            });
        }
    },
    mounted(){
    //获取编辑前的信息
        this.address_id = this.$route.query.address_id;
        this.city = this.$route.query.city;
        this.address = this.$route.query.address;
        this.name = this.$route.query.name;
        this.mobile = this.$route.query.mobile;

    },
}
</script>

效果

这里写图片描述

相关TAG标签
上一篇:vuemint-uitabbar变组件使用
下一篇:HTML中       等6种空白空格的区别
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站