prompt.vue 829 B

12345678910111213141516171819202122232425262728
  1. <template>
  2. <el-button text @click="open">Click to open Message Box</el-button>
  3. </template>
  4. <script lang="ts" setup>
  5. import { ElMessage, ElMessageBox } from 'element-plus'
  6. const open = () => {
  7. ElMessageBox.prompt('Please input your e-mail', 'Tip', {
  8. confirmButtonText: 'OK',
  9. cancelButtonText: 'Cancel',
  10. inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
  11. inputErrorMessage: 'Invalid Email',
  12. })
  13. .then(({ value }) => {
  14. ElMessage({
  15. type: 'success',
  16. message: `Your email is:${value}`,
  17. })
  18. })
  19. .catch(() => {
  20. ElMessage({
  21. type: 'info',
  22. message: 'Input canceled',
  23. })
  24. })
  25. }
  26. </script>