Vue 中使用Promise

Posted 2021-01-30 hahaxi

<script src="https://unpkg.com/vue"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
  <p>{{ message }}</p>
  <el-button @click=‘search‘>Click</el-button>
  <el-button @click=‘confirmTest‘>confirmTest</el-button>
</div>

new Vue({
  el: ‘#app‘,
  data: {
    message: ‘Hello Vue.js!‘
  },
  methods: {   
    search() {
        this.confirmTest().then((res) => {
        this.$message({
           message: ‘恭喜你，这是一条成功消息‘ + res,
              type: ‘success‘
          })
      }).catch((error) => {
          this.$message({
           message: ‘恭喜你，Enter confirm false‘ + error,
              type: ‘error‘
        })
      })        
    },
   confirmTest() {
    return new Promise((resolve, reject) => {
        this.$confirm(‘此操作将永久删除该文件, 是否继续?‘, ‘提示‘, {
          confirmButtonText: ‘确定‘,
          cancelButtonText: ‘取消‘,
          type: ‘warning‘
        }).then(() => {
          resolve(true)
        }).catch(() => {
          reject(false)
        });
    }) 
    }
  }
})