Vue?Element?plus使用方法梳理
說(shuō)明
- 本教程適用于Element-plus的使用非常熟練
- 本教程是對(duì)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.外部方法()(注對(duì)元素進(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方法,對(duì)ref元素進(jìn)行操作 }
到此這篇關(guān)于Vue Element plus使用方法梳理的文章就介紹到這了,更多相關(guān)Vue Element plus內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue 實(shí)現(xiàn)通過(guò)手機(jī)發(fā)送短信驗(yàn)證碼注冊(cè)功能
這篇文章主要介紹了vue 實(shí)現(xiàn)通過(guò)手機(jī)發(fā)送短信驗(yàn)證碼注冊(cè)功能的相關(guān)資料,需要的朋友可以參考下2018-04-04基于webpack4+vue-cli3項(xiàng)目實(shí)現(xiàn)換膚功能
這篇文章主要介紹了基于webpack4+vue-cli3項(xiàng)目的換膚功能,文中是通過(guò)scss+style-loader/useable做換膚功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07vue中跳轉(zhuǎn)界面的3種實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue中跳轉(zhuǎn)界面的3種實(shí)現(xiàn)方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07vee-validate vue 2.0自定義表單驗(yàn)證的實(shí)例
今天小編就為大家分享一篇vee-validate vue 2.0自定義表單驗(yàn)證的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08fullcalendar日程管理插件月份切換回調(diào)處理方案
這篇文章主要為大家介紹了fullcalendar日程管理插件月份切換回調(diào)處理的方案示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-03-03vue element 關(guān)閉當(dāng)前tab 跳轉(zhuǎn)到上一路由操作
這篇文章主要介紹了vue element 關(guān)閉當(dāng)前tab 跳轉(zhuǎn)到上一路由操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07vue+Element實(shí)現(xiàn)搜索關(guān)鍵字高亮功能
這篇文章主要為大家詳細(xì)介紹了vue+Element實(shí)現(xiàn)搜索關(guān)鍵字高亮功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-05-05