元件—彈框

訊息提示

<template>
 <el-button type="text" @click="open">點選開啟 Message Box</el-button>
</template>

<script>
 export default {
  methods: {
   open() {
    this.$alert('這是一段內容','標題名稱',{
     confirmButtonText: '確定',callback: action => {
      this.$message({
       type: 'info',message: `action: ${ action }`
      });
     }
    });
   }
  }
 }
</script>

確認訊息

<template>
 <el-button type="text" @click="open">點選開啟 Message Box</el-button>
</template>

<script>
 export default {
  methods: {
   open() {
    this.$alert('這是一段內容',message: `action: ${ action }`
      });
     }
    });
   }
  }
 }
</script>

提交內容

<template>
 <el-button type="text" @click="open">點選開啟 Message Box</el-button>
</template>

<script>
 export default {
  methods: {
   open() {
    this.$prompt('請輸入郵箱','提示',cancelButtonText: '取消',inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage: '郵箱格式不正確'
    }).then(({ value }) => {
     this.$message({
      type: 'success',message: '你的郵箱是: ' + value
     });
    }).catch(() => {
     this.$message({
      type: 'info',message: '取消輸入'
     });    
    });
   }
  }
 }
</script>

自定義

<template>
 <el-button type="text" @click="open">點選開啟 Message Box</el-button>
</template>

<script>
 export default {
  methods: {
   open() {
    const h = this.$createElement;
    this.$msgbox({
     title: '訊息',message: h('p',null,[
      h('span','內容可以是 '),h('i',{ style: 'color: teal' },'VNode')
     ]),showCancelButton: true,confirmButtonText: '確定',beforeClose: (action,instance,done) => {
      if (action === 'confirm') {
       instance.confirmButtonLoading = true;
       instance.confirmButtonText = '執行中...';
       setTimeout(() => {
        done();
        setTimeout(() => {
         instance.confirmButtonLoading = false;
        },300);
       },3000);
      } else {
       done();
      }
     }
    }).then(action => {
     this.$message({
      type: 'info',message: 'action: ' + action
     });
    });
   }
  }
 }
</script>

使用 HTML 片段

<template>
 <el-button type="text" @click="open">點選開啟 Message Box</el-button>
</template>

<script>
 export default {
  methods: {
   open() {
    this.$alert('<strong>這是 <i>HTML</i> 片段</strong>','HTML 片段',{
     dangerouslyUseHTMLString: true
    });
   }
  }
 }
</script>

區分取消與關閉

<template>
 <el-button type="text" @click="open">點選開啟 Message Box</el-button>
</template>

<script>
 export default {
  methods: {
   open() {
    this.$alert('<strong>這是 <i>HTML</i> 片段</strong>',{
     dangerouslyUseHTMLString: true
    });
   }
  }
 }
</script>

居中佈局

<template>
 <el-button type="text" @click="open">點選開啟 Message Box</el-button>
</template>

<script>
 export default {
  methods: {
   open() {
    this.$confirm('此操作將永久刪除該檔案,是否繼續?',type: 'warning',center: true
    }).then(() => {
     this.$message({
      type: 'success',message: '刪除成功!'
     });
    }).catch(() => {
     this.$message({
      type: 'info',message: '已取消刪除'
     });
    });
   }
  }
 }
</script>

全域性方法

單獨引用

Options

到此這篇關於Element MessageBox彈框的具體使用的文章就介紹到這了,更多相關Element MessageBox彈框內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！