一个很好用的 vue-picker组件

2023-11-15

vue-picker

a picker componemt for vue2.0


走了一圈 github 都没有找到自己想要的移动端的 vue-picker的组件,于是自己就下手,撸了一个出来,感受下效果图。
vue-pick.gif

demo

demo 地址:http://gitblog.naice.me/vue-p...

install

npm install vue-pickers --save

使用

<template>
  <div>
    <vue-pickers
      :show="show"
      :columns="columns"
      :defaultData="defaultData"
      :selectData="pickData"
      @cancel="close"
      @confirm="confirmFn"></vue-pickers>
  </div>
</template>

<script>
import vuePickers from 'vue-pickers'
export default {
  components: {
    vuePickers
  },
  data() {
    return {
      show: false,
      columns: 1,
      defaultData: [
        {
          text: 1999,
          value: 1999
        }
      ],
      pickData: {
        // 第一列的数据结构
        data1: [
          {
            text: 1999,
            value: 1999
          },
          {
            text: 2001,
            value: 2001
          }
        ]
      }
    }
  },
  methods: {
    close() {
      this.show = false
    },
    confirmFn(val) {
      this.show = false
      this.defaultData = [val.select1]
    },
    toShow() {
      this.show = true
    }
  }
}
</script>

属性参数说明

参数 说明 是否必须 类型 默认值
show 显示隐藏picker Boolean false
columns 列数设置 Number 1
defaultData 默认显示设置 Array<object> []
link 是否开启联动数据 Boolean false
selectData 数据设置,分别对应列(data1: [], data2: [], data3: [],) Object {}

事件说明

参数 说明 是否必须 类型 默认值
cancel 取消选择 function
confirm 确认选择 function(val)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

一个很好用的 vue-picker组件 的相关文章

  • 页面在 Google Adwords 转化跟踪上重定向

    我有一个表单 人们可以在其中提交数据 然后使用 ajax 将数据发送到服务器 我已将其设置为 Google Adwords 中的转化 下面是我使用过的代码 问题是 当用户提交表单时 在收到响应后 它会重定向回我给出的 URL 我不想重定向
  • 从 Internet Explorer 打印时的默认文件名

    使用 pdf 打印机打印网页 将页面另存为 pdf 时 Chrome 和 Firefox 都使用该页面
  • 如何在javascript中动态向对象数组添加值?

    这是一个对象数组 var data label 1 value 12 label 1 value 12 label 1 value 12 label 1 value 12 我如何动态地为这些添加值 我尝试了以下代码但没有成功 var lab
  • Chrome 扩展程序可以相互通信吗?

    我正在编写一个Chrome扩展程序 并且想要实现一个接口或api 以便我将来制作的其他扩展程序可以使用它 最终的效果可能如下 分机 B 呼叫extensionA someMethod someParameters 并向分机A发送一些数据 分
  • 返回上一页

    我正在使用表格来 评价 页面 此表单将数据 发布 到其他地方的 php 脚本 我只是想在处理表单后显示一个链接 这将使用户返回到上一页 我可以在 php 脚本中使用 javascript 来执行此操作吗 GF 您可以使用链接来调用histo
  • jQuery 可以操作插入的元素吗?

    我是 jQuery 的新手 我认为 jQuery 可以操作由代码添加的元素是合理的 但我发现现在还不能 function addVideo click function publisher append div div
  • Dialogflow Fulfillment Webhook 调用失败

    I am new to dialogflow fulfillment and I am trying to retrieve news from news API based on user questions I followed doc
  • 如何在 jQuery 中将标题转换为 URL slug?

    我正在 CodeIgniter 中开发一个应用程序 我试图在表单上创建一个字段来动态生成URL slug 我想做的是删除标点符号 将其转换为小写 然后用连字符替换空格 例如 Shane s Rib Shack 将变成 shanes rib
  • 如何在 JavaScript 中将变量的内容写入文件[重复]

    这个问题在这里已经有答案了 可能的重复 firefox 如何启用本地 JavaScript 来读取 写入我的 PC 上的文件 https stackoverflow com questions 2846045 firefox how to
  • 如何调试超时等待异步 Angular 任务?无法在角度页面上找到元素

    编辑 请注意 在 ernst zwingli 的帮助下 我找到了问题的根源 因此 如果您遇到相同的错误 他指出的修复之一可能会帮助您 我的问题是量角器本身的一个已知问题 如果您认为这可能是您 我已经扩展了我的步骤 以在我最初的问题之后查明问
  • 冒泡可用于图像加载事件吗?

    我可以用吗 window addEventListner 某种程度上来说 我所有的图像都有一个display none 图像加载后 我想设置display inline 这样我就可以规范下载图像时显示的内容 在这种情况下 我无法预加载图像
  • Next.js:错误:React.Children.only 期望接收单个 React 元素子元素

    我有一个名为Nav inside components目录及其代码如下所示 import Link from next link const Nav gt return div a Home a a About a div export d
  • AngularStrap 工具提示禁用我的自定义指令

    我正在尝试让 bs tooltip AngularStrap 指令与我自己的名为 checkStrength 的自定义指令一起使用 该指令检查密码的强度 单独使用这些指令中的任何一个时 它们都可以正常工作 但不能一起工作 This http
  • for循环中需要声明变量吗?

    有什么区别 for var i 0 i lt 5 i for i 0 i lt 5 i 是否有必要包含 var 关键字 我知道 var 关键字会影响变量范围 但我无法理解是否有必要在 for 循环中包含该关键字 在第二个示例中 您的变量是全
  • 使用 ng-if 改变角度方向

    我想通过单击将方向从 rtl 更改为 ltr and in 设置 html
  • 在javascript中创建图像的缩略图方块(不丢失纵横比)

    我正在制作一个客户端拖放文件上传脚本作为书签 在上传之前 我使用 File API 将图像读取为 base64 格式并将其显示为缩略图 This is how my thumbnails look like I want them to l
  • 绘制多边形

    我正在使用 Google Maps API V3 根据路径绘制多边形 该路径是随机未排序坐标点 LatLng 的数组 这会产生以下形状 Polylines intersect Problem 由于多边形的形状取决于路径中点的顺序 因此如何对
  • 将 JSON 属性绑定到表单

    我有一个 JSON 对象和一个
  • 使圆圈与 d3.js 上的多线匹配相同的颜色过滤?

    我有一个多线图 当按每种水果过滤时会更新 每条线条颜色对应不同的销售年份 在 的帮助下Shashank https stackoverflow com users 5569282 shashank 每个数据点线上的圆圈已添加到组中 而不是直
  • $ 在 JQuery 中意味着什么

    在下面的 var obj one 1 two 2 three 3 four 4 five 5 each obj function i val console log val 这里是什么意思 是对象吗 是一个别名jQuery对象 函数 它充当

随机推荐

  • TCP的粘包问题

    TCP transport control protocol 传输控制协议 是面向连接的 面向流的 提供高可靠性服务 收发两端 客户端和服务器端 都要有一一成对的socket 因此 发送端为了将多个发往接收端的包 更有效的发到对方 使用了优
  • python pyinstaller打包参数介绍(转)

    pyinstaller相关参数 F onefile 打包一个单个文件 如果你的代码都写在一个 py文件的话 可以用这个 如果是多个 py文件就别用 D onedir 打包多个文件 在dist中生成很多依赖文件 适合以框架形式编写工具代码 我
  • 如何使用yum安装最新软件包

    分享请标明来自 https www css3 io how yum install release soft html 背景 使用yum安装软件时 会经常遇到安装的软件是老版本的 被非自己期望的release版本 这到底是怎么回事儿 得从r
  • 【2023】java通过modbus4j实现modus TCP通讯

    Modbus通信协议 主要分为三个子协议 RTU ASCII TCP Modbus RTU 传输的是字节数组 bit 通信 读写 输出 可以读写 输入 只能读 存储区 输出线圈 输入线圈 输出寄存器 输入寄存器 线圈 代表一个布尔量 最小单
  • Docker环境安装

    Docker环境安装 Docker简介 Docker工作原理 Docker的应用场景 Docker 的优点 CentOS Docker 安装与配置 Docker 安装 Docker 配置 Docker容器概念 Docker容器操作 拉取镜像
  • Java 实现文件复制及文件夹复制

    在Java中 有多种方法可以实现文件的复制 以下是几种常用的方式 使用字节流进行复制 通过FileInputStream和FileOutputStream分别创建源文件和目标文件的输入输出流 然后通过循环读取源文件内容 并将数据写入目标文件
  • mysql相加并输出_用shell把执行的两条sql语句相加并输出数据库名和相加的值以tab健隔开...

    SELECT SUM PresentSum FROM Lg ConsumeDetail0 WHERE ConsumeDate lt 2016 11 01 AND OpId 300 SELECT SUM PresentSum FROM Lg
  • vcpu和physical cpu 绑定

    参考libvirt中xml的写法可以将vpu和物理cpu 绑定 https libvirt org formatdomain html elementsCPUTuning
  • Unity鼠标光标使用学习

    Unity下的鼠标光标程序相关的就一个类下的2 3个方法 首先 光标导入图片的设置需要将类型设置为Cursor 设置鼠标光标的方法就一个 SetCursor 第一个参数是图片 第二个参数是点击点的偏移量 第三个参数是类型 public Te
  • Apollo配置中心Client源码学习(二)-- 配置同步

    上一篇文章 https blog csdn net crystonesc article details 106630412 我们从Apollo社区给出的DEMO开始逐步分析了Apollo客户端配置的创建过程 作为Apollo配置中心Cli
  • Javascript和CSS的标签属性对应表

    在写javascript中 经常要用到style对象的css属性 很多不记得 其实很好记 基本就是CSS中的 转化为javascript的驼峰写法 除了注意下float 盒子标签和属性对照 CSS语法 不区分大小写 JavaScript语法
  • 针对博客项目进行web自动化测试

    web自动化测试针对博客项目 项目功能 测试计划 功能测试 编写测试用例 使用Selenium Junit5进行Web自动化测试 创建测试套件类 博客登录页 博客列表页 主页 博客详情页 个人博客列表页 修改密码页 编辑博客页 退出驱动 屏
  • 台达plc控制伺服电机编程实例_PPT图文讲解PLC控制系统的设计及编程实例

    今天主要是关于PLC控制系统设计 分成四个方面 以图文的形式来为大伙做讲解 一 PLC控制系统设计概述 二 PLC控制系统设计 三 PLC的安装 运行与维护 四 PLC的编程实例 一 PLC控制系统设计概述 1 系统设计的原则 2 系统设计
  • chooseAddress:fail the api need to be declared in …报错解决方法

    在app js中与pages同级添加 requiredPrivateInfos getFuzzyLocation choosePoi chooseAddress 如果提示无效的json文件 在顶部工具栏 微信开发者工具 检查更新 更新到最新
  • 一致性算法(paxos、raft)

    背景 分布式 一致性模型 1 弱一致性 最终一致性 1 1 DNS 1 1 Gossip 2 强一致性 2 1 同步 2 1 paxos 2 1 raft multi paxos 2 1 ZAB multi paxos 与raft相似 心跳
  • error C2144: 语法错误:“int”的前面应有“;”

    error C2144 语法错误 int 的前面应有 C error C2144 syntax error int should be preceded by 注 我使用VS2010时 遇到的问题 解决办法 在某个 h文件里你自定义的某个类
  • 软件工程的发展历程及展望

    软件工程发展至今 催生出了许多优秀的编程语言和编程思想 本文将带领大家一起了解软件工程经历的四个阶段 汇编语言表达业务逻辑 过程化语言表达业务逻辑 面向对象和模块化思想表达业务逻辑 服务化和组件化表达业务逻辑 最后谈一谈未来可能的发展方式
  • 刷脸支付是新奇的安全的支付体验

    扫脸支付 刷脸付钱的新奇 便利 有效率和安全的支付体验 能够大大提高客户对刷脸商品的和信赖度 刷脸不仅仅在过程中时间 还将吸引消费者注意力的时间延长了5秒到8秒右左 这几秒就会有巨大的商业价值 是让顾客同商家的经营生产有效多维 充分接触的5
  • OSI/RM七层参考模型---开放式的系统互联参考模型

    一 OSI的设计目的 OSI模型的设计目的是成为一个所有销售商都能实现的开放网路模型 来克服使用众多私有网络模型所带来的困难和低效性 OSI是在一个备受尊敬的国际标准团体的参与下完成的 这个组织就是ISO 国际标准化组织 什么是OSI OS
  • 一个很好用的 vue-picker组件

    vue picker a picker componemt for vue2 0 走了一圈 github 都没有找到自己想要的移动端的 vue picker的组件 于是自己就下手 撸了一个出来 感受下效果图 demo demo 地址 htt