快捷導(dǎo)航

Vue?Element?plus使用方法梳理

更新時間：2022年12月23日 15:50:27 作者：hrj199036

Element?Plus，由餓了么大前端團(tuán)隊開源出品的一套為開發(fā)者、設(shè)計師和產(chǎn)品經(jīng)理準(zhǔn)備的基于?Vue?3.0?的組件庫，Element?Plus是基于Vue3面向設(shè)計師和開發(fā)者的組件庫，提供了配套設(shè)計資源，幫助你的網(wǎng)站快速成型

說明

本教程適用于Element-plus的使用非常熟練
本教程是對Element-plus的高度總結(jié)
組件屬性的使用
組件插槽的使用
組件內(nèi)部事件的使用
組件外部方法的使用

一、組件屬性的使用

可以在組件中直接使用

<el-form
	:model="form"
	label-width="120px"
>
	//model、label-width屬于組件屬性、上圖中可以查找
    <el-form-item label="Activity name">
    </el-form-item>
</el-from>

二、組件內(nèi)部事件的使用

可以在組件中直接使用

 <el-dialog
	 v-model="Data.exportcenterDialogVisible"
	 title="導(dǎo)入數(shù)據(jù)"
	 width="30%"
	 @closed ="closedmenu"
 >
<!--@closed是內(nèi)部事件調(diào)用-->
 </eldilog>

三、組件插槽的使用

在組件標(biāo)簽中間，添加以下代碼

<template #插槽名>
<!--使用插槽方法-->
</template>

例：

<template #footer>
 <!--<template #footer>是插槽footer的使用 -->
      <span class="dialog-footer">
        <el-button type="primary" @click="alldialogvisible" v-if="!Data.isView">
          保存
        </el-button>
        <el-button @click="closedmenu">取消</el-button>
      </span>
</template>

四、組件外部方法的使用

1、使用外部方法是要調(diào)用標(biāo)簽的$refs

要在組件標(biāo)簽中定義ref屬性值（目地是為了在script中獲取標(biāo)簽）

在script中

先導(dǎo)入import type { uploadInstance } from ‘element-plus’
定義ref屬性 const ref 屬性名 = ref<uploadInstance>()
調(diào)用外部方法 ref屬性名.value.外部方法()(注對元素進(jìn)行操作)

2、使用方法

在組件中

<el-upload
   ref="uploadrefss"
>
<!--要在組件標(biāo)簽中定義ref屬性值-->
</el-upload>

在script中

import type { UploadInstance } from 'element-plus'
const 函數(shù)名= () => {
  uploadrefss.value?.clearFiles()
 //clearFiles方法，對ref元素進(jìn)行操作
}

到此這篇關(guān)于Vue Element plus使用方法梳理的文章就介紹到這了,更多相關(guān)Vue Element plus內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue 實現(xiàn)通過手機發(fā)送短信驗證碼注冊功能
這篇文章主要介紹了vue 實現(xiàn)通過手機發(fā)送短信驗證碼注冊功能的相關(guān)資料,需要的朋友可以參考下
2018-04-04
基于webpack4+vue-cli3項目實現(xiàn)換膚功能
這篇文章主要介紹了基于webpack4+vue-cli3項目的換膚功能,文中是通過scss+style-loader/useable做換膚功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-07-07
vue中跳轉(zhuǎn)界面的3種實現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue中跳轉(zhuǎn)界面的3種實現(xiàn)方法,文中通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-07-07
vee-validate vue 2.0自定義表單驗證的實例
今天小編就為大家分享一篇vee-validate vue 2.0自定義表單驗證的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
fullcalendar日程管理插件月份切換回調(diào)處理方案
這篇文章主要為大家介紹了fullcalendar日程管理插件月份切換回調(diào)處理的方案示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-03-03
vue父子組件之間的傳參的幾種方式小結(jié)
本文主要介紹了vue父子組件之間的傳參的幾種方式小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
vue element 關(guān)閉當(dāng)前tab 跳轉(zhuǎn)到上一路由操作
這篇文章主要介紹了vue element 關(guān)閉當(dāng)前tab 跳轉(zhuǎn)到上一路由操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue中wangEditor5編輯器的基本使用
wangEditor是一個輕量級web富文本編輯器,配置方便,使用簡單,下面這篇文章主要給大家介紹了關(guān)于vue中wangEditor5編輯器的基本使用,文中通過圖文以及實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-03-03
vue+Element實現(xiàn)搜索關(guān)鍵字高亮功能
這篇文章主要為大家詳細(xì)介紹了vue+Element實現(xiàn)搜索關(guān)鍵字高亮功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-05-05
Vue.js中對css的操作（修改）具體方式詳解
使用v-bind：class或者v-bind:style或者直接通過操作dom來對其樣式進(jìn)行更改；接下來通過本文給大家分享Vue.js中對css的操作（修改）具體方式，感興趣的朋友跟隨小編一起看看吧
2018-10-10