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

秒速五厘米 2023-06-19 06:49 18阅读 0赞

## 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);

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

1.  图片轮播

*  引入需要的组件

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,按需使用  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]

1.  时间选择

*  引入需要组件

import {  DatetimePicker } from "mint-ui";

*  通过页面中的一个按钮触发

*  添加组件（组件中已经写好了按下确认键的事件名称：`confirm`）

*  将相关函数添加到方法methods中

opentime() { 
          this.$refs.picker.open();
        },
        handleConfirm() { 
          console.log(this.pickerValue);
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]

## 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.  装完后不会报错

1.  待解决bug使用时图标无法加载显示![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]  
    百度后发现说查看package中element-ui的版本![在这里插入图片描述][20191204235300991.png]和官网`https://element.eleme.cn/#/zh-CN/component/icon`![在这里插入图片描述][20191204235158967.png]  
    版本是否相同，查看后没有问题但还是无法正常显示

### 引入 ###

> 推荐使用全局引入  
> 在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>

实现效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 3]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191204222132680.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191204224442989.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191204234609276.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70
[20191204235300991.png]: https://img-blog.csdnimg.cn/20191204235300991.png
[20191204235158967.png]: https://img-blog.csdnimg.cn/20191204235158967.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191204233358421.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70