Mint UI

1.组件库基础

1.1 什么组件?

组件(Component)是对复用的结构<template>、表现(<style>)及行为<script>的封装，其优势在于一次定义，多次使用。

组件库是由多个组件形成的完整的架构体系。

1.2 组件库的分类

根据组件库应用平台的不同，可以分为：

• 移动端组件库
  • Mint UI(饿了吗) – http://mint-ui.github.io/#!/zh-cn
  • Vant UI(有赞) – https://vant-contrib.gitee.io/vant/#/zh-CN/
  • Cube UI(滴滴) – https://didi.github.io/cube-ui/#/zh-CN
• 桌面端组件库
  • Element UI(饿了吗) – https://element.eleme.cn/#/zh-CN
  • AT-UI(凹凸实验室) – https://at-ui.github.io/at-ui/
  • View UI(视图更新) – https://iviewui.com/

UI(User Interface)，用户接口

2. Mint UI基础

Mint UI是基于Vue.js 的移动端组件库。

2.1 安装

A.启动Windows操作系统的命令行，并且切换到脚手架目录

B.输入以下命令

npm install --save mint-ui

当前脚手架安装过哪些的模块，可以在脚手架根目录下的package.json中进行查看

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kibKHDaz-1618883581760)(assets/image-20201030102302381.png)]

2.2 配置Mint UI

配置Mint UI需要在脚手架根目录下的src/main.js中实现

A.在脚手架中导入所有的Mint UI 组件

import MintUI from 'mint-ui';

B.导入样式表文件

import 'mint-ui/lib/style.min.css';

C.通过Vue.use()方法将Mint UI注册为Vue的插件

Vue.use(MintUI);

3.Mint UI组件库的使用

· Header 组件

Header组件用于实现顶部导航，其语法结构是：

<mt-header title="导航文本" fixed>
</mt-header>

fixed 属性用于控制是否固定在顶部，布尔属性

在<mt-header>中可以嵌套子元素，此时必须为子元素添加slot="left"或slot="right"属性

slot称为插槽，是预留给使用者自定义内容的区域。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6dHbQIY0-1618883581762)(assets/image-20201030141944781.png)]

· Button 组件

Button组件为按钮组件，其语法结构是：

<mt-button type="按钮类型" size="尺寸" icon="图标" disabled plain>
</mt-button>

按钮类型有：default(默认)、primary(主要的)、danger(危险的)

按钮的尺寸有：small(小的)、normal(标准的)、large(大的)

图标类型有：back(返回)、more(更多)

disabled属性用于控制按钮是否为禁用状态，布尔属性

plain属性用于控制按钮是否为镂空按钮，布尔属性

· Field 组件

Field组件用于实现表单编辑器，其语法结构是：

<mt-field 
	type="输入框的类型"
    label="标签"
    placeholder="占位提示内容"
    state="状态"
    :attr="{...}"
    disableClear
    readonly
    disabled>
	
</mt-field>

输入框的类型有：text、password、textarea、email、url等

状态包括：success(成功)、error(错误)、warning(警告)

:attr属性用于使用HTML5表单组件的原生属性，object类型，如

 <mt-field 
      type="password" 
      label="密码"
      placeholder="请输入密码"
      :attr="{maxlength:10,autocomplete:'off'}"
      state="error">
</mt-field>  

disableClear属性用于控制是否显示清理按钮，布尔类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uVpXtUl8-1618883581765)(assets/image-20201030155541774.png)]

readonly属性用于控制是否只读，布尔类型

disabled属性用于控制是否禁用，布尔类型

表单实质上就是数据表结构的映射

新增型的表单中(如用户注册、添加配送地址等)输入框的默认值可以为空

修改型的表单中(如编辑个人注册信息，编辑配送地址等)输入框"必须"存在默认值

新增型的表单映射为SQL中的INSERT操作，修改型的表单映射为SQL中的UPDATE操作

· Toast 组件

Toast组件用于显示短消息提示框，其语法结构是：

//简捷语法
this.$toast("提示内容")
//标准语法
this.$toast({
    message:"提示内容",
    position:"位置(top|middle|bottom)",
    duration:持续时长(3000ms) -- 数值类型
})

示例代码如下：

methods:{
	handle(){
		this.$toast({
			message:"错误提示",
			duration:5000
		})
	}
}