公司的建设网站公司,扬中网站建设效果,南京网站优化,空间安装wordpressElement Plus框架快速上手详解 1、Element Plus1.1、安装 2、Button3、Link链接4、Layout布局5、Container布局容器6、Radio单选框6.1、单选框组6.2、事件 7、Checkbox多选框7.1、多选框组7.2、事件 8、Input输入框组件8.1、事件8.2、方法 9、Select选择器9.1、基础多选9.2、事… Element Plus框架快速上手详解 1、Element Plus1.1、安装 2、Button3、Link链接4、Layout布局5、Container布局容器6、Radio单选框6.1、单选框组6.2、事件 7、Checkbox多选框7.1、多选框组7.2、事件 8、Input输入框组件8.1、事件8.2、方法 9、Select选择器9.1、基础多选9.2、事件9.3、方法 10、Switch开关10.1、事件10.2、方法 11、DatePicker日期选择器11.1、事件11.2、方法 12、国际化13、Upload组件13.1、方法 14、Form表单14.1、表单验证 15、Alert提示16、Message消息提示组件16.1、方法 随笔记源码 逍遥的人儿 / KuangStudyElementPlus 1、Element Plus 官网安装 | Element Plus (element-plus.org) 官方定义网站快速成型工具和桌面端组件库 Element Plus 就是基于 Vue 的一个 UI 框架该框架基于 Vue 开发了很多相关组件方便我们快速开发页面。是由饿了么前端团队开发并开源。 Tips为什么 Element 组件属性前面有的需要加冒号: 有的不需要 如果不加冒号或v-bind那么赋的就是值如果加了冒号或v-bind赋的就是变量参考文章【精选】为什么 Vue3.js / Element 组件属性前面有的需要添加冒号有的不需要_vue3 冒号-CSDN博客 口诀带了冒号则不带双引号;不带冒号则带双引号 el-radio :label1 v-modelradioOption A/el-radio el-radio label2 v-modelradio1Option B/el-radioscript setupconst radio ref(1)const radio1 ref(2) /script在Element Plus 文档中的默认值是 boolean 的属性使用一律加冒号: 1.1、安装 通过脚手架Vite创建Vue项目 npm create vitelatest安装 element-plus npm install element-plus --save在main.js完整引入依赖 import { createApp } from vue import ElementPlus from element-plus import element-plus/dist/index.css import App from ./App.vueconst app createApp(App)app.use(ElementPlus) app.mount(#app)在App.vue中使用 script setup/scripttemplatediv!--使用默认按钮--el-row classmb-4el-buttonDefault/el-buttonel-button typeprimaryPrimary/el-buttonel-button typesuccessSuccess/el-buttonel-button typeinfoInfo/el-buttonel-button typewarningWarning/el-buttonel-button typedangerDanger/el-button/el-row/div /templatestyle scoped/style启动项目 2、Button 基础用法el-button/el-button 默认按钮typexxx 简洁按钮plain 圆角按钮round 图标按钮:iconxxx el-row classmb-4!--1.使用默认按钮--el-button typeprimaryPrimary/el-button!--2.使用简洁按钮:鼠标移动上去才会显示背景颜色--el-button typeprimary plainPrimary/el-button!--3.使用圆角按钮-- el-button typeprimary roundPrimary/el-button!--4.使用图标按钮--el-button typeprimary :iconEdit circle / /el-row在Element plus 中所有组件的属性全都写在组件标签中 3、Link链接 基础用法el-link/el-link禁用状态disabled下划线:underline图标链接:icon !--1.文字链接-- el-link typeprimary hrefhttps://element-plus.org target_blankprimary/el-link!--2.文字链接禁用-- el-link typeprimary disabledprimary/el-link!--2.文字链接下划线-- el-link :underlinefalse没有下划线/el-link el-link有下划线/el-link!--2.图标链接-- el-link :iconEditEdit/el-link4、Layout布局 通过基础的 24 分栏迅速简便地创建布局。 行的属性写在 el-row 标签里面列的属性写在el-col 标签里面 基础布局:spanxx el-rowel-col :span24/el-col /el-row列间距el-row :gutter20 行提供 gutter 属性来指定列之间的间距其默认值为0。 el-row :gutter20el-col :span6div classcol占用四分之一6/div/el-colel-col :span6div classcol占用四分之一6/div/el-colel-col :span6div classcol占用四分之一6/div/el-col /el-row列偏移el-col :span6 :offset6/el-col 列提供offset属性可以指定分栏偏移的栏数 el-col :span6 :offset6div classcol占用四分之一6/div/el-col踩坑 element ui中el-row的gutter属性失效的问题_el-row gutter_叶卡捷琳堡的博客-CSDN博客 5、Container布局容器 el-container外层容器。 当子元素中包含 el-header 或 el-footer 时全部子元素会垂直上下排列 否则会水平左右排列。 el-header顶栏容器 el-aside侧边栏容器 el-main主要区域容器 el-footer底栏容器 水平容器el-container directionhorizontal/el-container 垂直容器el-container directionvertical/el-container el-container directionhorizontalel-headerHeader/el-headerel-asideAside/el-asideel-mainMain/el-mainel-footerFooter/el-footer /el-container6、Radio单选框 Radio 单选框需要 v-model 和 label 两个属性 templateel-radio-group v-modelradio1el-radio label男 sizelarge男/el-radioel-radio label女 sizelarge女/el-radio/el-radio-group /templatescript setup import { ref } from vueconst radio1 ref(男) /script6.1、单选框组 结合el-radio-group元素和子元素el-radio可以实现单选组 为 el-radio-group 绑定 v-model再为 每一个 el-radio 设置好 label 属性即可 templateel-radio-group v-modelradioel-radio :label3Option A/el-radioel-radio :label6Option B/el-radioel-radio :label9Option C/el-radio/el-radio-group /templatescript setup import { ref } from vueconst radio ref(3) /script6.2、事件 事件的使用也是和属性使用一致都是直接写在对应的组件标签上 el-radio label1 sizelarge border changeAOption A/el-radioscript setup const A (){alert(A) } /script7、Checkbox多选框 基本使用el-checkbox/el-checkbox el-checkbox v-modelchecked北京/el-checkbox el-checkbox v-modelchecked上海/el-checkbox el-checkbox v-modelchecked天津/el-checkbox禁用状态标签加disabled 带有边框标签加border 选中状态的值true-labelxx template!-- 当选中时的值是北京 --el-checkbox v-modelchecked1 true-label北京北京/el-checkboxel-checkbox v-modelchecked1 true-label上海上海/el-checkbox /templatescriptimport { ref } from vueconst checked1 ref(北京) /script7.1、多选框组 适用于多个勾选框绑定到同一个数组的情景通过是否勾选来表示这一组选项中选中的项。 基本用法el-checkbox-group/el-checkbox-group templateel-checkbox-group v-modelcheckList changeBel-checkbox label北京 /el-checkbox label上海 /el-checkbox label西安 /el-checkbox label禁用 disabled /el-checkbox label郑州 disabled //el-checkbox-group /templatescript setup import { ref } from vueconst checkList ref([北京, 郑州]) const B () {console.log(checkList.value) }/script 属性 label 是选中状态的值只有在checkbox-group或者绑定对象类型为array时有效 7.2、事件 事件的使用也是和属性使用一致都是直接写在对应的组件标签上 templateel-checkbox v-modelchecked2 changeA北京/el-checkbox /templatescript setupimport { ref } from vueconst checked2 ref(false)const A () {console.log(checked2.value)} /script8、Input输入框组件 基本使用el-input v-modelinput/el-input templateh1基础用法/h1el-input v-modelinput placeholder请输入 / /templatescript setup import { ref } from vueconst input ref() /script禁用状态标签加disabled 输入框加入清空按钮标签加clearable 密码框标签加typepassword show-password 文本框输入限制标签加typetext maxlength10 show-word-limit 带图标输入框标签加prefix-iconUser suffix-iconxxx 8.1、事件 事件的使用也是和属性使用一致都是直接写在对应的组件标签上 templateel-input v-modelinput placeholder请输入 blurA/ /templatescript setup import { ref } from vueconst input ref()const A () {alert(失去焦点) } /script失去焦点blur获得焦点focux事件传值 change(value) 当输入框市区焦点或者用户按下 Enter 时触发input(value) 在 Input 值改变时触发 templateel-input v-modelinput placeholder请输入 blurA /el-input v-modelinput3 placeholder请输入 changeB /el-input v-modelinput4 placeholder请输入 inputC //templatescript setup import { ref } from vueconst input ref() const input3 ref() const input4 ref()const A () {console.log(失去焦点) }// 当失去焦点或者按下Enter时触发,只触发一次 const B (value) {console.log(改变 value) }// 当input值改变就触发,可触发多次 const C (value) {console.log(改变 value) }/scriptclear在点击由 clearable 属性生成的清空按钮时触发 8.2、方法 给标签加refxxx 组件别名绑定数据通过xxx.value.方法名 调用方法 templateel-input v-modelinput5 refinputs/el-inputel-button clickfocusInput点击/el-button /templatescript setup import { ref } from vue const input5 ref()const inputs ref() const focusInput () {// 点击按钮则聚焦 inputs.value.focus() } /script9、Select选择器 基础用法 :labelxx 要展示的下拉文字:valuexx 选择后所对应的值 templateel-select v-modelusernameel-option v-foritem in options :keyitem.id :labelitem.name :valueitem.id //el-select /templatescript setup import { ref } from vue// 当选中值时会赋给 username const username ref()const options [{id: 1, name: 张三},{id: 2, name: 李四},{id: 3, name: 王五},{id: 4, name: 赵六},{id: 5, name: 秦七},{id: 6, name: 肥八} ] /script解释el-option 选中的值会赋值给 el-select 的 username 有禁用选项el-option标签加:disableditem.disabled并且 options 禁用的对象也加disabled: true templateel-select v-modelusernameel-option v-foritem in options :keyitem.id :labelitem.name:valueitem.id :disableditem.disabled //el-select /templatescript setup // 当选中值时会赋给 username const username ref()const options [{id: 1, name: 张三},{id: 2, name: 李四},{id: 3, name: 王五,disabled: true},{id: 4, name: 赵六},{id: 5, name: 秦七},{id: 6, name: 肥八} ] /script禁用整个选择器组件给el-select标签加disabled 可清空单选给el-select标签加clearable属性 注clearable 属性仅适用于单选) 9.1、基础多选 为 el-select 设置 multiple 属性即可启用多选 templateel-select v-modelusername multipleel-optionv-foritem in options:keyitem.id:labelitem.name:valueitem.id //el-select /templatescript setup import { ref } from vueconst username ref()const options [{id: 1, name: 张三},{id: 2, name: 李四},{id: 3, name: 王五,disabled: true},{id: 4, name: 赵六},{id: 5, name: 秦七},{id: 6, name: 肥八} ] /script9.2、事件 事件的使用也是和属性使用一致都是直接写在对应的组件标签上 templateel-select v-modelusername multiple changeAel-optionv-foritem in options:keyitem.id:labelitem.name:valueitem.id //el-select /templatescript setup import { ref } from vueconst username ref()const options [{id: 1, name: 张三},{id: 2, name: 李四},{id: 3, name: 王五,disabled: true},{id: 4, name: 赵六},{id: 5, name: 秦七},{id: 6, name: 肥八} ]// 选中的值 const A (value) {console.log(value) }9.3、方法 给标签加refxxx 组件别名绑定数据通过xxx.value.方法名 调用方法 templateel-select v-modelusername multiple refselectsel-optionv-foritem in options:keyitem.id:labelitem.name:valueitem.id //el-selectel-button clickselectFocus点击聚焦/el-button /templatescript setup import { ref } from vueconst selects ref() const selectFocus () {selects.value.focus() } /script10、Switch开关 基础用法 templateel-switch v-modelvalue1 / /templatescript setup script setupimport { ref } from vue const value1 ref(true) /script禁用状态给标签加 disabled 加载状态给标签加 loading 添加图标给标签加 :active-action-iconView :inactive-action-iconHide inline-prompt 文字描述给标签加 active-text是 inactive-text否 inline-prompt 扩展的 value 类型设置 active-value 和 inactive-value 属性 它们接受 Boolean、String 或 Number 类型的值。 template!--开关打开值是100,开关关闭值是0--el-switchv-modelvalue4style--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949active-value100inactive-value0/ /templatescript setup import { ref } from vue const value4 ref(100) /script10.1、事件 事件的使用也是和属性使用一致都是直接写在对应的组件标签上 templateel-switch v-modelvalue1 changeA/ /templatescript setupconst A (value) {console.log(value) } /script10.2、方法 给标签加refxxx 组件别名绑定数据通过xxx.value.方法名 调用方法 templateel-switch v-modelvalue1 refswitchs/el-button clickswitchFocus点击/el-button /templatescript setup import { ref } from vueconst value1 ref(true) const switchs ref() const switchFocus () {console.log(switch获得焦点)switchs.value.focus() } /script11、DatePicker日期选择器 基础用法 templateel-date-pickerv-modelvalue1typedateplaceholder请选择日期 //templatescript setup import { ref } from vue const value1 ref()/script只读标签加:readonlytrue禁用标签加:disabledtrue显示清除按钮标签加:clearabletrue显示时间范围标签加typedaterange templateel-date-pickerv-modelvalue1typedaterangerange-separator至start-placeholder开始日期end-placeholder结束日期 //templatescript setup import { ref } from vue const value1 ref()/script输入框的格式标签加formatyyyy/MM/dd 设置快捷选项 templateel-date-pickerv-modelvalue3typedateplaceholder请选择日期:shortcutsshortcuts //templatescript setup import { ref } from vue const value3 ref()// 从官网复制 const shortcuts [{text: 今天,value: new Date(),},{text: 昨天,value: () {const date new Date()date.setTime(date.getTime() - 3600 * 1000 * 24)return date},},{text: 一周前,value: () {const date new Date()date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)return date},}, ]/script设置禁用日期标签加:disabled-datedisabledDate templateel-date-pickerv-modelvalue3typedateplaceholder请选择日期:disabled-datedisabledDate //templatescript setup import { ref } from vue const value3 ref()const disabledDate (time) {// 如果输入框选择的时间 当前的时间 ,则不可选,也就是只能选 当前时间之前的return time.getTime() Date.now() } /script11.1、事件 事件的使用也是和属性使用一致都是直接写在对应的组件标签上 templateel-date-pickerv-modelvalue4typedateplaceholder请选择日期changehandleChange //templatescript setup import { ref } from vue const value4 ref()const handleChange (value) {console.log(value) }/script11.2、方法 templateel-date-pickerv-modelvalue5typedateplaceholder请选择日期blurhandleBlurrefdatePickers//templatescript setup import { ref } from vue const value5 ref()const datePickers ref() const handleBlur () {console.log(获得焦点)datePickers.value.focus() }/script12、国际化 Element Plus 组件 默认 使用英语如果你希望使用其他语言可以进行全局配置 import ElementPlus from element-plus import zhCn from element-plus/dist/locale/zh-cn.mjsapp.use(ElementPlus, {// 使用中文显示locale: zhCn, })13、Upload组件 基础用法 templateel-upload actionhttps://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15el-button typeprimary点击上传/el-button/el-upload /templateaction 属性是必须的表示请求 URL 默认显示上传的文件列表属性加 :file-listfileList templateel-upload:file-listfileListactionhttps://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15el-button typeprimary点击上传/el-button/el-upload /templatescript setup import { ref } from vueconst fileList ref([{name: element-plus-logo.svg,url: https://element-plus.org/images/element-plus-logo.svg,},{name: element-plus-logo2.svg,url: https://element-plus.org/images/element-plus-logo.svg,} ]) /script显示文本提示插槽显示 template #tip/template templateel-upload:file-listfileListactionhttps://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15el-button typeprimary点击上传/el-buttontemplate #tipdiv classel-upload__tip这里是上传文件的地方/div/template/el-upload /templatescript setup import { ref } from vueconst fileList ref([{name: element-plus-logo.svg,url: https://element-plus.org/images/element-plus-logo.svg,},{name: element-plus-logo2.svg,url: https://element-plus.org/images/element-plus-logo.svg,} ]) /script支持多选文件上传标签加multiple 采用拖拽上传标签加drag templateel-uploadactionhttps://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15dragi classel-icon-upload/idiv classel-upload__text将文件拖到此处或em点击上传/em/div/el-upload /template上传文件附带额外参数标签加:dataxxx templateel-uploadactionhttps://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15:datainformationel-button typeprimary点击上传/el-button/el-upload /templatescript setup import { ref } from vueconst information {// 每次上传时候不光上传文件,还附带上传额外参数tokentoken: 123456 } /script设置上传的文件名标签加namexxxx不展示已经上传的文件列表标签加:show-file-listfalse设置允许上传的文件类型标签加:accept.txt, .png钩子函数 templateel-upload:file-listfileListactionhttps://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15:on-previewhandlePreview:on-removehandleRemove:on-successhandleSuccess:on-errorhandleError:on-progresshandleProgressel-button typeprimary点击上传/el-button/el-upload /templatescript setup import { ref } from vueconst handlePreview (UploadFile) {console.log(点击文件列表中已上传的文件时的钩子 UploadFile.name) }const handleRemove (UploadFile,uploadFiles) {console.log(文件列表移除文件时的钩子 UploadFile.name ,文件数 uploadFiles.length) }const handleSuccess (UploadFile,uploadFiles) {console.log(文件上传成功时的钩子 UploadFile.name 文件数 uploadFiles.length) } const handleError (Error,UploadFile,uploadFiles) {console.log(文件上传失败时的钩子 UploadFile.name) }const handleProgress (UploadFile) {console.log(文件上传时的钩子 UploadFile.name) } /script这里解释一下官方文档的意思这个钩子函数接收两个参数类型分别为 uploadFile 和 uploadFiles 返回值是 void也就是无返回值 13.1、方法 templateel-uploadrefuploads actionhttps://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15el-button typeprimary点击上传/el-button/el-upload /templatescript setup import { ref } from vueconst uploads ref() const clearFiles () {uploads.value.clearFiles() } /script14、Form表单 基本使用el-form 里面包含 el-form-item templateel-form :modelform label-width120pxel-form-item label活动名称el-input v-modelform.name //el-form-itemel-form-item label活动区域el-select v-modelform.region placeholder选择你的区域el-option label上海 valueshanghai /el-option label北京 valuebeijing //el-select/el-form-itemel-form-item label活动时间el-col :span11el-date-pickerv-modelform.date1typedateplaceholderPick a datestylewidth: 100%//el-colel-col :span2 classtext-centerspan classtext-gray-500-/span/el-colel-col :span11el-time-pickerv-modelform.date2placeholderPick a timestylewidth: 100%//el-col/el-form-itemel-form-item label即时配送el-switch v-modelform.delivery //el-form-itemel-form-item label活动性质el-checkbox-group v-modelform.typeel-checkbox label线上活动 nametype /el-checkbox label地摊活动 nametype /el-checkbox label线下主题活动 nametype /el-checkbox label单纯品牌曝光 nametype //el-checkbox-group/el-form-itemel-form-item label特殊资源el-radio-group v-modelform.resourceel-radio label线上品牌商赞助 /el-radio label线下场地免费 //el-radio-group/el-form-itemel-form-item label活动形式el-input v-modelform.desc typetextarea //el-form-itemel-form-itemel-button typeprimary clickonSubmit立即创建/el-buttonel-button取消/el-button/el-form-item/el-form /templatescript setup import { reactive } from vue// do not use same name with ref const form reactive({name: ,region: ,date1: ,date2: ,delivery: false,type: [],resource: ,desc: , })const onSubmit () {console.log(submit!) }/scriptstyle scoped/style表单项为一行el-form标签加:inlinetrue 对齐方式通过 label-position 属性来改变表单标签的位置可选值为top、left、right需要配置label-widthxxpx 使用 templateel-form:label-positionleftlabel-width100px:modelform /template表单标签后缀标签加label-suffix: 比方说一般加个冒号 14.1、表单验证 Form 组件允许你验证用户的输入是否符合规范来帮助你找到和纠正错误。 只需为 rules 属性传入约定的验证规则并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。 给el-form 标签添加 :rulexxx给el-form-item 标签加 propxxx这里给 el-form 绑定了别名 ruleForms,这样我们不光可以在用户填写表单时进行验证,还可以在提交表单时进行二次验证 templateel-form :modelform label-width120px label-suffix: :rulesrules refruleFormsel-form-item label活动名称 propnameel-input v-modelform.name //el-form-itemel-form-item label活动区域 propregionel-select v-modelform.region placeholder选择你的区域el-option label上海 valueshanghai /el-option label北京 valuebeijing //el-select/el-form-itemel-form-item label活动时间 propdata1el-col :span11el-date-pickerv-modelform.date1typedateplaceholderPick a datestylewidth: 100%//el-colel-col :span2 classtext-centerspan classtext-gray-500-/span/el-colel-col :span11el-time-pickerv-modelform.date2placeholderPick a timestylewidth: 100%//el-col/el-form-itemel-form-item label即时配送el-switch v-modelform.delivery //el-form-itemel-form-item label活动性质 proptypeel-checkbox-group v-modelform.typeel-checkbox label线上活动 nametype /el-checkbox label地摊活动 nametype /el-checkbox label线下主题活动 nametype /el-checkbox label单纯品牌曝光 nametype //el-checkbox-group/el-form-itemel-form-item label特殊资源 propresourceel-radio-group v-modelform.resourceel-radio label线上品牌商赞助 /el-radio label线下场地免费 //el-radio-group/el-form-itemel-form-item label活动形式 propdescel-input v-modelform.desc typetextarea //el-form-itemel-form-itemel-button typeprimary clickonSubmit立即创建/el-buttonel-button取消/el-button/el-form-item/el-form/templatescript setup import {reactive, ref} from vue// do not use same name with ref const form reactive({name: ,region: ,date1: ,date2: ,delivery: false,type: [],resource: ,desc: , })const ruleForms ref(null);const rules {name: [{required: true,message: 请输入活动名称,trigger: blur,},{min: 3,max: 5,message: 长度在 3 到 5 个字符,trigger: blur,}],region: [{required: true,message: 请选择活动区域,trigger: change,}],date1: [{type: date,required: true,message: 请选择一个日期,trigger: change,},],type: [{type: array,required: true,message: 请至少选择一种活动类型,trigger: change,},],resource: [{required: true,message: 请选择一个活动资源,trigger: change,},],desc: [{ required: true, message: 请输入活动形式, trigger: blur },],}const onSubmit () {console.log(submit!)//通过ref的值触发验证//validate 验证表单项的方法 ruleForms.value.validate((valid) {if (valid) {console.log(通过);//触发成功验证表单则调用接口即发送异步请求到 SpringBoot 项目} else {console.log(未通过);}});}/script15、Alert提示 基本使用: el-alert/el-alert type 属性:success、info、warning、error 主题:effectdark 自定义关闭按钮的文本:标签加close-text关闭 文字居中:标签加center templateel-alert title成功提示 typesuccess effectdark /el-alert title信息提示 typeinfo effectdark /el-alert title警告提示 typewarning effectdark /el-alert title错误提示 typeerror effectdark /h1描述性文本呢/h1el-alert title成功提示 typesuccess effectdark description成功的辅助性文字/h1不可以关闭/h1el-alert title成功提示 typesuccess effectdark description成功的辅助性文字 :closablefalse/h1文字居中/h1el-alert title成功提示 typesuccess effectdark description成功的辅助性文字 :closablefalse :centertrue/h1自定义关闭按钮文本/h1el-alert title成功提示 typesuccess effectdark description成功的辅助性文字 close-text关闭/h1显示图标/h1el-alert title成功提示 typesuccess effectdark show-icon/el-alert title信息提示 typeinfo effectdark show-icon/el-alert title警告提示 typewarning effectdark show-icon/el-alert title错误提示 typeerror effectdark show-icon//templatescript setup/scriptstyle scoped/style16、Message消息提示组件 注意:这个组件的创建无须在页面中写任何标签他是一个 js 插件在需要展示消息提示的位置直接调用提供的 js 插件方法即可 基本使用 templateel-button clickopen普通消息提示/el-button /templatescript setup import { ElMessage } from element-plusconst open () {ElMessage({message: 这是一条普通消息提示,type: success,// 可以手动关闭 showClose: true,// 文字居中 center: true})} /script如果我们要自定义消息提示文字 templateel-button clickopenVn自定义消息提示/el-button /templatescript setup import { h } from vue import { ElMessage } from element-plusconst openVn () {// 给 p 标签加了一个 span 标签,然后让字体倾斜ElMessage({message: h(p, null, [h(span, null, 自定义内容: ),h(i, { style: color: teal }, 秦晓林真帅),]),}) } /script16.1、方法 关闭提示框: ElMessage.closeAll() templateh1普通消息提示/h1el-button clickopen普通消息提示/el-buttonh1手动关闭/h1el-button clickclose关闭消息提示/el-button /templatescript setupimport { h } from vue import { ElMessage } from element-plusconst open () {ElMessage({message: 这是一条普通消息提示,type: success,showClose: true,center: true})}const close () {ElMessage.closeAll() }/script