vue插件开发-可拖动城市选择插件

插件通常用来为 Vue 添加全局功能

使用插件

通过 Vue 的全局方法 Vue.use() 使用，

当然，在使用这个方法之前，你的 Vue 实例 必须已经初始化完成

// 引入自定义chooseCity 提示框
import chooseCity from './plugin/chooseCity/index'
Vue.use(chooseCity)

实际案例：

返回数据格式：

{"data":[{"name":"北京","type":"leafNode","value":110000},{"name":"上海","type":"leafNode","value":310000},{"name":"天津","type":"leafNode","value":120000},{"name":"重庆","type":"leafNode","value":500000},{"name":"安徽","type":"next","value":340000},{"name":"福建","type":"next","value":350000},{"name":"甘肃","type":"next","value":620000},{"name":"广东","type":"next","value":440000},{"name":"广西","type":"next","value":450000},{"name":"贵州","type":"next","value":520000},{"name":"海南","type":"next","value":460000},{"name":"河北","type":"next","value":130000},{"name":"河南","type":"next","value":410000},{"name":"黑龙江","type":"next","value":230000},{"name":"湖北","type":"next","value":420000},{"name":"湖南","type":"next","value":430000},{"name":"吉林","type":"next","value":220000},{"name":"江苏","type":"next","value":320000},{"name":"江西","type":"next","value":360000},{"name":"辽宁","type":"next","value":210000},{"name":"内蒙古","type":"next","value":150000},{"name":"宁夏","type":"next","value":640000},{"name":"青海","type":"next","value":630000},{"name":"山东","type":"next","value":370000},{"name":"山西","type":"next","value":140000},{"name":"陕西","type":"next","value":610000},{"name":"四川","type":"next","value":510000},{"name":"西藏","type":"next","value":540000},{"name":"新疆","type":"next","value":650000},{"name":"云南","type":"next","value":530000},{"name":"浙江","type":"next","value":330000},{"name":"港澳台","type":"next","value":800000},{"name":"海外","type":"next","value":810000},{"name":"其它","type":"leafNode","value":999999}],"state":0,"status":"SUCCESS","statusCode":0}

模板部分

<template>
  <div class="chooseCity_warp" @click="closeCallBack(false,chooseCity)" id="chooseCity" v-if="show" >
        <div class="count el-dialog__header" @click.stop="" @mousedown="dowMos" @mouseup="upMos" @mousemove="move" >
            <div class="count_body">
                <!-- 头部展示区域 -->
                <div class="body_header" >
                    <div class="header_tip">{{config.title}}</div>
                    <div class="header_close"><span @click="closeCallBack(false,chooseCity)" class="close"></span></div>
                </div>
                <!-- 选中区域显示 -->
                <div class="body_cont">
                    <!-- 选中文案显示部分 -->
                    <div class="choose_cont">
                        <div class="title">已选择：</div>
                        <div class="choose_msg">
                            <div class="item" v-for="(item,index) in chooseCity" :key="index"><span class="text">{{item.name}}</span><span @click="clearCity(item)" class="delete"></span></div>
                        </div>
                    </div>
                    <!-- 选择省、市部分 -->
                    <div class="choose_list_header">
                        <div class="header_item">省份/直辖市</div>
                        <div class="header_item">城市</div>
                    </div>
                    <div class="choose_list">
                        <div class="choose_provinceList">
                            <div class="provinceList_item city_item" v-for="(itemPro,indexPro) in provinceList" :key="indexPro+'pro'"  @click="choosePro(itemPro)">
                                <div :class="{'proItem':itemPro.type != 'next','cityItem':itemPro.type == 'next','chooseActiveCity':chooseIds.includes(itemPro.value),'chooseActivePro':chooseProIds.includes(itemPro.value)}">{{itemPro.name}}</div>
                            </div>
                        </div>
                        <div class="cityList">
                            <div class="cityList_item city_item" v-for="(itemCit,indexCit) in cityList" :key="indexCit+'cit'" @click="chooseCit(itemCit)">
                                <div :class="{'proItem':itemCit.type != 'next','chooseActiveCity':chooseIds.includes(itemCit.value)}">{{itemCit.name}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 底部按钮区域 -->
                <div class="body_bot">
                    <span class="sure" v-if="config.r_btn && config.r_btn!=''"  @click="sureCallBack(true,config)">{{config.r_btn}}</span>
                    <span class="close" v-if="config.l_btn && config.l_btn!=''" @click="closeCallBack(false)">{{config.l_btn}}</span>
                </div>
                <!-- <div v-if="config.title !=''" class="confirm_header">
                    <slot name="confirm_header">{{config.title}}</slot>
                </div>
                <div class="confirm_body">
                        <div v-if="config.vnode && config.vnode!=''" v-html="config.vnode" > </div>
                        <span v-else>{{config.content}}</span>
                </div>
                <div class="confirm_footer">
                    <span class="sure" v-if="config.r_btn && config.r_btn!=''"  @click="sureCallBack(true)">{{config.r_btn}}</span>
                    <span class="close" v-if="config.l_btn && config.l_btn!=''" @click="closeCallBack(false)">{{config.l_btn}}</span>
                </div> -->
            </div>
        </div>
  </div>
</template>

<script>

export default {
  name: '',
  data() { 
    return {
        show: false,
        // 请求参数 0代表请求省级别 初始化 请求 一次
        cityParams:{
            parentId:'0'
        },
        chooseNum:1,
        proFlag:false,
        // 选中城市id集合
        chooseIds:[],
        // 选中省id集合
        chooseProIds:[],
        // 选中城市集合
        chooseCity:[],
        // 省集合
        provinceList:[],
        // 市集合
        cityList:[]
    }
  },
  props: {
      confirmOption:{
          type:Object,
          default:()=>{
              return {
                // 'title':'',
                // 'content':'',
                // 'r_btn':'继续',
                // 'l_btn':'取消',
              }
          }
      }
  },
  components:{
  },
  mounted() {
    //   console.log('this.config')
    //   console.log(this.config)
  },
  methods:{

  },
 }
</script>

<style scoped>
.chooseCity_warp{background-color: rgba(255, 255, 255, 0.5);position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;z-index: 1111;}
.chooseCity_warp .count{min-width: 560px;position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);background-color: #ffffff;border-radius: 4px;  border-radius: 10px;background-color: rgba(102,102,102,0.2);padding: 10px;}
.chooseCity_warp .count .count_body{background-color: #ffffff;}
.chooseCity_warp .count .count_body .body_header{background-color: #555b65;color: #fff;border-radius: 3px 3px 0 0;height: 27px;display: flex;align-items: center;padding-left: 10px;} 
.chooseCity_warp .count .count_body .body_header .header_tip{flex: 4;}
.chooseCity_warp .count .count_body .body_header .header_close{flex: 1;}
.chooseCity_warp .count .count_body .body_header .header_close .close{
    background: transparent url('../../assets/dialog_close.png') left top no-repeat;
    width: 19px;
    height: 19px;
    text-indent: -9999px;
    float: right;
    cursor: pointer;
    margin: 4px;
    overflow: hidden;
}
.chooseCity_warp .count .count_body .body_header .header_close .close:hover{
    background: transparent url('../../assets/dialog_close.png') left bottom no-repeat;
}
.chooseCity_warp .count .count_body .body_cont{padding: 15px;padding-bottom: 0px;}
.chooseCity_warp .count .count_body .body_cont .choose_cont{padding: 6px 0px;display: flex;align-items: center;}
.chooseCity_warp .count .count_body .body_cont .choose_cont .title{}
.chooseCity_warp .count .count_body .body_cont .choose_cont .choose_msg{display: flex;align-items: center;}
.chooseCity_warp .count .count_body .body_cont .choose_cont .choose_msg .item{
    background: transparent url('../../assets/pickpad.gif') no-repeat scroll left top;
    cursor: default;
    float: left;
    height: 20px;
    line-height: 20px;
    margin: 4px 2px;
    padding-left: 8px;
    padding-right: 20px;
    white-space: nowrap;
    color: #333;
}
.chooseCity_warp .count .count_body .body_cont .choose_cont .choose_msg .item .delete {
    background: url('../../assets/pickpad.gif') no-repeat scroll right top transparent;
    cursor: pointer;
    display: inline-block;
    height: 20px;
    margin-left: 6px;
    margin-right: -20px;
    text-indent: -99999px;
    width: 20px;
}
.chooseCity_warp .count .count_body .body_cont .choose_cont .choose_msg .item .delete:hover{
    background: url('../../assets/pickpad.gif') no-repeat scroll right bottom transparent;
}
.chooseCity_warp .count .count_body .body_cont .choose_cont .choose_msg .item .text{vertical-align: super;}
.chooseCity_warp .count .count_body .body_cont .choose_list {display: flex;border: 1px solid #d9d9d9;}
.chooseCity_warp .count .count_body .body_cont .choose_list_header {display: flex;border: 1px solid #d9d9d9;border-bottom: 0px solid #d9d9d9;border-right: 0px solid #d9d9d9;}
.chooseCity_warp .count .count_body .body_cont .choose_list_header .header_item {flex: 1; text-align: center;  color: #999999; background: #f5f5f5;    line-height: 34px;border-right: 1px solid #d9d9d9;}
.chooseCity_warp .count .count_body .body_cont .choose_list .choose_provinceList {flex: 1;height: 340px;overflow-y: scroll;}
.chooseCity_warp .count .count_body .body_cont .choose_list .cityList {flex: 1;height: 340px;overflow-y: scroll;}
.chooseCity_warp .count .count_body .body_cont .choose_list .city_item{ line-height: 34px;border-bottom: 1px solid #d9d9d9;}
.chooseCity_warp .count .count_body .body_cont .choose_list .proItem {
    padding: 0px 10px 0px 20px;
    background-image: url("data:image/IFf;base64,R0lGODlhFQAIAIABAP///wAAACH5BAEAAAEALAAAAAAVAAgAAAIXjH8AyJ3qolFLBviqpRPbTmkfKI6deRQAOw==");
}
.chooseCity_warp .count .count_body .body_cont .choose_list .proItem:hover {
    background: #e4f7f9 right center no-repeat;
    background-image: url("data:image/IFf;base64,R0lGODlhFQAIAIABAA+puwAAACH5BAEAAAEALAAAAAAVAAgAAAIXjH8AyJ3qolFLBviqpRPbTmkfKI6deRQAOw==");
}
.chooseCity_warp .count .count_body .body_cont .choose_list .cityItem{
    padding: 0px 10px 0px 20px;
    background-image: url("data:image/IFf;base64,R0lGODlhFQAIAIABAP///wAAACH5BAEAAAEALAAAAAAVAAgAAAIXjH8AyJ3qolFLBviqpRPbTmkfKI6deRQAOw==");
}
.chooseCity_warp .count .count_body .body_cont .choose_list .cityItem:hover {
    background: #e4f7f9 right center no-repeat;
    background-image: url("data:image/IFf;base64,R0lGODlhFAALAIABAA+puwAAACH5BAEAAAEALAAAAAAUAAsAAAIVRI6pauvbngxxumpZhlt3hG1hNmYFADs=");
}
.chooseCity_warp .count .count_body .body_cont .choose_list .chooseActiveCity{
    color: #fff;
    background: #0fa9bb right center no-repeat;
    background-image: url("data:image/IFf;base64,R0lGODlhFQAIAIABAP///wAAACH5BAEAAAEALAAAAAAVAAgAAAIXjH8AyJ3qolFLBviqpRPbTmkfKI6deRQAOw==")
}
.chooseCity_warp .count .count_body .body_cont .choose_list .chooseActiveCity:hover{
    color: #fff;
    background: #0fa9bb right center no-repeat;
    background-image: url("data:image/IFf;base64,R0lGODlhFQAIAIABAP///wAAACH5BAEAAAEALAAAAAAVAAgAAAIXjH8AyJ3qolFLBviqpRPbTmkfKI6deRQAOw==")
}
.chooseCity_warp .count .count_body .body_cont .choose_list .chooseActivePro{
    color: #fff;
    background: #0fa9bb right center no-repeat;
    background-image: url("data:image/IFf;base64,R0lGODlhFAALAIABAP///wAAACH5BAEAAAEALAAAAAAUAAsAAAIVRI6pauvbngxxumpZhlt3hG1hNmYFADs=")
}
.chooseCity_warp .count .count_body .body_cont .choose_list .chooseActivePro:hover{
    color: #fff;
    background: #0fa9bb right center no-repeat;
    background-image: url("data:image/IFf;base64,R0lGODlhFAALAIABAP///wAAACH5BAEAAAEALAAAAAAUAAsAAAIVRI6pauvbngxxumpZhlt3hG1hNmYFADs=")
}
.chooseCity_warp .count .count_body .body_bot {background-color: #f6f6f6;padding: 8px 20px 8px 0;text-align: right;}
.chooseCity_warp .count .count_body .body_bot .sure{color: #333;line-height: 26px;display: inline-block;height: 26px;padding: 2px 20px;border-radius: 4px;margin-right: 10px;background-color: #fee579;border: 1px solid #c6c6c6;cursor: pointer;}
.chooseCity_warp .count .count_body .body_bot .close{color: #333;line-height: 26px;display: inline-block;height: 26px;padding: 2px 20px;border-radius: 4px;background-color: #f8f8f8;border: 1px solid #c6c6c6;cursor: pointer;}
/* .chooseCity_warp .count .count_body .body_bot .close{color: #333;} */
/* .confirm_warp .count .confirm_header{text-align: center;}
.confirm_warp .count .confirm_body{padding: 20px;min-height: 40px;}
.confirm_warp .count .confirm_footer{padding: 20px;min-height: 40px;text-align: center;}
.confirm_warp .count .confirm_footer span{display: inline-block;font-size: 14px;padding: 4px 25px;cursor: pointer;border-radius: 2px;}
.confirm_warp .count .confirm_footer .sure{background-color: #E62679;color: #ffffff;}
.confirm_warp .count .confirm_footer .close{background-color: #ffffff;color: #E62679;border: 1px solid #E62679;padding: 3px 25px;margin-left: 20px;} */

</style>

逻辑部分

import chooseCity from './index.vue'
import { cityList } from '../../api/accountaudit/talentManagement'

import Vue from 'vue'
// import { isVNode } from 'element-ui/src/utils/vdom';
/*
 *    this.$lstchooseCity({
        title:'这是什么东西~',//标题
        chooseNum:1,//选中城市数量
        draco:false,//是否允许拖动
        proFlag: false,// 是否允许获取省级别
        chooseCity:[
            {
                name: "上海",
                type: "leafNode",
                value: 310000
            }
        ],// 选中城市 默认选中
        r_btn:'确定',//左侧按钮
        l_btn:'取消',//右侧按钮
        vnode:'<span>饿哦是内容区域</span>',//内容自定义部分
        content:"我也不知道这是什么东西啊！！！"//内容文本
      }).then(res=>{
          console.log(res)//点击按钮回调函数
      })
 */

let chooseCityIndex = {};

chooseCityIndex.install = function (Vue,options) {
    const confirmIndexConstructor = Vue.extend(chooseCity);

    // 生成一个该之类的实例
    const instance = new confirmIndexConstructor();
        // $_getCitylist(){
        //     cityList(this.cityParams).then((res) => {

        //     })
        // }

    Vue.prototype.$lstchooseCity = (config) => {
        // 这里 return 一个 Promise 
        // 在项目中使用的时候，就可以进行链式调用了~
        return new Promise((resolve,reject) => {
            instance.config = config;
            instance.chooseNum = config.chooseNum || 1;
            instance.draco = config.draco || true;
            instance.proFlag = config.proFlag || false;
            instance.chooseCity = [ ...config.chooseCityArrs ] || [];
            //instance.chooseCity = config.chooseCityArrs  || [];
            instance.show = true;
            instance.moseMove = false;
            instance.mosX = 0;
            instance.mosY = 0;
            let chooseCitArr = []
            // console.log(config)
            // 拖动
            instance.dowMos = (e) => {
                instance.moseMove = true;
                instance.mosX = e.clientX;
                instance.mosY = e.clientY;
            }
            instance.upMos = () => {instance.moseMove = false;}
            instance.move = (e) => {
                // console.log(e.target)
                if(!instance.draco){
                    return false;
                }
                if(!instance.moseMove){
                    return false;
                }
                // let odiv = e.target;        //获取目标元素
                const odiv = document.querySelector('.el-dialog__header') //获取目标元素
                // console.log(odiv)
                //算出鼠标相对元素的位置
                let disX = e.clientX - odiv.offsetLeft;
                let disY = e.clientY - odiv.offsetTop;
                // 计算出 移动的距离
                let mosx = e.clientX - instance.mosX;
                let mosy = e.clientY - instance.mosY;
                document.onmousemove = (e)=>{       //鼠标按下并移动的事件
                    //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                    // let left = e.clientX - disX;    
                    // let top = e.clientY - disY;
                    let left = odiv.offsetLeft  + mosx;    
                    let top = odiv.offsetTop + mosy;
                    //绑定元素位置到positionX和positionY上面
                    instance.mosX = e.clientX;
                    instance.mosY = e.clientY;
                    //移动当前元素
                    odiv.style.left = left + 'px';
                    odiv.style.top = top + 'px';
                };
                document.onmouseup = (e) => {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            // }  
            }
            instance.getCity = () => {
                instance.cityList = []
                cityList(instance.cityParams).then((res) => {
                    if(instance.cityParams.parentId == 0){
                        instance.provinceList = res.data;
                    }else{
                        instance.cityList = res.data;
                    }
                })
            }
            
            // 获取当前选中城市 id集合
            instance.getCityIds = () => {
                instance.chooseIds = [];
                instance.chooseCity.forEach((ele) => {
                    instance.chooseIds.push(ele.value)
                })
            }
            // 初始化 获取城市 省级别获取后再次打开不在请求接口
            if(instance.provinceList.length  == 0){
                instance.getCity();
            }
            
            // 初始化 获取已经选中的 // 获取当前选中城市 id集合
            instance.getCityIds();
            // 选择省级别
            instance.choosePro = (val)=>{
                instance.cityParams.parentId = val.value
                if(val.type == 'next'){
                    instance.getCity();
                    instance.chooseProIds = []
                    instance.chooseProIds.push(val.value)
                    // 判断是否获取升级别数据
                    if(instance.proFlag){
                        instance.clearCity(val)
                        if(instance.chooseCity.length > instance.chooseNum){
                            instance.chooseCity = instance.chooseCity.splice(1,instance.chooseNum);
                        }
                    }
                }else{
                    instance.chooseProIds = []
                    instance.cityList = [];
                    instance.chooseIds.push(val.value);
                    instance.clearCity(val)
                    if(instance.chooseCity.length > instance.chooseNum){
                        instance.chooseCity = instance.chooseCity.splice(1,instance.chooseNum);
                    }
                    // 获取当前选中城市 id集合
                    instance.getCityIds();
                }
            }
            // 选择市级别
            instance.chooseCit = (val)=>{
                // console.log(val)
                instance.chooseIds = [];
                instance.chooseIds.push(val.value)
                instance.clearCity(val)
                if(instance.chooseCity.length > instance.chooseNum){
                    instance.chooseCity = instance.chooseCity.splice(1,instance.chooseNum);
                }
                // 获取当前选中城市 id集合
                instance.getCityIds();
            }
            // 双击取消当前选中的城市
            instance.clearCity = (val) => {
                // console.log(111)
                let flag = true;
                instance.chooseCity.forEach((ele,index) => {
                    if(ele.value == val.value){
                        flag = false;
                        instance.chooseCity.splice(index,1);
                        return false;
                    }
                });
                if(flag){
                    instance.chooseCity.push(val)
                }
                chooseCitArr = instance.chooseCity
                // 获取当前选中城市 id集合
                instance.getCityIds();
            }
            instance.sureCallBack = () => {
                instance.show = false;
                let params = {
                    type :true,
                    data:instance.chooseCity
                }
                resolve(params);
            }
            instance.closeCallBack = () => {
                instance.show = false;
                let params = {
                    type :false,
                    // data:instance.chooseCity
                }
                resolve(params);
                // resolve(false)
            }
        })
    }
    // 将这个实例挂载在我创建的div上
    // 并将此div加入全局挂载点内部

    instance.$mount(document.createElement('div'))

    document.body.appendChild(instance.$el)

}

export default chooseCityIndex;

效果截图展示

使用方式

this.$lstchooseCity({
        title:'这是什么东西~',//标题
        chooseNum:1,//选中城市数量
        draco:false,//是否允许拖动
        proFlag: false,// 是否允许获取省级别
        chooseCity:[
            {
                name: "上海",
                type: "leafNode",
                value: 310000
            }
        ],// 选中城市 默认选中
        r_btn:'确定',//左侧按钮
        l_btn:'取消',//右侧按钮
        vnode:'<span>饿哦是内容区域</span>',//内容自定义部分
        content:"我也不知道这是什么东西啊！！！"//内容文本
      }).then(res=>{
          console.log(res)//点击按钮回调函数
      })