elemefe / mint-ui

Mobile UI elements for Vue.js

Mint UI

Mobile UI elements for Vue 2.0

• Homepage
• Documentation

Installation

npm i mint-ui -S

# for Vue 1.x
npm i mint-ui@1 -S

Usage

Import all components.

import Vue from 'vue';
import Mint from 'mint-ui';
import 'mint-ui/lib/style.css';

Vue.use(Mint);

Or import specified component. (Use babel-plugin-component)

import { Cell, Checklist } from 'mint-ui';

Vue.component(Cell.name, Cell);
Vue.component(Checklist.name, Checklist);

Equals to

import Vue from 'vue';
import Mint from 'mint-ui';
import 'mint-ui/lib/style.css';

Vue.use(Mint);

// import specified component

import MtRadio from 'mint-ui/lib/radio';
import 'mint-ui/lib/radio/style.css';

Vue.component(MtRadio.name, MtRadio);

babel-plugin-component

• Auto import css file
• Modular import component

Installation

npm i babel-plugin-component -D

Usage

.babelrc

{
  "plugins": ["other-plugin", ["component", [
    { "libraryName": "mint-ui", "style": true }
  ]]]
}

CDN

RawGit

• https://cdn.rawgit.com/ElemeFE/mint-ui/master/lib/index.js
• https://cdn.rawgit.com/ElemeFE/mint-ui/master/lib/style.css

NPMCDN

• https://unpkg.com/mint-ui/lib/index.js
• https://unpkg.com/mint-ui/lib/style.css

Development

npm run dev

Contribution

Please make sure to read the Contributing Guide before making a pull request.

License

MIT

mint-ui's Issues

MessageBox 的一些建议

• prompt 是不是可以弹出后，input 获取焦点
• prompt input 框没有appearance: none; 可能导致不同浏览器的 input 样式会不一样

想咨询一下，是否有官网实例中，Picker 关于省市地址的具体实现，能否提供下其在vue文件中使用源码。

新手，学习中，如果有的话，十分感谢啦~

loadmore 模块 loadBottom 事件首次触发及进入页面3次触发 loadBottom 的问题

首次进入列表页面时 loadBottom 事件会在 route -> data 之前执行，可否设置在首次进入页面时不触发 loadBottom ?另外，进入页面时会3次触发 loadBottom 的情况。

lib TabContainer and TabContainerItem don't have style file

babel-plugin-component import single fail

tabbar和tabcontainer不能关联

需求:类似tabbar例子，切换tab， tabbar同步切换

使用：结合tabbar和tabcontainer，按照官网给出的结构写的。
点击tab后，tabcontainer没有切换，还是处于display:none。
通过vuetool 观察到 active一直是undefined。

组件是以对象的形式注册的

截图：
vue组件：

vue树

为什么下拉刷新 第一次拉完 然后 整个列表 会变成transform: translate3d(0px, -50px, 0px);

这样导致 ul列表的第一行就上去显示不了 而第二次过后再拉 就变成transform: translate3d(0px, 0px, 0px);正常了 请问是什么问题. 还有既然开源 把发布 未经过压缩和混淆的代码么 不然无法根据项目改源代码 这个算是个问题吧

MessageBox 文档没更新或是命名问题

引入MessageBox
import { MessageBox } from 'mint-ui';
import失败
实际上这样：
import { msgbox } from 'mint-ui';
才可以
名字改了文档没更新？

建议参考其他移动端 UI 组件库，新增更多组件

给几个参考：

Hui：http://git.oschina.net/winu.net/Hui （可能打不开，需要在 Git@OSChina 上搜“Hui”）
AUI：http://www.auicss.com

还有阿里巴巴的 SUI

css-loader不能正确加载css文件

import mintUi from 'mint-ui'
如上，我安装了babel-plugin-component，根据文档设置好了配置：

"plugins": ["transform-runtime", ["component", [
    { "libraryName": "mint-ui", "style": true }
  ]]],

然后加载button文件时提示
You may need an appropriate loader to handle this file type.
当我将button中的style.css内容全部删除后，编译正常通过不再报错，该文件中写入任意正常css代码都会报错
将该文件移动到其它文件夹，在入口文件手动引入：
import './style.css'
不报错
我查了一下午，没查出任何问题~~请问这是咋回事啊

Make dev 报错

ERROR in ./src/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' /Users/zhaozhe/Work/vue/mint-ui/packages/indicator/lib/style.css in /Users/zhaozhe/Work/vue/mint-ui/src
@ ./src/index.js 25:0-43
貌似是项目里没找到 css，但是项目里也确实是没有 css。

如何单独引入popup、picker等组件

像这样写 import { popup } from 'mint-ui' 是引入不了的，mint-ui对象里面没有popup
只能全局引入才可以吗？

msgbox-title 没有居中

没有此项 css
text-align:center

Pull-* don't work with non-touch devices

At least in the demo/docs, a mouse/trackpad doens't work. http://mint-ui.github.io/docs/#!/en

网站demo只有一个page全部重新渲染，效果不太好，最好有两个，有切换效果。会好些

请问 header 组件中的 title 值可以传入变量么？

<mt-header title="long long long long title">
  <mt-button v-link="'/'" icon="back" slot="left">back</mt-button>
  <mt-button icon="more" slot="right"></mt-button>
</mt-header>

想看源码学习一下，但有些组件怎么看不到源码

比如toast，始终没找到源码

用rem适配多个终端，mint改怎么配合转换呢

Button to docs only links to chinese

When I have english selected and press the documents button I still end up here:
http://mint-ui.github.io/docs/#!/zh-cn

should be:
http://mint-ui.github.io/docs/#!/en

搜索组件的放大镜icon显示位置偏上

<template>
  <mt-search
    :value.sync="results"
    cancel-text="取消"
    placeholder="搜索">
  </mt-search>
</template>

实际效果： 手机和电脑都这样。

0.1.14中，部分js组件的css未加载。

浏览器：chrome 53
测试： 0.1.14中。使用toast, MessageBox等组件均出现样式破损，检查后发现css类名中并没有相应的属性，应该是css未加载。
测试2： 使用0.1.3，则恢复正常。

使用的安装方法: （测试仅切换版本，未做其它改动。）

import Vue from 'vue';
import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css';

Vue.use(MintUI);

toast 弹出层做成单例模式会不会更好，要不然几秒内连续出现几个toast就会显得很奇怪。

请问如何动态绑定 filed内input的值。

因为field中的内容 主要用于提交使用，但因为它是片段组件，无法通过v-model绑定，如何能获取其中input的值， 或者把field中的输入内容绑定到一个特定的变量上呢。
想请教一下。

通过 babel-plugin-component 自动按需导入 loadmore 模块 ，样式没有被导入

loadmore 功能可以用，但是样式引入不进来。以下是我的代码片段：

页面组件导入 loadmore 模块：
import { Loadmore } from 'mint-ui'

.babelrc 文件：
"plugins": [ "transform-runtime", ["component", [{ "libraryName": "mint-ui", "style": true }]] ]

message box 性能问题

demo页面在微信中打开的时候，message box的动画非常的卡顿，而vux的没有这个问题。

action sheet 也是一样，上拉动画不流畅。

mint-ui button 样式问题

.mint-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 4px;
    border: 0;
    box-sizing: border-box;
    color: inherit;
    display: block;
    font-size: 18px;
    height: 41px;
    line-height: 41.6px;
    line-height: 2.6rem;
    outline: 0;
    overflow: hidden;
    position: relative;
    text-align: center
}

俩line-height 是啥意思，
我的rem值比较大，文字都跑外面去了...

picker组件 滑动不流畅

picker组件 滑动不流畅
特别是滚动即将完的、确定哪一项是选择项的这一个过程。比如滑动到 a和b的之间，这时候需要计算哪一个才是选择项，这时候不流畅。希望能抽出时间优化一下。

search样式破损

微信下search样式破损

魅蓝note2 Android5.1 Flyme-5.1.6.0A ： 有问题
华为mate8： 没问题

loadmore 上拉刷新的问题

因为采用上拉刷新的页面大部分都是可以点击的列表

在上拉刷新的时候 上拉手指都会停在屏幕上 一段时间 这样就很容易触发到页面上的click事件

这样就会很尴尬 。。。

希望能不能加个 droping的双向布尔属性 告诉我这边是在上拉了 我就想办法解绑列表的click属性呢

tab 不能左右滑动切换

tab类的tabbar, tabcontainer, navbar都不能左右滑动切换。

Swipe 组件的 mt-swipe-item能否用 v-for 循环渲染？

因为 swipe 的内容是从 api 获取的 所以想问下是否有这种功能？

vue组件中的style声明

vue组件中的style声明 lang = "css", 为什么却有能使用变量和混合等呢，感觉像是scss语法。package.json 中没有看到scss相关的插件依赖， 查了cooking的配置，也没有将scss集成进去。

请问mini-ui中的style 设置为lang = “css”， 为什么能使用变量等呢？

单独引入Indicator组件时缺少样式

当按需加载Indecator组件时

var Indicator = require('mint-ui/lib/indicator')
require('mint-ui/lib/indicator/style.css')

缺少下面的必要的动画样式：

.kebab-spinner-snake {
    -webkit-animation: kebab-spinner-rotate .8s infinite linear;
    animation: kebab-spinner-rotate .8s infinite linear;
    border: 4px solid transparent;
    border-radius: 50%;
}

中间的旋转图标不显示，而当我引入全部的css样式后才正常：

var Indicator = require('mint-ui/lib/indicator')
require('mint-ui/lib/style.css')

这说明在/lib/indicator/style.css这个文件中缺少相关样式？请补全

未支持触摸事件

经测试，button组件未支持触摸事件，由此在移动端带来的副作用有：
1.会同时激发click和touchstart事件
2.Button中使用disabled禁用按钮，无法禁用touch事件
另外，由此引出的另一个问题是当经由touch事件调起的popup事件会出现后立即消失，猜测原因是先触发了touch事件，后又触发了默认的click事件，需要手动在处理函数中preventDefault才能正常工作

针对移动端的ui组件没有针对触摸事件进行优化，可谓一大遗憾
强烈建议对移动端触摸事件的支持和优化

扩展messageBox

messageBox组件中message不支持模板字符串（html），只支持句子，
vue-modal-plugin这款插件支持，不知道怎么扩展messageBox

使用tabbar时候报错

项目开发环境：node v5.9.0; npm v3.7.3; mint-ui v0.1.17
使用vue 官方模板 webpack standard
使用mint-ui组件，按照实例给出的使用方式，选择了按需加载组件的方式。

使用代码如下：
main.js:

import Vue from 'vue'
import App from './App'
import 'mint-ui/lib/style.css'
/* eslint-disable no-new */
new Vue({
el: 'body',
components: {App}
})

App.vue:
template

script
import {tabbar} from 'mint-ui'
export default {
components: {
tabbar
}
}

错误提示为:
[Vue warn]: Unknown custom element: - did you mean ? HTML is case-insensitive, remember to use kebab-case in templates.

google下，发现同样的问题，不过这个项目不使用了vuex，原因是vuex的错误。
注;我的项目中没有使用vuex

把tabbar替换成我自己的.vue 模板，可以正确在渲染。
在build 文件中，可以找到mint-ui的样式，说明mint-ui样式已经引入；
注：build 文件中出现了变量没有被编译的问题

MessageBox.confirm，取消报错

MessageBox.confirm('确定执行此操作?').then(action => { ... });
点击取消按钮报错

field 组件怎么配合vue-validator呢

项目中使用了vue-validator作为表单验证的插件
由于form下包含了多个子组件， 这样的话整个表单有三级构成，如图：
注：第三级为引入mint-ui组件

请问min-ui怎么引入validate作为验证器呢

如何使用 vue-cli 生成的项目中使用

急
用的模板是 webpack-simple，babel 按照文档配置了，希望单独引入 picker
暂时出现的问题是，style 似乎没有效果

Indicator组件close后有几率出现，没有隐藏

dom 节点没有隐藏，导致界面的点击事件无效

官网demo页能开放源码么

你好，请问官网能开放源码么，很好奇是怎么实现的

trying make dist, get extract-text-webpack-plugin loader error

ERROR in /Users/${userName}//extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"remove":true}!/Users/${userName}/.cooking//vue-style-loader!/Users/${userName}//css-loader!/Users/${userName}/.cooking//vue-loader/lib/style-rewriter.js!/Users/${userName}/.cooking/~/vue-loader/lib/selector.js?type=style&index=0!./src/components/header.vue
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
at Object.module.exports.pitch (/Users/${userName}/node_modules/extract-text-webpack-plugin/loader.js:21:9)
@ ./src/components/header.vue 2:0-324

ERROR in /Users/${userName}/~/extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"remove":true}!/Users/${userName}/.cooking/~/vue-style-loader!/Users/${userName}/~/css-loader!/Users/${userName}/.cooking/~/vue-loader/lib/style-rewriter.js!/Users/${userName}/.cooking/~/vue-loader/lib/selector.js?type=style&index=0!./src/components/button.vue
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
    at Object.module.exports.pitch (/Users/${userName}/node_modules/extract-text-webpack-plugin/loader.js:21:9)
 @ ./src/components/button.vue 2:0-324

ERROR in /Users/${userName}/~/extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"remove":true}!/Users/${userName}/.cooking/~/vue-style-loader!/Users/${userName}/~/css-loader!/Users/${userName}/.cooking/~/vue-loader/lib/style-rewriter.js!/Users/${userName}/.cooking/~/vue-loader/lib/selector.js?type=style&index=0!./src/components/cell.vue
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
    at Object.module.exports.pitch (/Users/${userName}/node_modules/extract-text-webpack-plugin/loader.js:21:9)
 @ ./src/components/cell.vue 2:0-322

ERROR in /Users/${userName}/~/extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"remove":true}!/Users/${userName}/.cooking/~/vue-style-loader!/Users/${userName}/~/css-loader!/Users/${userName}/.cooking/~/vue-loader/lib/style-rewriter.js!/Users/${userName}/.cooking/~/vue-loader/lib/selector.js?type=style&index=0!./src/components/field.vue
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
    at Object.module.exports.pitch (/Users/${userName}/node_modules/extract-text-webpack-plugin/loader.js:21:9)
 @ ./src/components/field.vue 2:0-323

ERROR in /Users/${userName}/~/extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"remove":true}!/Users/${userName}/.cooking/~/vue-style-loader!/Users/${userName}/~/css-loader!/Users/${userName}/.cooking/~/vue-loader/lib/style-rewriter.js!/Users/${userName}/.cooking/~/vue-loader/lib/selector.js?type=style&index=0!./src/components/badge.vue
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
    at Object.module.exports.pitch (/Users/${userName}/node_modules/extract-text-webpack-plugin/loader.js:21:9)
 @ ./src/components/badge.vue 2:0-323

根据文档的开始去引入，提示找不到模块

根据文档的描述，如下引用：
`import Vue from 'vue';

import Mint from 'mint-ui';

Vue.use(Mint);`
总是提示我找不到模块，请问我该如何排查问题哇。

English translation

Mint-UI looks great, looking forward to English translation of the main site in time :)

picker组件 如何设置初始选中值？

picker组件 如何设置初始选中值？比如一渲染出来的时候就是选中第6排

网站上的二维码地址和实际地址不一致

http://elemefe.github.io/mint-ui/#!/

messageBox状态没有同步

我的页面里有A,B按钮触发两个messageBox，当第一次点击A弹出msgbox的时候，提示内容一切正常，接着点击B，发现msgbox的内容还是A的内容，接着点击A，发现A的内容变成了B的内容。

我是这样引入的，CSS单独拷贝到了自己的CSS文件中,
import MessageBox from 'mint-ui/lib/msgbox';

0.1.15中，messageBox组件样式破损。

RT,显示异常。
测试环境和前两次一致。

文档栗子错误

文档中tabbar 组件部分, 栗子
import { Tabbar, TabbarItem } from 'mint-ui';
中导出的变量名TabbarItem有误...应为TabItem

文档的无限滚动demo写错了吧

Vue.directive(InfiniteScroll.name, InfiniteScroll);

如何在Field内添加图片元素呢。

想做出验证码图片显示在输入框的右边，请问想嵌入field元素中如何实现呢。