element-plus入门到精通

精选原创

虾王之王 2024-11-18 01:00:19 ©著作权

文章标签 Element Plus Vue3 UI框架 文章分类 Vue.js 前端开发

©著作权归作者所有：来自51CTO博客作者虾王之王的原创作品，请联系作者获取转载授权，否则将追究法律责任

简介

Element-Plus：是饿了么团队研发的，基于 Vue 3，一个Web UI框架，它支持国际化、拥有众多设计精美的UI组件。，它支持按需记载从而减小部署包的大小，加快客户端的访问速度。使用Element Plus UI框架，可以极大的提高项目的开发效率，并且我们可以定制它的样式和逻辑满足我们的需求。所以作为一名web编程人员，我们有必要学习一下Element Plus UI框架，增加我们的技术积累。

Element Plus 与 Element UI

Element Plus是基于最新的Vue 3开发的，而Element UI是基于Vue 2，可以说Element Plus是Element UI的升级版。目前Vue官方已停止了Vue 2的开发，所以Element UI迟早会退出历史的舞台，所以初学者直接学习Element Plus就可以了。

安装

安装 element-plus的命令

npm install element-plus --save

使用入门

在main.js完整引入依赖

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/dist/index.css'  // 引入
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus, {
    locale: zhCn,
})

app.mount('#app')

修改项目根目录下的vite.config.js，配置Element Plus按需导入

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Element Plus的组件都是也【el-】作为开头。

比如：

<div>
  <el-button type="primary" @click="addDevice">新增</el-button>
</div>

在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>

显示效果：

element-plus入门到精通_Vue3

组件的介绍

Button

基础用法

使用 type、plain、round 和 circle 来定义按钮的样式。

示例：

<template>
  <div 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>
  </div>

  <div class="mb-4">
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
  </div>

  <div class="mb-4">
    <el-button round>Round</el-button>
    <el-button type="primary" round>Primary</el-button>
    <el-button type="success" round>Success</el-button>
    <el-button type="info" round>Info</el-button>
    <el-button type="warning" round>Warning</el-button>
    <el-button type="danger" round>Danger</el-button>
  </div>

  <div>
    <el-button :icon="Search" circle />
    <el-button type="primary" :icon="Edit" circle />
    <el-button type="success" :icon="Check" circle />
    <el-button type="info" :icon="Message" circle />
    <el-button type="warning" :icon="Star" circle />
    <el-button type="danger" :icon="Delete" circle />
  </div>
</template>

<script lang="ts" setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
</script>

element-plus入门到精通_UI框架_02

默认按钮：type="xxx"

简洁按钮：plain

圆角按钮：round

图标按钮：:icnotallow="xxx"

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

禁用状态

你可以使用 disabled 属性来定义按钮是否被禁用。

使用 disabled 属性来控制按钮是否为禁用状态。该属性接受一个 Boolean 类型的值。

<template>
  <div class="mb-4">
    <el-button disabled>Default</el-button>
    <el-button type="primary" disabled>Primary</el-button>
    <el-button type="success" disabled>Success</el-button>
    <el-button type="info" disabled>Info</el-button>
    <el-button type="warning" disabled>Warning</el-button>
    <el-button type="danger" disabled>Danger</el-button>
  </div>

  <div>
    <el-button plain disabled>Plain</el-button>
    <el-button type="primary" plain disabled>Primary</el-button>
    <el-button type="success" plain disabled>Success</el-button>
    <el-button type="info" plain disabled>Info</el-button>
    <el-button type="warning" plain disabled>Warning</el-button>
    <el-button type="danger" plain disabled>Danger</el-button>
  </div>
</template>

element-plus入门到精通_Element Plus_03

链接按钮

加入link属性的按钮为链接按钮。

<template>
  <p>Basic link button</p>
  <div class="mb-4">
    <el-button
      v-for="button in buttons"
      :key="button.text"
      :type="button.type"
      link
    >
      {{ button.text }}
    </el-button>
  </div>

  <p>Disabled link button</p>
  <div>
    <el-button
      v-for="button in buttons"
      :key="button.text"
      :type="button.type"
      link
      disabled
    >
      {{ button.text }}
    </el-button>
  </div>
</template>

<script setup lang="ts">
const buttons = [
  { type: '', text: 'plain' },
  { type: 'primary', text: 'primary' },
  { type: 'success', text: 'success' },
  { type: 'info', text: 'info' },
  { type: 'warning', text: 'warning' },
  { type: 'danger', text: 'danger' },
] as const
</script>

element-plus入门到精通_UI框架_04

Link链接

文字超链接

<template>
  <div>
    <el-link href="https://element-plus.org" target="_blank">default</el-link>
    <el-link type="primary">primary</el-link>
    <el-link type="success">success</el-link>
    <el-link type="warning">warning</el-link>
    <el-link type="danger">danger</el-link>
    <el-link type="info">info</el-link>
  </div>
</template>
<style scoped>
.el-link {
  margin-right: 8px;
}
.el-link .el-icon--right.el-icon {
  vertical-align: text-bottom;
}
</style>

禁用状态：disabled

下划线：:underline

图标链接：:icon

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>

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>

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>

单选框组

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

基本使用

为 el-radio-group 绑定 v-model

再为每一个 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>

事件

事件的使用也是和属性使用一致，都是直接写在对应的组件标签上

<el-radio label="1" size="large" border @change="A">Option A</el-radio>

<script setup>
const A = ()=>{
  alert('A')
}
</script>

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>

多选框组

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

基本用法：<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时有效

事件

事件的使用也是和属性使用一致，都是直接写在对应的组件标签上

<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>

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"

事件

事件的使用也是和属性使用一致，都是直接写在对应的组件标签上

<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 属性生成的清空按钮时触发

方法

给标签加ref="xxx" 组件别名绑定数据

通过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>

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 属性仅适用于单选)

基础多选

为 el-select 设置 multiple 属性即可启用多选

<template>
  	<el-select  v-model="username" multiple>
      <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'

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>

事件

事件的使用也是和属性使用一致，都是直接写在对应的组件标签上

<template>
    <el-select  v-model="username" multiple @change="A">
      <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'
    
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)
}

方法

给标签加ref="xxx" 组件别名绑定数据

通过xxx.value.方法名调用方法

<template>
    <el-select  v-model="username" multiple ref="selects">
      <el-option
          v-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>

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-switch
        v-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>

事件

事件的使用也是和属性使用一致，都是直接写在对应的组件标签上

<template>
	<el-switch v-model="value1" @change="A"/>
</template>

<script setup>

    
const A = (value)=> {
  console.log(value)
}    
</script>

方法

给标签加ref="xxx" 组件别名绑定数据

通过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>

DatePicker日期选择器

基础用法：

<template>
    <el-date-picker
          v-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-picker
      v-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-picker
      v-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-picker
      v-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>

事件

事件的使用也是和属性使用一致，都是直接写在对应的组件标签上

<template>
    <el-date-picker
      v-model="value4"
      type="date"
      placeholder="请选择日期"
      @change="handleChange" />

</template>

<script setup>
import { ref } from 'vue'
const value4 = ref('')
    

const handleChange = (value) => {
  console.log(value)
}

</script>

方法

<template>
     <el-date-picker
      v-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>

国际化

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

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

app.use(ElementPlus, {
  // 使用中文显示
  locale: zhCn,
})

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-upload
      action="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-upload
      action="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 = {
  // 每次上传时候不光上传文件,还附带上传额外参数token
  token: '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("点击文件列表中已上传的文件时的钩子" + )
}

const handleRemove = (UploadFile,uploadFiles)=> {
  console.log("文件列表移除文件时的钩子" +  + ",文件数" +uploadFiles.length)
}

const handleSuccess = (UploadFile,uploadFiles)=> {
  console.log("文件上传成功时的钩子" +  + "文件数" +uploadFiles.length)
}
const handleError = (Error,UploadFile,uploadFiles)=> {
  console.log("文件上传失败时的钩子" + )
}


const handleProgress = (UploadFile)=> {
  console.log("文件上传时的钩子" + )
} 
</script>

这里解释一下官方文档的意思：这个钩子函数接收两个参数，类型分别为 uploadFile 和 uploadFiles ，返回值是 void，也就是无返回值

方法

<template>
    <el-upload
      ref="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>

Form表单

基本使用：<el-form> 里面包含 <el-form-item>

<template>
  <el-form :model="form" label-width="120px">
    <el-form-item label="活动名称">
      <el-input v-model="" />
    </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-picker
            v-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-picker
            v-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=":" ，比方说一般加个冒号

表单验证

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

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

给el-form 标签添加 :rule="xxx"

给el-form-item 标签加 prop="xxx"

这里给 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="" />
    </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-picker
            v-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-picker
            v-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>

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>

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>

方法

关闭提示框: 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>

上一篇：lombok中@Slf4j的使用

下一篇：Vue Router详解

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯