一个简单易用的 Vue 组件 V - Distpicker

Guakin_Huang 发布于2019-08-20 15:12 / 2306人阅读

摘要：是一个简单易用灵活的组件，且兼容端移动端。由于最近使用比较多，加上项目需求，写了这个地址选择器。网站源码我并不是一个前端，所以如果代码写得不好，请大家多多直接，我会不断提高自己的水平。好了，话不多说，下面来了解一下。

V - Distpicker 是一个简单、易用、灵活的 Vue 组件，且兼容 PC端、移动端。

由于最近使用 vue 比较多，加上项目需求，写了这个地址选择器。

有人会觉得已经有很多的地址选择器，为何还要花那么多的精力去写一个？

大多数的地址选择器都是基于 JQuery 的，当然也有 vue 的，但是满足不了需求，

因为我需要移动端的。

网站：http://distpicker.iline.co

源码：https://github.com/jcc/v-distpicker

我并不是一个前端，所以如果代码写得不好，请大家多多直接，我会不断提高自己的水平。

好了，话不多说，下面来了解一下 v-distpicker。

安装

使用 npm 安装：

npm install v-distpicker --save

使用 yarn 安装

yarn add v-distpicker --save

使用 注册组件

注册全局组件

import VDistpicker from "v-distpicker"

Vue.component("v-distpicker", VDistpicker);

注册组件

import VDistpicker from "v-distpicker"

export default {
  components: { VDistpicker }
}

简单使用

基础

默认值

移动端

简单预览v-distpicker

最后，求一波 stars https://github.com/jcc/v-distpicker 2333333.

更多请关注PJ Blog

GPU云服务器云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82091.html

V - Distpicker 一个简单易用的地区选择器

摘要：下载配置在中引用引入省市选择器注册组件使用这就已经配置完了可以使用了附上我的代码所在地城市选择器填写详细地址城市选择器请选择所在省份请选择所在城市传给父组件的值详情的内容先分割省自治区市特别行政区取出省 1下载 npm install v-distpicker --save or yarn add v-distpicker --save 2配置 1)在main.js中引用 imp...

Fundebug 2019-08-21 18:29 评论0 收藏0
基于 Weui.js 的地区选择器 weui-distpicker

摘要：是一个的延伸版本，一个基于简单易用灵活的组件。是一个轻量的框架，当然这个只针对于移动端。为何有了，造这轮子有更好的支持，支持返回地区名字以及地区代码。 Weui - Distpicker 是一个 V - Distpicker 的延伸版本，一个基于 Weui.js 简单、易用、灵活的 Vue 组件。 weui.js 是一个轻量的 Javascript UI 框架，当然这个 UI 只针对...

zhunjiee 2019-08-20 16:57 评论0 收藏0
Vue 组件 — V - Textcomplete

摘要：之后，又是一个简单易用灵活的组件。这次我带来了，一个带有文字匹配的。好，废话少说，接下来简单介绍一下如何使用。简单预览最后，欢迎大家来给我提意见，我会不断完善。 showImg(https://segmentfault.com/img/remote/1460000009418124); V - Distpicker 之后，V - Textcomplete 又是一个简单、易用、灵活的 V...

k00baa 2019-08-20 16:34 评论0 收藏0
vue 省市区三级联动插件v-distpicker

摘要：十分便捷的三级联动插件官网步骤下载步骤使用与引入在中注册全局组件在文件中使用组件你需要用到三级联动的页面的里如何使用组件在该文件的部分写广东省广州市海珠区移动端步骤如何获取他们的数据给部分一个点击事件在配置十分便捷的三级联动插件官网：https://www.awesomes.cn/repo/... 步骤1：下载 npm install v-distpicker --save O...

learning 2019-08-23 18:02 评论0 收藏0