Vue中Mint-ui底部弹出(上拉)组件

 1 <template> 
 2     <div>
 3           <div class="page-actionsheet-wrapper">  
 4             <button class="mint-button mint-button--default mint-button--large" @click="actionSheet">  
 5               <label class="mint-button-text">点击上拉 action sheet</label>  
 6             </button>  
 7           </div>  
 8 
 9           
10           <mt-actionsheet  
11             :actions= "actions"  
12             v-model="sheetVisible">  
13           </mt-actionsheet>  
14     </div>
15   
16 </template>
17 
18 <script>
19 // 按需引入或者全局引入
20 // import Vue from "vue";
21 // import { Actionsheet } from "mint-ui";
22 // Vue.component(Actionsheet.name, Actionsheet);
23 
24 export default {
25   data() {
26     return {
27       // action sheet 选项内容  
28       actions: [{  
29         name: '拍照',  
30         method : this.getCamera // 调用methods中的函数  
31       }, {  
32         name: '从相册中选择',   
33         method : this.getLibrary // 调用methods中的函数  
34       }],  
35       // action sheet 默认不显示，为false。操作sheetVisible可以控制显示与隐藏  
36       sheetVisible: false  
37     };
38   },
39   methods: {
40     actionSheet: function(){  
41       this.sheetVisible = true;  
42     },  
43     getCamera: function(){  
44       console.log("打开照相机")  
45     },  
46     getLibrary: function(){  
47       console.log("打开相册")  
48     }  
49   }
50 };
51 </script>