1.组件库基础

1.1 什么组件?

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

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

1.2 组件库的分类

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

UI(User Interface)，用户接口

2. Mint UI基础

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

2.1 安装

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

B.输入以下命令

1
2
npm install --save mint-ui

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

image-20201030102302381

2.2 配置Mint UI

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

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

1
2
import MintUI from 'mint-ui';

B.导入样式表文件

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

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

1
2
Vue.use(MintUI);

3.Mint UI组件库的使用

· Header 组件

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

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

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

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

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

image-20201030141944781

· Button 组件

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

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

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

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

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

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

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

· Field 组件

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<mt-field 
	type="输入框的类型"
    label="标签"
    placeholder="占位提示内容"
    state="状态"
    :attr="{...}"
    disableClear
    readonly
    disabled>
	
</mt-field>


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

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

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

1
2
3
4
5
6
7
8
9
<mt-field 
   type="password" 
   label="密码"
   placeholder="请输入密码"
   :attr="{maxlength:10,autocomplete:'off'}"
   state="error">
</mt-field>


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

image-20201030155541774

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

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

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

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

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

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

· Toast 组件

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

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

示例代码如下：

1
2
3
4
5
6
7
8
9
methods:{
	handle(){
		this.$toast({
			message:"错误提示",
			duration:5000
		})
	}
}

就先到这了!!!