<template>
  <div>
    <button @click="handleShow">点击显示ModalList</button>
    <modal-list
      :visible.sync="visible"
      :dataSource="this.dataSource"
      :currentId="this.currentId"
      @handleChoose="handleChoose"
      :clickMastClose="true"
    ></modal-list>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { ModalList } from "../../tunas";
export default Vue.extend({
  components: {
    ModalList
  },
  data() {
    return {
      dataSource: [
        {
          label: "提交并退出",
          id: 1
        },
        {
          label: "退出",
          id: 2
        }
      ],
      visible: false,
      currentId: 1
    };
  },
  methods: {
    handleShow() {
      this.visible = true;
    },
    // 选择退出的方式
    handleChoose(item) {
      this.currentId = item.id;
    }
  }
});
</script>
