mintUi のaction sheet使用

关于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

1. import Vue from 'vue'  
2. import App from './App'  
3. import router from './router'  
4.   
5. // 引入mint-ui  
6. import Mint from 'mint-ui';  
7. import 'mint-ui/lib/style.css'  
8. Vue.use(Mint);  
9.   
10. Vue.config.productionTip = false  
11.   
12. /* eslint-disable no-new */  
13. new Vue({  
14.   el: '#app',  
15.   router,  
16.   template: '<App/>',  
17.   components: { App }  
18. })  

xxx.vue：

1. <template>  
2.   <div class="hello">  
3.       
4.     <h1 class="page-title">Action Sheet</h1>  
5.     <div class="page-actionsheet-wrapper">  
6.       <button class="mint-button mint-button--default mint-button--large" @click="actionSheet">  
7.         <label class="mint-button-text">点击上拉 action sheet</label>  
8.       </button>  
9.        
10. </div>  
11.   
12.   
13.      <mt-actionsheet  
14.         :actions= "data"  
15.         v-model="sheetVisible">  
16.     </mt-actionsheet>  
17.   </div>  
18. </template>  
19.   
20.   
21. <script>  
22. export default {  
23.   name: 'hello',  
24.   data () {  
25.     return {  
26.       // action sheet 选项内容  
27.       data: [{  
28.         name: '拍照',  
29.         method : this.getCamera<span style="white-space:pre;">  </span>// 调用methods中的函数  
30.       }, {  
31.         name: '从相册中选择',   
32.         method : this.getLibrary<span style="white-space:pre;"> </span>// 调用methods中的函数  
33.       }],  
34.       // action sheet 默认不显示，为false。操作sheetVisible可以控制显示与隐藏  
35.       sheetVisible: false  
36.     }  
37.   },  
38.   methods: {  
39.     actionSheet: function(){  
40.     <span style="white-space:pre;">   </span>// 打开action sheet  
41.       this.sheetVisible = true;  
42.     },  
43.     getCamera: function(){  
44.       console.log("打开照相机")  
45.     },  
46.     getLibrary: function(){  
47.       console.log("打开相册")  
48.     }  
49.   }  
50. }  
51. </script>  
52.   
53.   
54. <!-- Add "scoped" attribute to limit CSS to this component only -->  
55. <style scoped>  
56.     
57. </style>  

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