【区分vue2和vue3下的element UI Message 消息提示组件,分别详细介绍属性,事件,方法如何使用,并举例】

在 Vue 2 中,我们通常使用 Element UI 的 this.$message 方法来显示消息提示,而不是作为一个组件直接在模板中使用。然而,在 Vue 3 的 Element Plus 中,虽然 this.$message 的使用方式仍然保留,但官方文档可能更倾向于使用 ElMessage 服务或组件(如果提供的话)。

Vue 2 + Element UI

在 Vue 2 中,Element UI 的 Message 消息提示不是作为一个组件提供的,而是通过 Vue 的原型链上的 $message 方法来调用的。

方法:

  • this.$message(message: string [options: MessageOptions]): 显示消息提示。

MessageOptions 可能包含以下属性:

  • type: 消息类型,如 successwarninginfoerror
  • message: 消息内容。
  • duration: 显示时间,单位为毫秒,默认 2000 毫秒后消失。
  • center: 文字是否居中,布尔值,默认为 false
  • showClose: 是否显示关闭按钮,布尔值,默认为 false
  • onClose: 关闭时的回调函数,参数为被关闭的 message 实例。

示例:

Vue中,使用 `element-ui` 的表单组件 `el-form`,可以通过 `rules` 属性来定义表单验证规则。以下是一个简单的子: ```html <template> <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model.number="form.age"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { name: &#39;&#39;, age: &#39;&#39; }, rules: { name: [ { required: true, message: &#39;请输入姓名&#39;, trigger: &#39;blur&#39; }, { min: 2, max: 10, message: &#39;长度在 2 到 10 个字符&#39;, trigger: &#39;blur&#39; } ], age: [ { required: true, message: &#39;请输入年龄&#39;, trigger: &#39;blur&#39; }, { type: &#39;number&#39;, message: &#39;年龄必须为数字&#39;, trigger: &#39;blur&#39; }, { validator: this.checkAge, trigger: &#39;blur&#39; } ] } } }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { console.log(&#39;表单验证通过&#39;) } else { console.log(&#39;表单验证失败&#39;) } }) }, checkAge(rule, value, callback) { if (value < 18) { callback(new Error(&#39;年龄不能小于18岁&#39;)) } else { callback() } } } } </script> ``` 在上面的子中,我们定义了一个表单,包含了两个输入框:姓名年龄。在 `rules` 属性中,我们为每个输入框定义了一组验证规则。其中,`required` 表示必填项,`min` `max` 分别表示最小值最大值,`trigger` 表示验证的时机,`blur` 表示失去焦点时验证。对于年龄这个输入框,我们还定义了一个自定义的验证函数 `checkAge`,用来检测年龄是否小于 18 岁。 在表单提交时,我们通过 `this.$refs.form.validate` 方法进行表单验证。这个方法会返回一个布尔值,表示表单验证是否通过。如果验证通过,我们可以提交表单;如果验证失败,我们可以提示用户重新填写表单。 注意,在自定义验证函数中,需要使用 `callback` 回调函数来返回验证结果。如果验证通过,可以直接调用 `callback()`,如果验证失败,需要调用 `callback(new Error(&#39;错误信息&#39;))`。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

加仑小铁

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值