mint ui官网手册（ZUI 和mint-ui，element ui哪个更适合用VUE开发）

本文目录

• ZUI 和mint-ui，element ui哪个更适合用VUE开发
• mintui里action sheet怎么使用回调函数
• 如何使用mintui和webpack开发
• mint-ui里的badge怎么用
• mint ui 的tabbar怎么使用

ZUI 和mint-ui，element ui哪个更适合用VUE开发

minit-ui是移动端是饿了么团队开发的，后者element-ui是PC端也是饿了么团队开发的，无论是移动端或者PC端结合Vue都比较适合开发，ZUI组件不是很强大，可以满足一般程序的需求。

1. ZUI系统最显著的特性之一,通过构建完善的系统级防护,打造自动安全的能力。并通过基于大数据下的多级递进自启拦截防护引擎,有效追踪家族应用、跨家族应用；

2. 如果你只需要使用某个组件，可以仅引入这个组件，Mint UI 能够保证在代码打包时，与这个组件无关的文件不会出现在最终代码里。

mintui里action sheet怎么使用回调函数

《mt-actionsheet
:actions=“actions“
v-model=“sheetVisible“》
《/mt-actionsheet》
data() {
return {
sortType: 1, //默认排序
actions: [
{ name: ’默认’, type: 1, method: this.clickAction },
{ name: ’热度’, type: 2, method: this.clickAction },
{ name: ’最新’, type: 3, method: this.clickAction },
],
sheetVisible: false,
}
},
// 打开action sheet
actionSheet(){
this.sheetVisible = true
},
//选择排序类型
clickAction(e){
this.sortType = e.type
},

如何使用mintui和webpack开发

需求来看下我们的需求:使用webpack-dev-server做开发时的服务器在webpack-dev-server里使用路由，访问/a时候显示a.html，/b显示b.html打包成多个html，给其中引用到资源加md5戳主要目录结构├——src│└——views#每一个文件夹对应一个页面│└——a│└——index.js│└——b│└——index.js├——output#打包输出的目录|└——└——template.html#将根据这个模版，生成各个页面的html└——webpack.config.js└——dev-server.js#webpack-dev-server+express只列出了主要的目录，这里我们根据一个template.html来生成多个页面的html，他们之间只有引用的资源路径不同。当然，你也可以每个页面单独使用一个html模版。Webpack配置这里主要解决两个小问题。1.打包多个页面的js文件读取src/views下的目录，约定每一个目录当成一个页面，打包成一个jschunk。2.打包多个html循环生成多个HtmlWebpackPlugin插件，把每一个插件的chunks各自指向上面打包的jschunk。//webpack.config.jsvarglob=require(’glob’);varwebpackConfig={/*一些webpack基础配置*/};//获取指定路径下的入口文件functiongetEntries(globPath){varfiles=glob.sync(globPath),entries={};files.forEach(function(filepath){//取倒数第二层(view下面的文件夹)做包名varsplit=filepath.split(’/’);varname=split[split.length-2];entries[name]=’./’+filepath;});returnentries;}varentries=getEntries(’src/view/**/index.js’);Object.keys(entries).forEach(function(name){//每个页面生成一个entry，如果需要HotUpdate，在这里修改entrywebpackConfig.entry[name]=entries[name];//每个页面生成一个htmlvarplugin=newHtmlWebpackPlugin({//生成出来的html文件名filename:name+’.html’,//每个html的模版，这里多个页面使用同一个模版template:’./template.html’,//自动将引用插入htmlinject:true,//每个html引用的js模块，也可以在这里加上vendor等公用模块chunks:[name]});webpackConfig.plugins.push(plugin);})路由配置在多页应用下，我们希望访问的是localhost:8080/a，而不是localhost:8080/a.html。由于webpack-dev-server只是将文件打包在内存里，所以你没法在express里直接sendfile(’output/views/a.html’)，因为这个文件实际上还不存在。还好webpack提供了一个outputFileStream，用来输出其内存里的文件，我们可以利用它来做路由。注意，为了自定义路由，你可能需要引进express或koa之类的库，然后将webpack-dev-server作为中间件处理。//dev-server.jsvarexpress=require(’express’)varwebpack=require(’webpack’)varwebpackConfig=require(’./webpack.config’)varapp=express();//webpack编译器varcompiler=webpack(webpackConfig);//webpack-dev-server中间件vardevMiddleware=require(’webpack-dev-middleware’)(compiler,{publicPath:webpackConfig.output.publicPath,stats:{colors:true,chunks:false}});app.use(devMiddleware)//路由app.get(’/:viewname?’,function(req,res,next){varviewname=req.params.viewname?req.params.viewname+’.html’:’index.html’;varfilepath=path.join(compiler.outputPath,viewname);//使用webpack提供的outputFileSystemcompiler.outputFileSystem.readFile(filepath,function(err,result){if(err){//somethingerrorreturnnext(err);}res.set(’content-type’,’text/html’);res.send(result);res.end();});});module.exports=app.listen(8080,function(err){if(err){//dosomethingreturn;}console.log(’Listeningat

mint-ui里的badge怎么用

首先放上mint-ui中文文档

近来在使用mint-ui，发现部分插件在讲解上并不是很详细，部分实例找不到使用的代码。github上面的分享，里面都是markdown文件，内容就是网上的文档
刚好自己在用，网上能找到的资料也不是很详细，自己写写咯。持续更新...emmmmm，应该可以吧，我这么懒。希望能给别人带来帮助。

介绍一下mint-ui的特性

特性介绍

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

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

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

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

这个组件库，适合于基于vue的手机页面开发。

1.cell的使用

先丢个图↓

在做switch的时候，想做成文字和switch在列表的两侧。效果出不来，发现有很多人跟我一样死命的钻switch的文档，以及找switch的相关资料。然后实际上，应该用cell才对。

?

123
•    
《mt-cell title=“开关状态“》 《mt-switch v-model=“openValue“ @change=“changeStatus“》《/mt-switch》《/mt-cell》
•    

利用cell的布局，和switch相结合。产生下面的结果。

2.Infinite scroll 和 Navbar结合使用

Navbar 是这样的↓

Infinite scroll 是这样的↓

两个结合起来，就是把Infinite scroll嵌套在 《mt-tab-container-item id=“1“》《/mt-tab-container-item》里面，然后效果就出来了。


简单的就是酱紫的。

?

12345678910111213141516171819202122
•    
《mt-navbar v-model=“selected“ 》 《mt-tab-item id=“1“》选项一《/mt-tab-item》 《mt-tab-item id=“2“》选项二《/mt-tab-item》《/mt-navbar》《mt-tab-container v-model=“selected“》 《mt-tab-container-item id=“1“》 《div v-infinite-scroll=“loadMore“  infinite-scroll-disabled=“loading“  infinite-scroll-distance=“10“  class=“content“ 》 《/div》 《/mt-tab-container-item》 《mt-tab-container-item id=“2“》 《div v-infinite-scroll=“loadMoreReceive“  infinite-scroll-disabled=“loadingReceive“  infinite-scroll-distance=“10“  class=“content“ 》 《/div》 《/mt-tab-container-item》《/mt-tab-container》
•    

这样基本页面就出来了。

mint ui 的tabbar怎么使用

第一步：使用xCode的SplitView模版生成一个新项目并编译保存。第二步：再用xCode的TabBar模版作为你的新项目并编译保存，假设项目名为SplitInTabBarAppDelegate第三步：在第二步的项目中加一个新Tab第四步：把第一步生成的项目中的RootViewContr...