Mint UI之Action sheet組件的使用

首先，附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>