脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → v-distpicker地区选择器

v-distpicker地区选择器组件使用实例详解

 更新时间：2024年02月02日 10:56:36   作者：涛声依在  
代码添加了一个vDistpickerHandle的事件处理函数对地区选择器中的数据进行处理,将数据存储到form对象的相应属性中,方便数据提交,这篇文章主要介绍了v-distpicker地区选择器组件使用,需要的朋友可以参考下

1、参考文档：https://jcc.github.io/v-distpicker/

2、在vue中安装

npm install --save v-distpicker

3、在vue中引用

        局部引入方式：

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

         全局引入：在src目录下的main.js文件中添加引入代码

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

4、基础实现

<template>
  <div>
    <v-distpicker       
                        :province="form.province" 
                        :city="form.city" 
                        :area="form.area"
                        @province="vDistpickerHandle($event,'province')"
                        @city="vDistpickerHandle($event,'city')"
                        @area="vDistpickerHandle($event,'area')"
                        ></v-distpicker>
	</div>
</template>
<script>
// 引入地区选择
import VDistpicker from 'v-distpicker'
export default {
components: { VDistpicker },
  data(){
    return{
      form: {
        province: '',
        city: '',
        area: ''
      },
    }
  },
  methods:{
    vDistpickerHandle(event,value){
      console.log(event);
      console.log(event.value);
      this.form[value]=event.value
    },
  }
}
</script>

代码添加了一个vDistpickerHandle的事件处理函数对地区选择器中的数据进行处理，将数据存储到form对象的相应属性中，方便数据提交。

到此这篇关于v-distpicker地区选择器组件使用的文章就介绍到这了,更多相关v-distpicker地区选择器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • VUE2 前端实现 静态二级省市联动选择select的示例

    VUE2 前端实现 静态二级省市联动选择select的示例

    下面小编就为大家分享一篇VUE2 前端实现 静态二级省市联动选择select的示例。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue3+xgplayer实现短视频功能详解

    vue3+xgplayer实现短视频功能详解

    短视频应用的流畅性和用户交互性在用户体验中扮演着重要角色,本文将展示如何通过 Vue 3 和 XGPlayer来实现这些功能,感兴趣的小伙伴可以了解下
    2025-02-02
  • vue3 setup访问子组件的 DOM 元素的示例代码

    vue3 setup访问子组件的 DOM 元素的示例代码

    使用setup的情况下这个时候我们无法使用this,注意在setup中setup是封闭的,不会将子组件事件暴露出来,所以要用defineExpose(),这篇文章主要介绍了vue3 setup访问子组件的 DOM 元素,需要的朋友可以参考下
    2023-08-08
  • Vue3+TypeScript实现Docx/Excel预览组件

    Vue3+TypeScript实现Docx/Excel预览组件

    这篇文章主要为大家详细介绍了如何使用Vue3+TypeScript实现Docx/Excel预览组件,文中的示例代码讲解详细,有需要的小伙伴可以参考下
    2024-04-04
  • vue实现顶部菜单栏

    vue实现顶部菜单栏

    这篇文章主要为大家详细介绍了vue实现顶部菜单栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • Vue中Axios的封装与接口管理详解

    Vue中Axios的封装与接口管理详解

    在vue项目中和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中,下面这篇文章主要给大家介绍了关于Vue中Axios的封装与接口管理的相关资料,需要的朋友可以参考下
    2022-03-03
  • vue监听路由变化的几种方式小结

    vue监听路由变化的几种方式小结

    这篇文章主要介绍了vue监听路由变化的几种方式小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-05-05
  • vue实现富文本编辑器详细过程

    vue实现富文本编辑器详细过程

    Vue富文本的实现可以使用一些现成的第三方库,如Quill、Vue-quill-editor、wangEditor等,这篇文章主要给大家介绍了关于vue实现富文本编辑器的相关资料,需要的朋友可以参考下
    2024-01-01
  • vue选项卡组件的实现方法

    vue选项卡组件的实现方法

    这篇文章主要为大家详细介绍了vue选项卡组件的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 纯JS如何实现vue.js下的双向绑定功能

    纯JS如何实现vue.js下的双向绑定功能

    对于vue下的双向绑定功能，个人理解为在处理逻辑的过程中缓存了大量的node对象，node对象可以是html标签、文本内容。既然选择了缓存这些对象，那么在用的过程中哪里需要改变就把node拿出来，进行标签属性的变更或者文本内容的修改。本文主要讲了如何实现双向绑定
    2021-06-06

最新评论