mint-ui框架使用简介（加载弹窗、无限加载）

最新推荐文章于 2025-06-03 20:48:04 发布

原创最新推荐文章于 2025-06-03 20:48:04 发布 · 533 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#MintUI

框架专栏收录该内容

20 篇文章

订阅专栏

本文介绍了Mint-UI在Vue项目中的引入和使用方法。首先可查看其官方中文Vue2.0文档，通过npm进行安装。引入方式有全局引入和局部引入，局部引入需安装相关插件并修改配置文件。还列举了加载弹窗和无限加载等组件的使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、查看 mint-ui 官方文档（中文Vue2.0）
2、npm install mint-ui
3、全局引入，在项目 main.js 中：
（开发全局引入，打包或上线时做前端优化减少项目体积，可采用局部引入（按需引入））

可参考mint-ui 官方文档，局部引入：
a、安装 npm install babel-plagin-component -D
b、将 .babelrc 修改为：
在这里插入图片描述

在 main.js 里引入：

按需引入，当用到的mint-ui中的标签时，需要每个标签都引入。根据报错，添加依赖引入的标签
组件引入mint-ui 布局，依赖的标签：

添加依赖引入的标签：

import MintUI from 'mint-ui'   // 引入插件
import 'mint-ui/lib/style.css'  // 样式
Vue.use(MintUI)      // 使用

一、加载弹窗( Indicator )
例如：引入请求数据时的弹窗，在文档中找到对应插件，并引入
在这里插入图片描述
在请求数据时 Indicator.open(),请求完 Indicator.close(),此处使用setTimeout 进行数据请求模拟

以下为请求数据加载的 Indicator 的样式

二、无限加载( Infinite scroll )

例：主题列表商品上滑加载

<template>
	<div >
        <Header back=1 :title='title'></Header>
        <div class='top'>
        	<img :src="root+topimg" alt="">
        </div>
      
		<div
		  v-infinite-scroll="loadMore"
		  infinite-scroll-disabled="loading"
		  infinite-scroll-distance="0">
			
		  <ProductList :products='products'></ProductList> 
		</div>

	</div>
</template>

<script>
import Header from 'common/Header'
import ProductList from 'common/ProductList'
export default{
	name:'Theme',
	components:{Header,ProductList},
	data(){
		return {
			title : '零食商贩',
            topimg:'/static/1@theme-head.png',
            products:[],
            root:'http://47.95.207.1:3000',
            list:[1,2,3,4,5,6,7,8,9,10],
            page:1

		}
	},

	methods:{
		loadMore() {
		  this.loading = true;
		  this.page+=1
	    this.loadmore(this.$route.params.themeId,this.page)
		},
		loadmore(id,page){
			//加载其他页数的数据信息
			this.$axios.get(`/xixi/api/getThemeById?themeid=${id}&page=${page}`)
	          .then((res)=>{
	          	this.loading=false;
	            this.products=this.products.concat(res.data.products)
	            //链接两个数组
	          	console.log(res);
	          })
		},
		initData(id,page){
          this.$axios.get(`/xixi/api/getThemeById?themeid=${id}&page=${page}`)
          .then((res)=>{
            this.topimg=res.data.topimg
            this.products=res.data.products
          	console.log(res);
          })
		}
	},
	created(){
		console.log(this);
		console.log(this.$route);
		//头部信息
		this.title=this.$route.params.name
		// 根据themeid 发起请求   获取列表数据进行渲染
		this.initData(this.$route.params.themeId,1)


	}
}
</script>

<style lang="less" scoped>
@import url('../../../style/main.less');
.top{
	.w(375);
	.m_t(45);
	img{
		.w(375);
	}
}	
</style>