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

原创

于 2018-09-21 09:42:49 发布 · 2.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #Mint-ui #滚轮选择

本文介绍了如何在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&

最低0.47元/天解锁文章