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

<template> 
    <div>
          <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= "actions"  
            v-model="sheetVisible">  
          </mt-actionsheet>  
    </div>
  
</template>

<script>
// 按需引入或者全局引入
// import Vue from "vue";
// import { Actionsheet } from "mint-ui";
// Vue.component(Actionsheet.name, Actionsheet);

export default {
  data() {
    return {
      // action sheet 选项内容  
      actions: [{  
        name: '拍照',  
        method : this.getCamera // 调用methods中的函数  
      }, {  
        name: '从相册中选择',   
        method : this.getLibrary // 调用methods中的函数  
      }],  
      // action sheet 默认不显示，为false。操作sheetVisible可以控制显示与隐藏  
      sheetVisible: false  
    };
  },
  methods: {
    actionSheet: function(){  
      this.sheetVisible = true;  
    },  
    getCamera: function(){  
      console.log("打开照相机")  
    },  
    getLibrary: function(){  
      console.log("打开相册")  
    }  
  }
};
</script>