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

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

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

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

封装

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

这两个组件的具体用法请查阅

先贴出代码

    复制代码

使用

使用组件需要三步

1. 引入（路径需根据实际情况更改）

   import SyPicker from '../components/SyPicker'复制代码

2. 在 components 里注册

   components: {	'sy-picker': SyPicker}复制代码

3. 布局中使用

         复制代码

去除无关代码，只保留跟本文相关的代码如下

    复制代码

使用须知

1. slots 传递的值与 mint-ui 中 picker 定义的 slots 一致，详情见 。

   备选值即 values 字段的值要统一转换成 {id: 'xxx', name: 'xxx'} 的格式，方便取 id 和显示。

2. :visible="" 要传一个对象，因为 vue 规定在子组件中不能更改 props 的值，这里取个巧，传对象的话引用不变，但值可以改，不会报错。当然也可以用 vuex 来实现，哪个顺手用哪个吧。

3. @values 接收的是选中的值的数组。不管滑动滚轮了没有，点击确定按钮时都会将当前滚轮选中的值传递过来。