Element Plus框架快速上手详解(一)

Element Plus框架快速上手详解

  • 1、Element Plus
    • 1.1、安装
  • 2、Button
  • 3、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 :label="1" v-model="radio">Option A</el-radio>
<el-radio label="2" v-model="radio1">Option B</el-radio><script setup>const radio = ref(1)const radio1 = ref("2")
</script>

在Element Plus 文档中的默认值是 boolean 的属性使用一律加冒号:

1.1、安装

  1. 通过脚手架Vite创建Vue项目
npm create vite@latest
  1. 安装 element-plus
npm install element-plus --save
  1. 在main.js完整引入依赖
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')
  1. 在App.vue中使用
<script setup></script><template><div><!--使用默认按钮--><el-row class="mb-4"><el-button>Default</el-button><el-button type="primary">Primary</el-button><el-button type="success">Success</el-button><el-button type="info">Info</el-button><el-button type="warning">Warning</el-button><el-button type="danger">Danger</el-button></el-row></div>
</template><style scoped></style>
  1. 启动项目

2、Button

在这里插入图片描述

  • 基础用法：<el-button></el-button>

  • 默认按钮：type="xxx"

  • 简洁按钮：plain

  • 圆角按钮：round

  • 图标按钮：:icon="xxx"

  <el-row class="mb-4"><!--1.使用默认按钮--><el-button type="primary">Primary</el-button><!--2.使用简洁按钮:鼠标移动上去才会显示背景颜色--><el-button type="primary" plain>Primary</el-button><!--3.使用圆角按钮--> <el-button type="primary" round>Primary</el-button><!--4.使用图标按钮--><el-button type="primary" :icon="Edit" circle />  </el-row>

在Element plus 中所有组件的属性全都写在组件标签中

3、Link链接

在这里插入图片描述

  • 基础用法：<el-link></el-link>
  • 禁用状态：disabled
  • 下划线：:underline
  • 图标链接：:icon
<!--1.文字链接-->
<el-link type="primary" href="https://element-plus.org" target="_blank">primary</el-link><!--2.文字链接禁用-->
<el-link type="primary" disabled>primary</el-link><!--2.文字链接下划线-->
<el-link :underline="false">没有下划线</el-link>
<el-link>有下划线</el-link><!--2.图标链接-->
<el-link :icon="Edit">Edit</el-link>

4、Layout布局

通过基础的 24 分栏，迅速简便地创建布局。

  • 行的属性写在 <el-row> 标签里面，列的属性写在<el-col> 标签里面

  • 基础布局：:span="xx"

    <el-row><el-col :span="24"></el-col>
</el-row>

  • 列间距：<el-row :gutter="20">

    • 行提供 gutter 属性来指定列之间的间距，其默认值为0。
    <el-row :gutter="20"><el-col :span="6"><div class="col">占用四分之一6</div></el-col><el-col :span="6"><div class="col">占用四分之一6</div></el-col><el-col :span="6"><div class="col">占用四分之一6</div></el-col>
</el-row>

  • 列偏移：<el-col :span="6" :offset="6"></el-col>

    • 列提供offset属性可以指定分栏偏移的栏数
    <el-col :span="6" :offset="6"><div class="col">占用四分之一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 direction="horizontal"></el-container>

  • 垂直容器：<el-container direction="vertical"></el-container>

<el-container direction="horizontal"><el-header>Header</el-header><el-aside>Aside</el-aside><el-main>Main</el-main><el-footer>Footer</el-footer>
</el-container>

6、Radio单选框

  • Radio 单选框需要 v-model 和 label 两个属性
<template><el-radio-group v-model="radio1"><el-radio label="男" size="large">男</el-radio><el-radio label="女" size="large">女</el-radio></el-radio-group>
</template><script setup>
import { ref } from 'vue'const radio1 = ref('男')
</script>

6.1、单选框组

结合el-radio-group元素和子元素el-radio可以实现单选组：

  1. 为 el-radio-group 绑定 v-model
  2. 再为 每一个 el-radio 设置好 label 属性即可
<template><el-radio-group v-model="radio"><el-radio :label="3">Option A</el-radio><el-radio :label="6">Option B</el-radio><el-radio :label="9">Option C</el-radio></el-radio-group>
</template><script setup>
import { ref } from 'vue'const radio = ref(3)
</script>

6.2、事件

  • 事件的使用也是和属性使用一致，都是直接写在对应的组件标签上
<el-radio label="1" size="large" border @change="A">Option A</el-radio><script setup>
const A = ()=>{alert('A')
}
</script>

7、Checkbox多选框

  • 基本使用：<el-checkbox></el-checkbox>
<el-checkbox v-model="checked">北京</el-checkbox>
<el-checkbox v-model="checked">上海</el-checkbox>
<el-checkbox v-model="checked">天津</el-checkbox>

  • 禁用状态：标签加disabled

  • 带有边框：标签加border

  • 选中状态的值：true-label='xx'

<template><!-- 当选中时的值是北京 --><el-checkbox v-model="checked1" true-label="北京">北京</el-checkbox><el-checkbox v-model="checked1" true-label="上海">上海</el-checkbox>
</template><script>import { ref } from 'vue'const checked1 = ref('北京')
</script>

7.1、多选框组

适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。

  • 基本用法：<el-checkbox-group></el-checkbox-group>
<template><el-checkbox-group v-model="checkList" @change="B"><el-checkbox label="北京" /><el-checkbox label="上海" /><el-checkbox label="西安" /><el-checkbox label="禁用" disabled /><el-checkbox label="郑州" disabled /></el-checkbox-group>
</template><script setup>
import { ref } from 'vue'const checkList = ref(['北京', '郑州'])
const B = ()=> {console.log(checkList.value)
}</script>
  • 属性 label 是选中状态的值：只有在checkbox-group或者绑定对象类型为array时有效

7.2、事件

  • 事件的使用也是和属性使用一致，都是直接写在对应的组件标签上
<template><el-checkbox v-model="checked2" @change="A">北京</el-checkbox>
</template><script setup>import { ref } from 'vue'const checked2 = ref(false)const A = ()=> {console.log(checked2.value)}
</script>

8、Input输入框组件

  • 基本使用：<el-input v-model="input"></el-input>
<template><h1>基础用法</h1><el-input v-model="input" placeholder="请输入" />
</template><script setup>
import { ref } from 'vue'const input = ref('')
</script>

  • 禁用状态：标签加disabled

  • 输入框加入清空按钮：标签加clearable

  • 密码框：标签加type=password show-password

  • 文本框输入限制：标签加type=text maxlength="10" show-word-limit

  • 带图标输入框：标签加：prefix-icon="User" suffix-icon="xxx"

8.1、事件

  • 事件的使用也是和属性使用一致，都是直接写在对应的组件标签上
<template><el-input v-model="input" placeholder="请输入" @blur="A"/>
</template><script setup>
import { ref } from 'vue'const input = ref('')const A = ()=> {alert("失去焦点")
}
</script>
  • 失去焦点：@blur
  • 获得焦点：@focux
  • 事件传值：
    • change(value) ： 当输入框市区焦点或者用户按下 Enter 时触发
    • input(value) ： 在 Input 值改变时触发
<template><el-input v-model="input" placeholder="请输入" @blur="A" /><el-input v-model="input3" placeholder="请输入" @change="B" /><el-input v-model="input4" placeholder="请输入" @input="C" /></template><script setup>
import { ref } from 'vue'const 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)
}</script>
  • clear：在点击由 clearable 属性生成的清空按钮时触发

8.2、方法

  1. 给标签加ref="xxx" 组件别名绑定数据
  2. 通过xxx.value.方法名 调用方法
<template><el-input v-model="input5" ref="inputs"></el-input><el-button @click="focusInput">点击</el-button>
</template><script setup>
import { ref } from 'vue'  const input5 = ref('')const inputs = ref()
const focusInput = ()=> {// 点击按钮则聚焦  inputs.value.focus()
}
</script>

9、Select选择器

  • 基础用法
    • :label="xx" 要展示的下拉文字
    • :value="xx" 选择后所对应的值
<template><el-select v-model="username"><el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" /></el-select>
</template><script 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标签加:disabled="item.disabled"，并且 options 禁用的对象也加disabled: true
<template><el-select v-model="username"><el-option v-for="item in options" :key="item.id" :label="item.name":value="item.id"             :disabled="item.disabled" /></el-select>
</template><script 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 属性即可启用多选
<template><el-select  v-model="username" multiple><el-optionv-for="item in options":key="item.id":label="item.name":value="item.id" /></el-select>
</template><script setup>
import { ref } from 'vue'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>

9.2、事件

  • 事件的使用也是和属性使用一致，都是直接写在对应的组件标签上
<template><el-select  v-model="username" multiple @change="A"><el-optionv-for="item in options":key="item.id":label="item.name":value="item.id" /></el-select>
</template><script setup>
import { ref } from 'vue'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: "肥八"}
]// 选中的值
const A = (value)=> {console.log(value)
}

9.3、方法

  1. 给标签加ref="xxx" 组件别名绑定数据
  2. 通过xxx.value.方法名 调用方法
<template><el-select  v-model="username" multiple ref="selects"><el-optionv-for="item in options":key="item.id":label="item.name":value="item.id" /></el-select><el-button @click="selectFocus">点击聚焦</el-button>
</template><script setup>
import { ref } from 'vue'const selects = ref('')
const selectFocus = ()=> {selects.value.focus()
}    
</script>

10、Switch开关

  • 基础用法
<template><el-switch v-model="value1" />	
</template><script setup>
<script setup>import { ref } from 'vue'
const value1 = ref(true)
</script>

  • 禁用状态：给标签加 disabled

  • 加载状态：给标签加 loading

  • 添加图标：给标签加 :active-action-icon="View" :inactive-action-icon="Hide" inline-prompt

  • 文字描述：给标签加 active-text="是" inactive-text="否" inline-prompt

  • 扩展的 value 类型：设置 active-value 和 inactive-value 属性， 它们接受 Boolean、String 或 Number 类型的值。

<template><!--开关打开值是100,开关关闭值是0--><el-switchv-model="value4"style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"active-value="100"inactive-value="0"/>
</template><script setup>
import { ref } from 'vue'
const value4 = ref('100')  </script>

10.1、事件

  • 事件的使用也是和属性使用一致，都是直接写在对应的组件标签上
<template><el-switch v-model="value1" @change="A"/>
</template><script setup>const A = (value)=> {console.log(value)
}    
</script>

10.2、方法

  1. 给标签加ref="xxx" 组件别名绑定数据
  2. 通过xxx.value.方法名 调用方法
<template><el-switch v-model="value1" ref="switchs"/><el-button @click="switchFocus">点击</el-button>
</template><script setup>
import { ref } from 'vue'const value1 = ref(true)    const switchs = ref()
const switchFocus = ()=> {console.log("switch获得焦点")switchs.value.focus()
}   
</script>

11、DatePicker日期选择器

  • 基础用法：
<template><el-date-pickerv-model="value1"type="date"placeholder="请选择日期" /></template><script setup>
import { ref } from 'vue'
const value1 = ref('')</script>
  • 只读：标签加:readonly="true"
  • 禁用：标签加:disabled="true"
  • 显示清除按钮：标签加:clearable="true"
  • 显示时间范围：标签加type="daterange"
<template><el-date-pickerv-model="value1"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期" /></template><script setup>
import { ref } from 'vue'
const value1 = ref('')</script>

  • 输入框的格式：标签加format="yyyy/MM/dd"

  • 设置快捷选项

<template><el-date-pickerv-model="value3"type="date"placeholder="请选择日期":shortcuts="shortcuts" /></template><script 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-date="disabledDate"
<template><el-date-pickerv-model="value3"type="date"placeholder="请选择日期":disabled-date="disabledDate" /></template><script setup>
import { ref } from 'vue'
const value3 = ref('')const disabledDate = (time) => {// 如果输入框选择的时间 > 当前的时间 ,则不可选,也就是只能选 当前时间之前的return time.getTime() > Date.now()
}
</script>

在这里插入图片描述

11.1、事件

  • 事件的使用也是和属性使用一致，都是直接写在对应的组件标签上
<template><el-date-pickerv-model="value4"type="date"placeholder="请选择日期"@change="handleChange" /></template><script setup>
import { ref } from 'vue'
const value4 = ref('')const handleChange = (value) => {console.log(value)
}</script>

11.2、方法

<template><el-date-pickerv-model="value5"type="date"placeholder="请选择日期"@blur="handleBlur"ref="datePickers"/></template><script setup>
import { ref } from 'vue'
const value5 = ref('')const datePickers = ref()
const handleBlur = ()=> {console.log("获得焦点")datePickers.value.focus()
}</script>

12、国际化

Element Plus 组件 默认 使用英语，如果你希望使用其他语言，可以进行全局配置：

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'app.use(ElementPlus, {// 使用中文显示locale: zhCn,
})

13、Upload组件

  • 基础用法：
<template><el-upload action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"><el-button type="primary">点击上传</el-button></el-upload>
</template>

action 属性是必须的，表示请求 URL

  • 默认显示上传的文件列表：属性加 :file-list="fileList"
<template><el-upload:file-list="fileList"action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"><el-button type="primary">点击上传</el-button></el-upload>
</template><script setup>
import { ref } from 'vue'const 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>
<template><el-upload:file-list="fileList"action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"><el-button type="primary">点击上传</el-button><template #tip><div class="el-upload__tip">这里是上传文件的地方</div></template></el-upload>
</template><script setup>
import { ref } from 'vue'const 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

<template><el-uploadaction="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"drag><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div></el-upload>
</template>
  • 上传文件附带额外参数：标签加：:data="xxx"
<template><el-uploadaction="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15":data="information"><el-button type="primary">点击上传</el-button></el-upload>
</template><script setup>
import { ref } from 'vue'const information = {// 每次上传时候不光上传文件,还附带上传额外参数tokentoken: '123456'
}    
</script>
  • 设置上传的文件名：标签加name="xxxx"
  • 不展示已经上传的文件列表：标签加:show-file-list="false"
  • 设置允许上传的文件类型：标签加:accept=".txt, .png"
  • 钩子函数
<template><el-upload:file-list="fileList"action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15":on-preview="handlePreview":on-remove="handleRemove":on-success="handleSuccess":on-error="handleError":on-progress="handleProgress"><el-button type="primary">点击上传</el-button></el-upload>
</template><script setup>
import { ref } from 'vue'const 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、方法

<template><el-uploadref="uploads"         action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"><el-button type="primary">点击上传</el-button></el-upload>
</template><script setup>
import { ref } from 'vue'const uploads = ref()
const clearFiles = ()=> {uploads.value.clearFiles()
}  
</script>

14、Form表单

  • 基本使用：<el-form> 里面包含 <el-form-item>
<template><el-form :model="form" label-width="120px"><el-form-item label="活动名称"><el-input v-model="form.name" /></el-form-item><el-form-item label="活动区域"><el-select v-model="form.region" placeholder="选择你的区域"><el-option label="上海" value="shanghai" /><el-option label="北京" value="beijing" /></el-select></el-form-item><el-form-item label="活动时间"><el-col :span="11"><el-date-pickerv-model="form.date1"type="date"placeholder="Pick a date"style="width: 100%"/></el-col><el-col :span="2" class="text-center"><span class="text-gray-500">-</span></el-col><el-col :span="11"><el-time-pickerv-model="form.date2"placeholder="Pick a time"style="width: 100%"/></el-col></el-form-item><el-form-item label="即时配送"><el-switch v-model="form.delivery" /></el-form-item><el-form-item label="活动性质"><el-checkbox-group v-model="form.type"><el-checkbox label="线上活动" name="type" /><el-checkbox label="地摊活动" name="type" /><el-checkbox label="线下主题活动" name="type" /><el-checkbox label="单纯品牌曝光" name="type" /></el-checkbox-group></el-form-item><el-form-item label="特殊资源"><el-radio-group v-model="form.resource"><el-radio label="线上品牌商赞助" /><el-radio label="线下场地免费" /></el-radio-group></el-form-item><el-form-item label="活动形式"><el-input v-model="form.desc" type="textarea" /></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">立即创建</el-button><el-button>取消</el-button></el-form-item></el-form>
</template><script 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!')
}</script><style scoped></style>

  • 表单项为一行：el-form标签加:inline="true"

  • 对齐方式：通过 label-position 属性来改变表单标签的位置，可选值为top、left、right，需要配置label-width="xxpx" 使用

<template><el-form:label-position="left"label-width="100px":model="form">
</template>
  • 表单标签后缀：标签加label-suffix=":" ，比方说一般加个冒号

14.1、表单验证

Form 组件允许你验证用户的输入是否符合规范，来帮助你找到和纠正错误。

只需为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。

  1. 给el-form 标签添加 :rule="xxx"
  2. 给el-form-item 标签加 prop="xxx"
  3. 这里给 el-form 绑定了别名 ruleForms,这样我们不光可以在用户填写表单时进行验证,还可以在提交表单时进行二次验证
<template><el-form :model="form" label-width="120px" label-suffix=":" :rules="rules" ref="ruleForms"><el-form-item label="活动名称" prop="name"><el-input v-model="form.name" /></el-form-item><el-form-item label="活动区域" prop="region"><el-select v-model="form.region" placeholder="选择你的区域"><el-option label="上海" value="shanghai" /><el-option label="北京" value="beijing" /></el-select></el-form-item><el-form-item label="活动时间" prop="data1"><el-col :span="11"><el-date-pickerv-model="form.date1"type="date"placeholder="Pick a date"style="width: 100%"/></el-col><el-col :span="2" class="text-center"><span class="text-gray-500">-</span></el-col><el-col :span="11"><el-time-pickerv-model="form.date2"placeholder="Pick a time"style="width: 100%"/></el-col></el-form-item><el-form-item label="即时配送"><el-switch v-model="form.delivery" /></el-form-item><el-form-item label="活动性质" prop="type"><el-checkbox-group v-model="form.type"><el-checkbox label="线上活动" name="type" /><el-checkbox label="地摊活动" name="type" /><el-checkbox label="线下主题活动" name="type" /><el-checkbox label="单纯品牌曝光" name="type" /></el-checkbox-group></el-form-item><el-form-item label="特殊资源" prop="resource"><el-radio-group v-model="form.resource"><el-radio label="线上品牌商赞助" /><el-radio label="线下场地免费" /></el-radio-group></el-form-item><el-form-item label="活动形式" prop="desc"><el-input v-model="form.desc" type="textarea" /></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">立即创建</el-button><el-button>取消</el-button></el-form-item></el-form></template><script 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("未通过");}});}</script>

15、Alert提示

  • 基本使用: <el-alert></el-alert>

  • type 属性:success、info、warning、error

  • 主题:effect="dark"

  • 自定义关闭按钮的文本:标签加close-text="关闭"

  • 文字居中:标签加center 

<template><el-alert title="成功提示" type="success" effect="dark" /><el-alert title="信息提示" type="info" effect="dark" /><el-alert title="警告提示" type="warning" effect="dark" /><el-alert title="错误提示" type="error" effect="dark" /><h1>描述性文本呢</h1><el-alert title="成功提示" type="success" effect="dark"  description="成功的辅助性文字"/><h1>不可以关闭</h1><el-alert title="成功提示" type="success" effect="dark"  description="成功的辅助性文字" :closable="false"/><h1>文字居中</h1><el-alert title="成功提示" type="success" effect="dark"  description="成功的辅助性文字" :closable="false" :center="true"/><h1>自定义关闭按钮文本</h1><el-alert title="成功提示" type="success" effect="dark"  description="成功的辅助性文字"   close-text="关闭"/><h1>显示图标</h1><el-alert title="成功提示" type="success" effect="dark" show-icon/><el-alert title="信息提示" type="info" effect="dark" show-icon/><el-alert title="警告提示" type="warning" effect="dark" show-icon/><el-alert title="错误提示" type="error" effect="dark" show-icon/></template><script setup></script><style scoped></style>

16、Message消息提示组件

注意:这个组件的创建无须在页面中写任何标签，他是一个 js 插件，在需要展示消息提示的位置直接调用提供的 js 插件方法即可

  • 基本使用：
<template><el-button @click="open">普通消息提示</el-button>
</template><script setup>
import { ElMessage } from 'element-plus'const open = () => {ElMessage({message: '这是一条普通消息提示',type: 'success',// 可以手动关闭  showClose: true,// 文字居中  center: true})}    
</script>
  • 如果我们要自定义消息提示文字
<template><el-button @click="openVn">自定义消息提示</el-button>
</template><script setup>
import { h } from 'vue'
import { ElMessage } from 'element-plus'const openVn = () => {// 给 p 标签加了一个 span 标签,然后让字体倾斜ElMessage({message: h('p', null, [h('span', null, '自定义内容: '),h('i', { style: 'color: teal' }, '秦晓林真帅'),]),})
}
</script>

16.1、方法

  • 关闭提示框: ElMessage.closeAll()
<template><h1>普通消息提示</h1><el-button @click="open">普通消息提示</el-button><h1>手动关闭</h1><el-button @click="close">关闭消息提示</el-button>
</template><script setup>import { h } from 'vue'
import { ElMessage } from 'element-plus'const open = () => {ElMessage({message: '这是一条普通消息提示',type: 'success',showClose: true,center: true})}const close = () => {ElMessage.closeAll()
}</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/152370.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

pytho你-opencv划痕检测

pytho你-opencv划痕检测

pytho你-opencv划痕检测 这次实验&#xff0c;我们将对如下图片进行划痕检测&#xff0c;其实这个比较有难度&#xff0c;因为清晰度太差了。 我们做法如下&#xff1a; &#xff08;1&#xff09;读取图像为灰度图像&#xff0c;进行自适应直方图均衡化处理&#xff0c;增强…
阅读更多...
ClickHouse的 MaterializeMySQL引擎

ClickHouse的 MaterializeMySQL引擎

1 概述 MySQL 的用户群体很大&#xff0c;为了能够增强数据的实时性&#xff0c;很多解决方案会利用 binlog 将数据写入到 ClickHouse。为了能够监听 binlog 事件&#xff0c;我们需要用到类似 canal 这样的第三方中间件&#xff0c;这无疑增加了系统的复杂度。 ClickHouse 20.…
阅读更多...
python爬虫SHA案例：某直播大数据分析平台

python爬虫SHA案例：某直播大数据分析平台

声明&#xff1a; 该文章为学习使用&#xff0c;严禁用于商业用途和非法用途&#xff0c;违者后果自负&#xff0c;由此产生的一切后果均与作者无关 一、找出需要加密的参数 js运行 atob(‘aHR0cDovL3d3dy5oaDEwMjQuY29tLyMvc2VhcmNoL3NlYXJjaA’) 拿到网址&#xff0c;F12打…
阅读更多...
基于安卓android微信小程序的个人管理小程序

基于安卓android微信小程序的个人管理小程序

运行环境 开发语言&#xff1a;Java 框架&#xff1a;ssm JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09; 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&a…
阅读更多...
记录一次较为完整的Jenkins发布流程

记录一次较为完整的Jenkins发布流程

文章目录 1. Jenkins安装1.1 Jenkins Docker安装1.2 Jenkins apt-get install安装 2. 关联github/gitee服务与webhook2.1 配置ssh2.2 Jenkins关联2.3 WebHook 3. 前后端关联发布 1. Jenkins安装 1.1 Jenkins Docker安装 Docker很好&#xff0c;但是我没有玩明白如何使用Docke…
阅读更多...
EI论文程序：Adaboost-BP神经网络的回归预测算法，可作为深度学习对比预测模型，丰富实验内容，自带数据集，直接运行！

EI论文程序：Adaboost-BP神经网络的回归预测算法，可作为深度学习对比预测模型，丰富实验内容，自带数据集，直接运行！

适用平台&#xff1a;Matlab 2021及以上 本程序参考中文EI期刊《基于Adaboost的BP神经网络改进算法在短期风速预测中的应用》&#xff0c;程序注释清晰&#xff0c;干货满满&#xff0c;下面对文章和程序做简要介绍。 为了提高短期风速预测的准确性&#xff0c;论文提出了使用…
阅读更多...
创新工具 | 教你6步用故事板设计用户体验事半功倍

创新工具 | 教你6步用故事板设计用户体验事半功倍

问题 构思方案时团队在细节上难以共识 故事板是什么&#xff1f;故事板就像连环画一样&#xff0c;将用户使用解决方案的关键步骤顺序串联了起来&#xff0c;呈现了方案和用户之间的交互。 故事板以先后顺序展现团队票选出来的最佳解决方案&#xff0c;在过程中对于方案中未…
阅读更多...
LangChain 5易速鲜花内部问答系统

LangChain 5易速鲜花内部问答系统

展示了一个完整的问答系统的实现&#xff0c;使用了Flask来构建Web界面、langchain进行文档处理和检索&#xff0c;以及OpenAI的语言模型。代码的复杂性在于集成了多种高级技术和处理大型数据集和语言模型。 LangChain 实现给动物取名字&#xff0c;LangChain 2模块化prompt t…
阅读更多...
MATLAB Simulink和S7-1200PLC MOBUSTCP通信

MATLAB Simulink和S7-1200PLC MOBUSTCP通信

MATLAB Simulink和SMART PLC OPC通信详细配置请查看下面文章链接： MATLAB和西门子SMART PLC OPC通信-CSDN博客文章浏览阅读749次，点赞26次，收藏2次。西门子S7-200SMART PLC OPC软件的下载和使用，请查看下面文章Smart 200PLC PC Access SMART OPC通信_基于pc access smart的…
阅读更多...
Django实战：从零到一构建安全高效的Web应用

Django实战：从零到一构建安全高效的Web应用

目录 一、概述 二、版本控制和部署 1、Git版本控制 2、Docker部署 三、数据库配置 1、配置数据库设置 2、创建数据库模型 四、URL路由和视图 1、定义URL路由 2、创建视图 五、模板渲染 1、创建模板 2、在视图中使用模板 总结 一、概述 Django是一个高级Python W…
阅读更多...
CleanMyMac X4.16免费版mac电脑一键清理电脑垃圾工具

CleanMyMac X4.16免费版mac电脑一键清理电脑垃圾工具

但是&#xff0c;我最近发现随着使用时间的增加&#xff0c;一些奇奇怪怪的文件开始占据有限的磁盘空间&#xff0c;存储空间变得越来越小&#xff0c;系统占用空间越来越大&#xff0c;越来越多的无效文件开始影响我电脑的运行速度。 Mac的文件管理方式和Windows不太一样&…
阅读更多...
基于C#实现字符串相似度

基于C#实现字符串相似度

一、概念 对于两个字符串 A 和 B&#xff0c;通过基本的增删改将字符串 A 改成 B&#xff0c;或者将 B 改成 A&#xff0c;在改变的过程中我们使用的最少步骤称之为“编辑距离”。比如如下的字符串&#xff1a;我们通过种种操作&#xff0c;痉挛之后编辑距离为 3&#xff0c;不…
阅读更多...
【zabbix监控四】zabbix之监控tomcat服务报警

【zabbix监控四】zabbix之监控tomcat服务报警

一、监控tomcat服务是否正常运行 1、客户端部署 首先要在zabbix-agent客户端上安装tomcat服务&#xff0c;并能正常启动和关闭 1.1 客户端编写脚本 vim /opt/tomcat.sh#!/bin/bash anetstat -natp |grep 8080|awk {print $6}|grep LISTEN if [[ $a LISTEN ]];thenecho &qu…
阅读更多...
upload-labs(1-17关攻略详解)

upload-labs(1-17关攻略详解)

upload-labs pass-1 上传一个php文件&#xff0c;发现不行 但是这回显是个前端显示&#xff0c;直接禁用js然后上传 f12禁用 再次上传&#xff0c;成功 右键打开该图像 即为位置&#xff0c;使用蚁剑连接 连接成功 pass-2 源码 $is_upload false; $msg null; if (isse…
阅读更多...
QMenuBar和QToolBar使用同一个QAction

QMenuBar和QToolBar使用同一个QAction

文章目录 前言一、编辑QMenuBar二、将QMenuBar中的Action添加到toolbar总结 前言 qmenubar中的action添加到toolbar&#xff0c;不是在toolbar中再添加action&#xff0c;效果图如下 一、编辑QMenuBar 正常编辑QMenuBar&#xff0c;以下图为例 二、将QMenuBar中的Action添…
阅读更多...
matlab层次分析法模型及相关语言基础

matlab层次分析法模型及相关语言基础

发现更多计算机知识&#xff0c;欢迎访问Cr不是铬的个人网站 代码放在最后面! 这篇文章是学习层次分析法模型的笔记。 1.什么时候用层次分析法 层次分析法是建模比赛中最基础的模型之一&#xff0c;其主要用于解决评价类问题&#xff08;例如&#xff1a;选择哪种方案最好、…
阅读更多...
opencv(5): 滤波器

opencv(5): 滤波器

滤波的作用&#xff1a;一幅图像通过滤波器得到另一幅图像&#xff1b;其中滤波器又称为卷积核&#xff0c;滤波的过程称为卷积。 锐化&#xff1a;边缘变清晰 低通滤波&#xff08;Low-pass Filtering&#xff09;&#xff1a; 目标&#xff1a;去除图像中的高频成分&#…
阅读更多...
什么是RS485通信

什么是RS485通信

RS-485是一种通讯接口标准&#xff0c;RS就是Recommended Standard的缩写&#xff08;推荐标准的意思&#xff09;485是标识号。 RS485采用总线的接线方式&#xff0c;广泛应用于数据采集和控制&#xff0c;它的主要优点之一是它允许将多个RS485设备放在同一条总线上。 多设备…
阅读更多...
关于LED显示屏的扫描方式知识

关于LED显示屏的扫描方式知识

LED显示屏的扫描方式是指LED显示屏如何以一定的顺序控制LED点阵的亮度&#xff0c;从而形成图像或文字。主要有静态扫描和动态扫描两种方式。 静态扫描&#xff08;Static Scan&#xff09;&#xff1a; 描述&#xff1a; 在静态扫描中&#xff0c;LED显示屏的每个LED点都有一个…
阅读更多...
DataBinding原理

DataBinding原理

1、MainActivity首先使用DataBindingUtil.setContentView设置布局文件activity_main.xml。 2、随后&#xff0c;经过一系列函数调用&#xff0c;ActivityMainBindingImpl对象最终会实例化&#xff0c;并与activity_main.xml进行绑定。 3、实例化后的ActivityMainBindingImpl对象…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023