mint ui？mint-ui里的badge怎么用
本篇文章给大家谈谈mint ui，以及mint-ui里的badge怎么用对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。
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>这样基本页面就出来了。
mintui轮播——图片设置100%,高度自适应
方法一、
css实现：（此例中图片宽高比例为1:1）
<mt-swipe :auto="4000" style='height: 0;padding-bottom: 100%;width: 100%;'>
<mt-swipe-item style="height: 0;padding-bottom: 100%;width: 100%;" v-for="item in list" :key="item.id">
<img :src="item.img" class="swipepic">
</mt-swipe-item>
</mt-swipe>
就是通过padding-top或者padding-bottom实现，高度设置为0。这个属性当它的值为百分比的时候，是按该元素的宽度来计算的。也就是说当设为100%的时候，其高度就等于自身的宽度，形成一个正方形。也就是说可以通过这个来设置已知尺寸比例的图片宽度100%高度自适应。
方法二、
使用js判断图片的宽度得到具体数值之后，再来利用js设置图片的高度，具体实现请打开百度，另外请注意：用js实现的时候需要监控页面缩放变化以达到自适应。
Linux mint与Ubuntu哪个好有什么区别
Linux Mint是基于Ubuntu的，Ubuntu的核心是Debian。如果你正在使用Mint或者Ubuntu，其实某种程度上来讲使用的是Debian。
Ubuntu于2004年首次进入Linux领域，因为Ubuntu是基于Debian的，包的格式是.deb，每六个月更新一次。
Linux Mint比Ubuntu年轻很多，因为它是基于这个版本的。2006年首次进入Linux领域，基于Ubuntu KDE迭代，每六个月更新一次。
它们的构建完全相同，但是两者之间还有很大变化。Mint看起来更加像windo，而Ubuntu对Mac OS X用户来说更熟悉。
Ubuntu使用所谓的Unity UI，左侧有一个基座，包含基本的应用程序图标，包含用于浏览的Firefox和用于提高工作效率的Libre Office。
Mint有一个名为Cinnamon的界面，类似于Windows，将任务栏放在底部，并具有类似于Microsoft OS的开始菜单。
性能方面，Ubuntu与Mint没有太大区别。Mint在日常使用看起来更快一些，在旧的硬件上，肯定会感觉更快，而Ubuntu似乎就不是了。
成本方面，Ubuntu与Mint都是不需要花费的。Mint的定位是一个为社区驱动的项目，依赖于用户、赞助商;而Ubuntu是一家商业公司，可以免费下载、安装和使用，提供支持肯定需要付费的。
Mint UI popup 的使用
一安装
1. npm安装
npm i mint-ui@1-S
2 使用
importVuefrom'vue'
importMintUIfrom'mint-ui'
import'mint-ui/lib/style.css'
importAppfrom'./App.vue'
Vue.use(MintUI)
newVue({
el:'#app',
components:{ App}
})
安装 babel-plugin-component：
npm install babel-plugin-component-D
然后，将.babelrc修改为：
3使用 Popup组件
（1）在你的vue文件里面引入这个组件
import { MessageBox, Popup, Button } from "mint-ui";
其他两个是其他的组件，需要的话直接在后面加入就可以了
（2）复制粘贴组件
<mt-popup v-model="popupVisible"
position="center"
class="dddddd"
modal=false>
<div> 内容</div>
<mt-button type="primary"
@click="btnPop"
class="btnPop">我知道了</mt-button>
</mt-popup>
1如果弹窗需要设置 border-radius这个属性但是组件里面的div设置不生效的话，可以试试给组件起个class名字然后再去设置，因为的我的不管用。
2.组件里面的div可以正常写你所需要的样式和需求
3，mt-button也是mint-ui的组件 可以用按钮的方法关闭弹窗
4，需要在data里面设置初始值为false然后 methods里面正常写弹窗打开关闭的方法就可以了
第一天
感谢您的阅读！希望本文对解决您关于mint ui和mint-ui里的badge怎么用的问题有所帮助。如果您还有其他疑问，欢迎随时向我们提问。