项目实操提示框

这段代码是基于 Vue 3 和 Element Plus 组件库编写的，实现了一个点击按钮弹出提示框，用于输入邮箱并验证的功能。以下是对代码各部分的详细解释：

1，模板部分（<template> ）

html

<template>
  <el-button type="warning" @click="open">默认提交</el-button>
</template>

• 这里使用了 Element Plus 的<el-button> 组件来创建一个按钮。
• type="warning" 表示将按钮的类型设置为警告样式，通常会有特定的颜色外观来突出显示。
• @click="open" 是一个事件绑定，当按钮被点击时，会调用在<script>部分定义的open 函数。按钮显示的文本是 “默认提交” 。

2，脚本部分（<script> ）

typescript

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element - plus'

• lang="ts" 表明这段脚本使用的是 TypeScript 语言。
• setup 是 Vue 3 中 <script> 标签的一个属性，用于标识这是一个使用组合式 API 的组件。
• 从element - plus 库中导入了ElMessage 和ElMessageBox 两个组件。ElMessage 用于显示简短的提示信息，ElMessageBox 用于弹出各种类型的对话框，如确认框、提示框等。

typescript

const open = () => {
  ElMessageBox.prompt('Please input your e - mail', 'Tip', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
    inputErrorMessage: 'Invalid Email'
  })

• 定义了一个名为open 的箭头函数，它会在按钮点击时被调用。
• 函数内部调用了ElMessageBox.prompt 方法，弹出一个提示框，提示用户输入邮箱。它接受三个参数：
  • 第一个参数'Please input your e - mail' 是提示框内显示的提示文本，告知用户需要输入邮箱。
  • 第二个参数'Tip' 是提示框的标题。
  • 第三个参数是一个配置对象：
    • confirmButtonText: 'OK' 设置确认按钮的文本为 “OK” 。
    • cancelButtonText: 'Cancel' 设置取消按钮的文本为 “Cancel” 。
    • inputPattern 是一个正则表达式，用于验证用户输入的内容是否符合邮箱格式。如果输入的内容不匹配这个正则表达式，就会显示错误提示。
    • inputErrorMessage: 'Invalid Email' 是当输入内容不符合inputPattern 时显示的错误提示信息。

typescript

.then(({ value }) => {
  ElMessage({
    type:'success',
    message: `Your email is:${value}`
  })
})
.catch(() => {
  ElMessage({
    type: 'info',
    message: 'Input canceled'
  })
})
}
</script>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

• .then(({ value }) => {... }) 是一个 Promise 的成功回调。当用户在提示框中输入邮箱并点击 “OK” 按钮，且输入的邮箱格式验证通过时，会进入这个回调。它通过解构从 Promise 的返回值中获取用户输入的邮箱值value ，然后使用ElMessage 显示一个成功提示信息，内容为 “Your email is: 用户输入的邮箱” 。
• .catch(() => {... }) 是 Promise 的错误回调。当用户点击提示框中的 “Cancel” 按钮取消输入，或者输入的邮箱格式验证不通过时，会进入这个回调。它使用ElMessage 显示一个信息提示，内容为 “Input canceled” 。