Vue + Mint-ui 封装滚轮选择器

最新推荐文章于 2022-03-29 10:21:45 发布

原创

最新推荐文章于 2022-03-29 10:21:45 发布 · 2.7k 阅读

收录于

当前文章被以下社区和专栏收录：

本文介绍了如何在Vue项目中利用Mint-ui的组件进行滚轮选择器的封装，结合<mt-picker>和<mt-popup>创建一个带有确认和取消按钮的定制选择器。详细阐述了封装过程、组件的使用方法以及注意事项，包括values字段值的处理方式，以确保符合Vue组件不直接修改props值的原则。

Mint-ui 是个非常不错的 UI 框架，提供了很多组件。

但在项目中实际使用的时候，还需要将几个组件组合起来使用。

比如要实现 App 中常见的滚轮选择器，需要将 Popup 和 Picker 组合起来，并根据项目的 UI 效果做一定的定制。

下面将用 Popup + Picker 定制一个带确定取消按钮的滚轮选择器。

在这里插入图片描述

封装

布局很简单，外层套一个 <mt-popup>，上面是两个按钮，下面是 <mt-picker>。

这两个组件的具体用法请查阅官方文档

先贴出代码

<template>
  <mt-popup
      class="mt-popup"
      v-model="visible.show"
      :closeOnClickModal="false"
      position="bottom">
    <div class="popup-container">
      <div class="title">
        <div class="text" @click="cancel()">取消</div&

标签

#Vue #Mint-ui #滚轮选择

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

solocoder222

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue 返回记住滚动条位置详解

热门推荐

solocoder的博客

03-04

2万+

最近用 Vue 做移动端页面遇到一个问题，从列表页进入详情页，再返回到列表页，不管之前滚动到哪里，每次返回时都跳到列表最顶部。这样体验肯定不好，期望的应该是记住滚动条的位置，每次返回还是在原来的位置上，便于继续浏览。于是在网上搜解决方法，搜了一大圈看了 n 篇文章，都没有说清楚。起码我是没有通过看一篇文章而完美解决，所以决定写一篇详细的亲测可行的解决方案。一共分三步：给 router-v...

参与评论您还未登录，请先登录后发表或查看评论

element-ui 的Dialog被蒙板遮住原因及解决办法

solocoder的博客

07-06

1万+

用 element-ui 时遇到一个问题，弹出的 dialog本来应该在半透明蒙板上层显示，但不知怎么跑到了蒙板下面，被遮住了。查了一些资料，得知如果 Dialog 的外层布局的 position 值为 fixed, absolute, relative 三者之一时，就会出现被蒙板遮住的情况。解决办法很简单，查看 element 的官方文档在 el-dialog 标签里添加下面两...

Android webview 与 js(Vue) 交互

solocoder的博客

08-22

1万+

js 与原生交互分为两种情况：js 调用原生方法，原生调用 js 方法。本文将对这两种情况分别讲解，H5 端用 vue 实现。一、前期准备（Vue项目准备）本文的 H5 端用Vue 实现，所以在正式开始前先把 Vue 项目环境准备好。项目写好后，执行 npm run serve 命令启动项目，启动成功后会在命令行看到两个地址： http://localhost:8080/ ...

vue + element-ui + scss 仿简书评论模块

solocoder的博客

07-08

1万+

一、前言最近开发项目需要用到评论模块，参考了多家平台，对比之后觉得简书的最漂亮，就它了。前端当然要先放图简书原图注意评论的输入框默认是隐藏的，点击回复才会显示出来本篇文章实现的效果同样输入框需要点击回复才会显示二、功能分析从 UI 上看，整个评论模块大致分为四个版块评论人信息。包括头像，昵称，评论时间评论的内容。包括文字内容，赞的个数和回复按钮他人...

用 moment 实现获取本周、前 n 周、后 n 周开始结束日期

solocoder的博客

04-19

8942

本文用 moment.js 实现了获取本周、前 n 周、后 n 周开始结束日期，即周一、周日日期的方法。先看代码，封装了个工具类 DateTimeUtils.js，可以直接复制到项目中使用 /** * 时间日期工具类 */ import moment from 'moment' export default { /** * 获取本周周一和周日日期 */ getCurre...

前端复杂表格导出excel，一键导出 Antd Table 看这篇就够了（附源码）

solocoder的博客

03-29

8186

前端导出 excel 的需求很多，但市面上好用的库并不多，讲明白复杂使用场景的文章更少。本文将以文字 + demo 源码的形式，力求讲清楚满足 99% 使用场景的终极 excel 导出方案。如果项目中用到了 AntD，那就更简单了，因为 Table 本身已经设置好了 column 和 dataSource，只需解析 column 和 dataSource 即可快速导出 Excel。实现功能：简单表格导出为表格添加样式（更改背景色、更换字体、字号、颜色）设置行高、列宽解析 ant-design

基于 Vue 的移动端富文本编辑器 vue-quill-editor 实战

solocoder的博客

05-27

6149

优秀的富文本编辑器有很多，比如：UEditor，wangEditor 等，但并不是每个都能在移动端有很好的表现。我们暂且不讨论移动端是否真的需要富文本，既然有这需求，就把它实现出来。失败的尝试正确的选择是成功的开始，开发之前肯定要做一些调研。通过各种资料搜集，确定了几个备选的：UEditor，vue-quill-editor，wangEditor，vue-html5-editor ，tin...

Vue-cli3 项目在安卓低版本系统和 IE 上白屏问题解决

solocoder的博客

04-13

3996

最近遇到一个问题，用 Vue 开发的项目在最近两年新出的安卓手机上没问题，在三四年前的旧手机上出现白屏问题。分析一下应该是安卓系统版本的原因，目前已知的是Android 6.0 以上都 OK，6.0 以下就不行了。低版本安卓系统内置的 webview 不支持 ES6 语法等一些新特性，所以报错。但在手机上调试不方便，受一篇文章的启发， IE 浏览器也是同样的问题，所以可以在 IE 上调试，一个调...

Android原生同步登录状态到H5网页避免二次登录

solocoder的博客

03-14

3890

本文解决的问题是目前流行的 Android/IOS 原生应用内嵌 WebView 网页时，原生与H5页面登录状态的同步。大多数混合开发应用的登录都是在原生页面中，这就牵扯到一个问题，如何把登录状态传给H5页面呢？总不能打开网页时再从网页中登录一次系统吧… 两边登录状态的同步是必须的。 100 多位经验丰富的开发者参与，在 Github 上获得了近 1000 个 star 的全栈全平台开源项目想...

前端提效 - js 批量导出 excel 为zip压缩包

solocoder的博客

03-29

3691

本篇文章主要介绍使用 exceljs、file-saver、jszip实现下载包含多层级文件夹、多个 excel、每个 excel 支持多个 sheet 的 zip 压缩包。上一篇文章：前端复杂表格导出excel，一键导出 Antd Table 看这篇就够了（附源码）详细介绍了如何实现解析 Antd Table、组装数据和调整表格的样式，感兴趣的可以先看看。本篇将接着上一篇，重点讲方法的更高级抽象，和下载多层级文件夹的 zip 压缩包。源码地址：https://github.com/cachecats/ex

Vue 图片压缩并上传至服务器

solocoder的博客

01-15

2215

本文主要讲解基于 Vue + Vant ，实现移动端图片选择，并用 Canvas 压缩图片，最后上传至服务器。还会封装一个工具类，方便直接调用。一、工具类封装废话不多说先上代码，封装一个 CompressImageUtils 工具类： /** * 图片压缩工具类 * 最大高度和最大宽度都为 500，如果超出大小将等比例缩放。 * * 注意可能出现压缩后比原图更大的情况，在调用...

前端面试必备技巧（二）重难点梳理

solocoder的博客

06-05

1501

针对面试中出镜率比较高的重难点知识梳理。相比于第一篇前端面试必备技巧，本篇文章更贴合今年的面试实际。第一篇比较全面，也比较基础，建议先看一遍上一篇再看本篇会更容易理解。一、ES6常见用法关于 ES6（泛指 ECMAScript 2015 及以后的版本）几乎是面试必问的，一般的问法是：“平常会使用 ES6 吗？列举几个 ES6 的用法”。回答出来三四个就差不多了，但回答的每一个都要弄清楚，有的面试官会延伸着追问。如果时间充足，还是建议看看阮一峰的 ES6 入门教程。 1.1 let 和 c

100 行代码实现 Flutter 自定义 TabBar

solocoder的博客

09-26

1306

Flutter 的确很强大，但美中不足的是生态还有待完善，没有出现像前端的 Antd 或 Element 那样全能的基础 UI 库。由此带来的直接影响是开发效率提不上去，需要耗费大量的时间精力在基础组件的封装上。官方的 TabBar 不满足需求，又没有合适的轮子，只好自己造轮子啦。接下来带你一步步实现自定义 TabBar…… 一、目标和效果需求目标是：这个页面不要 material 左侧统一的返回键和 Title 在右侧有取消按钮，点取消即返回点击 Tab 可以实现 content 切换并带有动

2020前端面试必备技巧

solocoder的博客

06-05

1133

2020最全的前端面试指南，一个多月 1.8w 字的面试经验积累，凭借它最终成功入职大厂…… 今年的金三银四刚好赶上疫情，很多大公司都停止招聘甚至裁员，想跳槽的小伙伴被打的措手不及。需求减少要求肯定随之提高，谨以此面经献给在如此艰难之时逆风而动、勇敢坚强的你~ 与面试贴合度更高的前端面试必备技巧（二）重难点梳理整理好啦，两篇文章结合起来看效果更佳~ 前言今年问的难度和深度应该比前几年有所增加，下面从总体分析和重要点两个维度来分析一下：总体分析前端问的最多的还是 js基础、计算机网络基础等，建议

pip-ansys_mapdl_reader-0.50.11-cp37-cp37m-macosx_10_9_x86_64.whl.zip

07-25

pip-ansys_mapdl_reader-0.50.11-cp37-cp37m-macosx_10_9_x86_64.whl.zip

基于 W-GAN 的光伏出力场景生成方法研究（Python代码实现）