Mint-ui
简介
- 基于
Vue.js
的移动端组件库- Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。
- 真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大。
- 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。
- 依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化。即使全部引入,压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。
安装及引入
cnpm install mint-ui --save-dev
- 引入
- 按需引入,在页面中引入所使用到的插件
// 按需引入部分组件
import { Cell, Checklist } from 'mint-ui';
- 全部引入
全部引入无效,还是要在页面中引入所用的插件,所以都使用按需引入
import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);
- 在
main.js
中导入css样式
import 'mint-ui/lib/style.css'
示例
-
messagebox
示例
- 在
app.vue
项目中引入
import {MessageBox} from 'mint-ui'
- 直接使用组件(点击触发的事件添加到
methods
中) - 完整代码
<template>
<div id="app">
<button @click="alert">打开confirm弹框</button>
</div>
</template>
<script>
import {MessageBox} from 'mint-ui'
export default {
name: "app",
data() {
return {};
},
methods: {
alert() {
MessageBox({
title: "提示",
message: "确定执行此操作?",
showCancelButton: true
});
}
}
};
</script>
- 图片轮播
- 引入需要的组件
import { Swipe, SwipeItem} from "mint-ui";
- 如果想直接使用组件,在component中声明用到的组件(名称为模板默认,也可以自己自定义)
components: {
"father": Swipe,//引号中可以自己改名
"mt-swipe-item": SwipeItem
}
- 画完页面后没有显示,根据样式(高度是父元素100%等,将组件用div包起来后给div设置高度,并给组件设置背景色)
<div style="height:100px">
<father :auto="4000">
<mt-swipe-item>
<div class="common">1</div>
</mt-swipe-item>
<mt-swipe-item>
<div class="common">2</div>
</mt-swipe-item>
<mt-swipe-item>
<div class="common">3</div>
</mt-swipe-item>
</father
</div>
<style>
.common{
height: 100px;
background: rgb(22, 196, 129);
text-align: center;
}
</style>
- 从官网中也能查到组件的一些其他api,按需使用
- 时间选择
- 引入需要组件
import { DatetimePicker } from "mint-ui";
- 通过页面中的一个按钮触发
<button @click="opentime">open time</button>
- 添加组件(组件中已经写好了按下确认键的事件名称:
confirm
)
<div>
<mt-datetime-picker
ref="picker"
type="date"
year-format="{value} 年"
month-format="{value} 月"
date-format="{value} 日"
v-model="pickerValue"
@confirm="handleConfirm"
></mt-datetime-picker>
</div>
- 将相关函数添加到方法methods中
opentime() {
this.$refs.picker.open();
},
handleConfirm() {
console.log(this.pickerValue);
}
Element-ui
简介
- PC端组件库
- 学习网站 :
https://element.eleme.cn/#/zh-CN/component/icon
安装
- install可以简写为i
cnpm i element-ui --save-dev
- 导入css库
import 'element-ui/lib/theme-chalk/index.css'
因为没有相关的解析字体文件,所以会疯狂报错
解决:
- 查看package.json中有没有
url-loader
,如果没有则需要安装cnpm install url-loader --save-dev
- 安装成功后在
webpack.config.js
的rules
中配置相关的解析文件{ test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader' }
- 装完后不会报错
- 待解决bug使用时图标无法加载显示
百度后发现说查看package中element-ui的版本和官网https://element.eleme.cn/#/zh-CN/component/icon
版本是否相同,查看后没有问题但还是无法正常显示
引入
推荐使用全局引入
在main.js中引入:
import ElementUI from 'element-ui';
Vue.use(ElementUI);
import 'element-ui/lib/theme-chalk/index.css'
之后直接摘抄官网中组件的用法即可
示例
- DatePicker 日期选择器
直接将官网中的内容复制到页面中(组件已经全局引入的前提下)
<template>
<div id="app">
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
</div>
<div class="block">
<span class="demonstration">带快捷选项</span>
<el-date-picker
v-model="value2"
align="right"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions1"
></el-date-picker>
</div>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
pickerOptions1: {
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [
{
text: "今天",
onClick(picker) {
picker.$emit("pick", new Date());
}
},
{
text: "昨天",
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit("pick", date);
}
},
{
text: "一周前",
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", date);
}
}
]
},
value1: "",
value2: ""
};
},
components: {},
methods: {}
};
</script>
<style>
</style>
实现效果
- messagebox弹框
<template>
<div id="app">
<el-button type="text" @click="open">点击打开 Message Box</el-button>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {};
},
components: {},
methods: {
open() {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
}
};
</script>
<style>
</style>