vue3+typescript+vantUi 实现一个带有搜索功能的 picker选择器

已于 2022-09-14 10:48:53 修改
阅读量2k 收藏 3
点赞数
分类专栏： 前端开发 vue的使用工具 文章标签： vue.js picker带搜索 前端 vantUi
于 2021-11-16 17:32:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/versionli/article/details/121360399
版权

先看一下效果图：

html代码 ：

js代码一 

js代码二

 

传过来的数据结构大概就是这样

 vue封装带picker的搜索功能比起react简单得多，比小程序也简单

发奋图强_lee
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
search-multiple-select:可搜索的多重选择React组件-npm
05-11
搜索多选 可搜索的多重选择React成分 安装 npm install --save search-multiple-select 桌面演示： 用法 import React , { Component } from 'react' import MultipleSelect from 'search-multiple-select' import 'search-multiple-select/dist/index.css' class Example extends Component { // the callback. Use a better name const getOptionsData = ( data ) => { console . log ( data ) ; // print option data - to test } ; render
【每天学一点-05】在Vue中使用Vant组件-picker选择器，并给选择器添加搜索功能
weixin_43906233的博客
07-23 7335
实现Vant-picker搜索功能
【微信小程序packer 带搜索功能 直接复制就能用】
ranshakalove的博客
08-30 312
微信小程序picker 带搜索功能 直接复制就能永
uniapp使用picker-view组件实现选择器可进行搜索
qq_52065282的博客
03-15 5313
效果图：1、使用uniapp自带的picker-view组件实现2、在父组件中使用。
微信小程序开发--1.9表单之picker组件
weixin_46479909的博客
06-30 740
【代码】微信小程序开发--1.9表单之picker组件。
picker+搜索
最新发布
missxiang629的博客
10-13 202
【代码】picker+搜索。
小程序 自定义picker 加搜索框
cm1616的博客
05-26 1585
【代码】小程序 自定义picker 加搜索框。
【Taro】小程序picker动态获取数据
发果叁
07-21 2752
功能比较简单，但第一次写的话有不少坑，半天才写好，又优化了半天，在这个小功能上花费了一天时间，后面其他项目有这种动态加载列表的需要，就可以用这一套方法了。
React+hooks+antui封装一个带搜索功能的picker
versionli的博客
10-29 389
先看一个效果图： 功能主要有： 1，点击tab，强出picker组件出来 2，搜索功能 3，点击某一项，把数据塞回tab 4,点击遮罩关闭， 5，打开已选择项，定位回到被选中的item 看代码注释不 用法 如果你是新手想学前端可以加我（标明是前端）， 如果你是一个有基础，但学习前端没有明确的方向，可以加我 如果你刚毕业找到前端的工作，但工作上遇到问题或怕遇到问题解决不了的可以加我 一对一私人指导/教学（费用很便且）：微信： ...
uniapp 改写uni-data-picker级联选择器（带搜索和多选）新增列出选择和删除功能
qq_36958916的博客
07-09 1万+
uniapp 改写uni-data-picker级联选择器（带搜索和多选）新增列出选择和删除功能
mall:基于taro.js + vue3 + typescript + taro-ui-vue3 搭建的模板
05-23
基于taro.js + Vue3 + taro-ui-vue3 搭建的模板 环境准备 初始化 node_modules: npm install or(推荐, 尽量在执行前开启梯子) yarn 提供的脚本 具体可以查看 package.json 中的脚本列表. 主要脚本为: start 启动项目...
vue3+typescript+ElementUI后台管理DEMO
02-27
Vue3+TypeScript实战项目，使用 ElementUI 搭建页面，完成登录、商品列表、用户列表、角色列表、退出登录。通过页面展示、搜索、分页、编辑等功能的实现练习怎么在vue3中使用TypeScript。...
vue3-ts-demo:Vue3 + TypeScript + Vant
04-02
vue create vue3 - ts - demo //选择Vue3.0 空格选择 enter确认 vue add typescript //启动 npm i npm run serve 数据 // 1 reactive将state 结语实现state数据的响应式 import { reactive } from 'vue' // 响应式...
Vue3 + TypeScript + Uniapp 开发小程序【医疗小程序完整案例·一篇文章精通系列】
05-16
Vue3 + TypeScript + Uniapp 开发小程序【医疗小程序完整案例·一篇文章精通系列】Vue3 + TypeScript + Uniapp 开发小程序【医疗小程序完整案例·一篇文章精通系列】Vue3 + TypeScript + Uniapp 开发小程序【医疗小...
Vue3 如何挂载全局方法 和用getCurrentInstance代替this
热门推荐
versionli的博客
05-11 2万+
平时我们在开发vue项目的时候，要把一些函数、方法、组件或插件挂在全局上方便项目上每一个页面或模块调用，在vue2.x的时候，在main.js只要用Vue.prototype就能完成，之后在页面上用this来调用，如： main.js: 调用 在vue3.0的时候挂在全局方法就不一样，通过 app.config.globalProperties来挂载，如挂载axios： 方法一： 但是切记挂载任何东西之前不能createApp(App)后面不能连缀us...
隐藏微信小程序左上角的返回或home按钮 wx.hideHomeButton
versionli的博客
05-12 1万+
隐藏微信小程序左上角的返回或home按钮 用的是 wx.hideHomeButton方法，但是这个方法是有限制的，管网说得又不清不楚，在百度也找不到相关的问题 在用这个方法的时候遇到过很多问题和官方不一至 “当用户打开的小程序最底层页面是非首页时” 并不是这样，也不一定在onshow调用， 首先，如果想要隐藏图标，在上一个页面跳到要隐藏图标的页面时，在跳转要用到wx.reLaunch，其它跳转方法都没效果，其次，wx.hideHomeButton不一定要在onS...
前端开发工具vscode如何快速生成代码片段
versionli的博客
06-26 7894
下面以设置React代码片段为例： 1， 打开vscode工具 ： 文件->首选项->用户片段 2，搜索 javascript.jon 3，点击打开，如图： 4，复制一段react的代码（你喜欢的模板） 我以下面这模板为例子 import React, { Component } from 'react'; import ReactDOM from 'react-dom'; class App extends React.Component { .
vue3.0组件监听异步数据，watch与reactive 的应用, watch与computed, 还有ref的使用
versionli的博客
01-07 4991
vue3.0子组件监听父组件传过来的异步数据，watch与reactive 的应用, watch与computed, 还有ref与wactch的使用
vue3 + typescript +vant 实现刮奖
04-27
好的，针对您的问题，我可以给您提供一些思路和建议： 1.先安装 vant 组件库和 canvas 等相关依赖，可以使用 npm 命令进行安装。 2.在 Vue3 项目中，使用 TypeScript 进行开发，可以提高代码的可读性和可维护性。 3.使用 canvas 实现刮奖功能，可以通过在 canvas 上绘制两层图片，一层底图，一层刮开后的图，然后在刮开的区域上绘制透明效果，实现刮开的效果。 4.在组件中使用 vant 的 Swipe 方法实现手指滑动事件，监听手指滑动的距离和方向，然后在 canvas 上绘制相应的透明效果，实现用户手指滑动的效果。 5.在用户刮开一定比例的内容后，可以触发相关的奖励或者提示信息，可以使用 vant 的 Toast 或者 Dialog 组件来实现。 希望以上建议能对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值