MintUI

MintUI

MintUI是饿了么团队开发的基于vue的移动端组件库。

http://mint-ui.github.io/#!/zh-cn

vantUI是有赞团队开发的基于vue的移动端组件库。

https://vant-contrib.gitee.io/vant/#/zh-CN/

 

基于脚手架安装MintUI

 

新建脚手架项目。

# 找一个空目录   day01/demo 
vue create scaffolding
# 依次选择
Manally select Features   手动选择
Choose Vue Version/Babel/Router/Vuex 去掉 Lintter
2.X
是否使用history模式？   Yes
In package.json
是否把当前配置作为以后创建项目时的预设配置？   No
在新项目中通过npm命令安装MintUI。

# 进入项目目录后执行安装命令
cd scaffolding
npm i mint-ui -S
安装完成后，将会在node_modules中出现mint-ui文件夹。还会在package.json中的dependencies配置项中出现mint-ui。

在脚手架项目main.js中， 配置MintUI。

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
开始使用。

需求：访问http://localhost:8080/button, 可以看到Button.vue页面。

新建vue页面： src/testing/Button.vue，按照文档编写MintUI中的Button组件。

<!-- src/testing/Button.vue -->
<template>
  <div>
    <mt-button type="default">default</mt-button>
    <mt-button type="primary">primary</mt-button>
    <mt-button type="danger">danger</mt-button>
  </div>
</template>
配置路由，router/index.js，目的是为了告诉vue， 当客户端访问/button时，页面中需要显示Button.vue中定义的内容。

import Button from '../testing/Button.vue'
const routes = [
  {
    path: '/button',
    component: Button
  },
]

　　

MintUI常用组件

Header组件

header组件用于定义移动端界面的头部标题栏。基本结构如下：

<mt-header title="标题栏正中间的文本">
    <div slot="left">返回</div>
    <div slot="right">登录</div>
</mt-header>

案例：

1. 新建页面： testing/Header.vue。编写头部标题栏的内容。

2. 配置路由： /header <---> Header.vue

 

引入外部样式表reset.css

1. public下新建styles目录， 把reset.css放进去。

2. 在index.html中引入该css文件即可。

注意， 这种方式可以引入任何三方的js、css。

 

Field组件

field组件用于实现表单编辑器。其语法结构：

<mt-field   type="输入框的类型"
            label="文本框左侧的标签文本"
            placeholder="占位内容"
            state="输入框的状态：success|error|warning"
            readonly    只读
            disabled    禁用
            disableClear  是否禁用清空按钮>
</mt-field>

案例：访问： /field， 看到testing/Field.vue。

 

VUEUI Unit03

Field组件

field组件用于实现表单编辑器。其语法结构：

<mt-field   type="输入框的类型"
            label="文本框左侧的标签文本"
            placeholder="占位内容"
            state="输入框的状态：success|error|warning"
            readonly    只读
            disabled    禁用
            disableClear  是否禁用清空按钮>
</mt-field>

案例：访问： /field， 看到testing/Field.vue。

 

实现注册页面

1. 新建views/Register.vue，其中编写注册页面内容。

2. 配置路由： /register <---> Register.vue

3. 实现注册页面的表单验证。

 

Field组件的@blur失效问题

在MintUI中，为Field组件绑定焦点失去、焦点获取事件的方式如下：

<mt-field type="text" @blur.native.capture="checkName">
</mt-field>
<mt-field type="text" @focus.native.capture="checkName">
</mt-field>

为mt-field组件直接添加@blur无效，因为会被vue当做是mt-field的一个自定义事件。这种时间需要在mt-field中使用$emit触发。而我们需要捕获的是input标签的原生blur事件（在焦点失去是自动触发）。所以需要告诉vue该blur事件为原生事件，所以需要添加事件修饰符：@blur.native. 但是这样还不够。

mt-field组件在编译时将会被编译成一个a标签：

<a class="mint-cell mint-field">
    <div class="mint-cell-left"></div> 
    <div class="mint-cell-wrapper">
        <div class="mint-cell-title">
            <span class="mint-cell-text">用户名</span>
        </div>
        <div class="mint-cell-value">
            <input placeholder="请输入用户名" 
                   type="text" class="mint-field-core"> 
            <div class="mint-field-clear">
                <i class="mintui mintui-field-error"></i>
            </div>
            <div class="mint-field-other"></div>
        </div>
    </div>
    <div class="mint-cell-right"></div>
</a>

@blur将会被绑定在最外层的a标签上，而浏览器默认input元素的blur事件不向a标签传递。所以不会执行a标签上的blur。所以需要添加：@blur.native.capture，capture的作用是使a的blur事件处理函数在事件捕获阶段先执行。