Mint UI 基于 Vue.js 移动端组件库(3)

<template>
 <h1>mint-ui-example</h1>
 <mt-button
 type="primary"
 @click="sheetVisible = true">
 选择操作
 </mt-button>
 <mt-actionsheet
 cancel-text=""
 :actions="actions"
 :visible.sync="sheetVisible">
 </mt-actionsheet>
</template>
<script>
 import { Toast, MessageBox } from 'mint-ui';
 export default {
 name: 'app',
 data() {
 return {
 sheetVisible: false,
 actions: [{
 name: '展示 Toast',
 method: this.showToast
 }, {
 name: '展示 Message Box',
 method: this.showMsgbox
 }]
 };
 },
 methods: {
 showToast() {
 Toast('这是一个 Toast');
 },
 showMsgbox() {
 MessageBox('提示', '这是一个 Message Box');
 }
 }
 };
</script>

则会得到如下页面:

预告

以上就是 Mint UI 的使用方法介绍。如果在使用的过程中遇到任何问题,或者是想给我们一些建议,欢迎大家去 GitHub 仓库提 issue。

可能有些同学知道,除了这个移动端组件库以外,饿了么还有一套桌面端组件库 vue-desktop。目前我们正在对它进行重构,这次有了 UED 的介入,整体视觉有了很大的提升。完成后也会开源,而且会有两个版本,分别支持 vue 1.0.x 和 vue 2.0。当然,Mint UI 也会考虑支持 vue 2.0。

PS: mint-ui在手机页面的样式不正常问题

 问题一、

在使用 vue2.0 +mint-ui 时pc端的样式没有问题但是手机端的就缩小了,失去了想要的效果

这是一个头文件的申明问题在入口文件index.html里的标签里加上这个代码即可

 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

总结

以上所述是小编给大家介绍的Mint UI 基于 Vue.js 移动端组件库,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对黑区网络网站的支持!

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/981.html