mint-ui —— 从底部弹起可配置的数据

<template>
  <div class="talk">
    <div @click="addTalk"></div>

   <div class="">{{sortType}}</div>
    <mt-actionsheet
      :actions="actions"
      :cancelText="cancelText"
      v-model="sheetVisible">
    </mt-actionsheet>
  </div>
</template>

<script>
import { Actionsheet,} from 'mint-ui';
export default {
  name: 'talk',
  data() {
    return {
      cancelText: '',  //不显示取消按钮
      sortType: 1, //默认排序
      actions: [
        { name: '默认', type: 1, method: this.clickAction }, 
        { name: '热度', type: 2, method: this.clickAction }, 
        { name: '最新', type: 3, method: this.clickAction },
      ],
      sheetVisible: false,
    }
  },
  methods: {
    // 打开action sheet
    actionSheet(){
      this.sheetVisible = true
    },
    //选择排序类型
    clickAction(e){
      this.sortType = e.type
    },
  },
}
</script>