首先，附Action sheet原API文档：http://mint-ui.github.io/docs/#/en2/action-sheet

1、实现效果图：

                

 

 

 

 2、代码（原生Action sheet实现）

//html代码
<div class="btn" style="clear:both;">
  <a href="javascript:void(0);" class="largin-btn primary" @click="handleClick">点击</a>
</div>
<mt-actionsheet
  :actions="actions"
  v-model="sheetVisible"
  :modal="true"
></mt-actionsheet>

//js代码
export default {
  data() {
    return {
      sheetVisible:false,                //控制action sheet显隐
      actions: [
        {
          name: "拍照",
          method: this.getCamera    //调用methods中的事件
        },
        {
          name: "从相册中选择",
          method: this.getLibrary    //调用methods中的事件
        }
      ],
    }
  },
  methods: {
    handleClick() {
      this.sheetVisible = true;
    },
    getCamera() {   //拍照
      console.log('拍照')
    },
    getLibrary() {  //从相册选择
      console.log('从相册中选择')
    },
  },
}    

注：这里只是为了演示action sheet的功能，如果想实现拍照和调取相册的功能，还是推荐使用vant组件（传送门：Vant官方文档）来做，因为mint-ui在这方面的实现比较弱，需要安卓的配合才能使用。

3、代码（自定义样式实现）

在实际项目中原生的样式往往并不能满足要求，这时 可以结合mint中的popup组件实现。具体代码如下：

//html代码
<div class="btn" style="clear:both;">
  <a href="javascript:void(0);" class="largin-btn primary" @click="handleClick">点击</a>
</div>
<mt-popup v-model="popupVisible" position="bottom" style="width:100%">
  <div class="top-box">
    <div class="top-title">标题</div>
    <div class="top-text">描述文字描述文字</div>
  </div>
  <div class="acts-box">
    <ul class="acts-list">
      <li class="acts-list-item" @click="handleAction('confirm')">是</li>
      <li class="acts-list-item" @click="handleAction('cancel')">否</li>
    </ul>
    <a class="mint-acts-btn" @click="closePop">取消</a>
  </div>
</mt-popup>

//js代码
export default {
  data() {
    return {
      popupVisible:false,
    }
  },
  methods: {
    handleClick() {
      this.popupVisible = true;
    },
    handleAction(action) {    //事件处理函数
      console.log(action)
      this.popupVisible = false
    },
    closePop() {    //关闭popup
      this.popupVisible = false
    }
  },
}

//样式代码
<style lang="stylus">
.top-box {
  font-size: 18px;
  width: 100%;
  position: fixed;
  bottom: 140px;
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  .top-title {
    margin: 15px 0;
    font-weight: 600;
  }
  .top-text {
    font-size: 16px;
    margin-bottom: 10px;
  }
}
.acts-box {
  position: fixed;
  background: #e0e0e0;
  width: 100%;
  text-align: center;
  bottom: 0;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  -webkit-transform: translate3d(-50%, 0, 0);
  .acts-list {
    list-style: none;
    padding: 0;
    margin: 0 0 5px 0;
  }
  .acts-list-item, .mint-acts-btn {
      display: block;
      width: 100%;
      height: 45px;
      line-height: 45px;
      font-size: 18px;
      color: #333;
      background-color: #fff;
      border-top: solid 1px #e0e0e0;
      &:active {
        background-color: #f0f0f0;
      }
    }
}
</style>