关于vue的mintUI（移动端）中 action sheet 的使用方法

action sheet

操作表，从屏幕下方移入。

Import

按需引入：

import { Actionsheet } from 'mint-ui';

Vue.component(Actionsheet.name, Actionsheet);

全局导入：全局导入后不用再导入

importMint from'mint-ui'

import'mint-ui/lib/style.css'

Vue.use(Mint);

API

示例：

src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'
// 引入mint-ui
import Mint from 'mint-ui';
import 'mint-ui/lib/style.css'
Vue.use(Mint);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})

xxx.vue：

<template>
<div class="hello">
<h1 class="page-title">Action Sheet</h1>
<div class="page-actionsheet-wrapper">
<button class="mint-button mint-button--default mint-button--large" @click="actionSheet">
<label class="mint-button-text">点击上拉 action sheet</label>
</button>
</div>
<mt-actionsheet
:actions= "data"
v-model="sheetVisible">
</mt-actionsheet>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
// action sheet 选项内容
data: [{
name: '拍照',
method : this.getCamera<span style="white-space:pre;"> </span>// 调用methods中的函数
}, {
name: '从相册中选择',
method : this.getLibrary<span style="white-space:pre;"> </span>// 调用methods中的函数
}],
// action sheet 默认不显示，为false。操作sheetVisible可以控制显示与隐藏
sheetVisible: false
}
},
methods: {
actionSheet: function(){
<span style="white-space:pre;"> </span>// 打开action sheet
this.sheetVisible = true;
},
getCamera: function(){
console.log("打开照相机")
},
getLibrary: function(){
console.log("打开相册")
}
}
}
</script>
<style scoped>
</style>

由于文档中未说明详细，做此说明。

mintUi のaction sheet使用相关推荐

why SAP Fiori action sheet is created as disabled by default
Created by Wang, Jerry, last modified on Feb 11, 2015 要获取更多Jerry的原创文章,请关注公众号"汪子熙":
js - 让 git 上 Mint-UI 的例子跑起来 - 方法大全
快速入门Mint-ui+项目开发,让Git 上 mint-ui 的例子跑起来! 授人以鱼不如授人以渔! 通过两种方法讲解一个案例,并以此作为组件的通用方法参考! 一. 注意: 我们以Mint-ui框架 ...
mint-ui使用手册
npm 安装推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本 ...
mint-ui的学习入门实例
今早上看了一下mint-ui,官网看的虽然不是完全学会使用,但是通过自己百度了解,现在已经可以掌握对mint-ui的基本使用,下面是我自己练习的一些小案例集合,仅供参考,代码如下: <templ ...
【Vue学习总结】21.Vue-UI框架之Mint UI的使用
接上篇<20.Vue路由中的嵌套> 上一篇我们讲解了Vue路由中的嵌套,本篇我们来介绍Vue的UI框架----Mint UI的使用. 本系列博文使用的Vue版本:2.6.11 一.基于Vu ...
在iOS 8中使用UIAlertController
本文转载至 http://www.cocoachina.com/ios/20141126/10320.html iOS 8的新特性之一就是让接口更有适应性.更灵活,因此许多视图控制器的实现方式发生了巨 ...
IOS学习笔记(九)之UIAlertView(警告视图)和UIActionSheet(操作表视图)基本概念和使用方法...
IOS学习笔记(九)之UIAlertView(警告视图)和UIActionSheet(操作表视图)基本概念和使用方法 Author:hmjiangqq Email:jiangqqlmj@163.com ...
170多个Ionic Framework学习资源（转载）
在Ionic官网找到的学习资源:http://blog.ionic.io/learning-ionic-in-your-living-room/ 网上的文章比较多,但是很多时候我们很难找到自己需要的. ...
iOS8中提示框的使用UIAlertController(UIAlertView和UIActionSheet二合一)
本文转载至 http://blog.csdn.net/liuwuguigui/article/details/39494597 IOS8UIAlertViewUIActionSheet iOS8推出了 ...

mintUi のaction sheet使用

action sheet

Import

API

mintUi のaction sheet使用相关推荐

最新文章

热门文章