Mint-ui(移动组件库) Element-ui

Mint-ui

简介

1. 基于 Vue.js 的移动端组件库

2. Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。

3. 真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。

4. 考虑到移动端的性能门槛，Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。

5. 依托 Vue.js 高效的组件化方案，Mint UI 做到了轻量化。即使全部引入，压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。

安装及引入

1. cnpm install mint-ui --save-dev
2. 引入

• 按需引入,在页面中引入所使用到的插件

// 按需引入部分组件
import { Cell, Checklist } from 'mint-ui';

• 全部引入

全部引入无效，还是要在页面中引入所用的插件，所以都使用按需引入

import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);

3. 在main.js中导入css样式

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

示例

1. 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>

2. 图片轮播

• 引入需要的组件

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,按需使用
  

3. 时间选择

• 引入需要组件

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

简介

1. PC端组件库
2. 学习网站 ：https://element.eleme.cn/#/zh-CN/component/icon

安装

1. install可以简写为i cnpm i element-ui --save-dev
2. 导入css库 import 'element-ui/lib/theme-chalk/index.css'

因为没有相关的解析字体文件，所以会疯狂报错
解决：

1. 查看package.json中有没有url-loader,如果没有则需要安装cnpm install url-loader --save-dev
2. 安装成功后在webpack.config.js的rules中配置相关的解析文件
   { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader' }
3. 装完后不会报错

3. 待解决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'

之后直接摘抄官网中组件的用法即可

示例

1. 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>

实现效果

2. 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>