mint-ui的使用

mint-ui 也是由某团队开发的，与 element-ui 相比，mint-ui 主要用于移动端开发，mint-ui 同样提供了样式组件、表单组件以及 JS 组件，其很大程度提高了项目开发效率，下面讲解在 Vue 项目中如何使用 mint-ui。

安装mint-ui

在终端中执行以下命令。

npm install mint-ui -S

mint-ui使用方式

mint-ui 同样分为完整引入和按需引入，为了提高页面加载速度，这里讲解按需引入的方式。

全局使用mint-ui

打开 main.js，以 button 组件为例，代码如下。

//1．按需引入button组件
import { Button } from 'mint-ui';
//2．注册组件
Vue.component(Button.name, Button);
//3．引入样式
import 'mint-ui/lib/style.css'

mint-ui 需要手动引入 CSS 样式。如果使用了 element-ui 的 button 样式，mint-ui 的 button 样式就不要再使用了，因为两者同时使用会起冲突。

在HelloWorld组件中使用mint-ui按钮

代码如下。

<mt-button type="primary">primary</mt-button>

运行结果如图 8-3 所示。

image 2025 02 11 16 47 46 748
Figure 1. 图8-3　使用mint-ui按钮

组件内使用 mint-ui JS 组件：上述演示的内容为 CSS 样式组件，下面讲解JS功能组件，例如单击按钮弹出对话框。

打开 HelloWorld 组件，弹框组件名字为 Toast（组件名字在官网可查），首先引入组件，具体代码如下。

<template>
  <div class="hello">
    //2．单击按钮绑定单击事件
    <mt-button type="primary" @click="btn">primary</mt-button>
  </div>
</template>

<script>
//1．按需引入组件
import { Toast } from "mint-ui";

export default {
  name: "HelloWorld",
  data() {
    return {};
  },
  methods: {
    btn() {
      //3．使用mint-ui提供的弹框方法Toast
      Toast("Upload Complete");
    }
  }
};
</script>

代码解析如下。

  • 在 HelloWorld 中引入组件。

  • 单击按钮触发绑定事件。

  • 在事件方法中调用 mint-ui 组件方法，运行程序，单击按钮可弹出对话框。