Vue?Element?plus使用方法梳理
更新時間:2022年12月23日 15:50:27 作者:hrj199036
Element?Plus,由餓了么大前端團隊開源出品的一套為開發(fā)者、設計師和產(chǎn)品經(jīng)理準備的基于?Vue?3.0?的組件庫,Element?Plus是基于Vue3面向設計師和開發(fā)者的組件庫,提供了配套設計資源,幫助你的網(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="導入數(shù)據(jù)" width="30%" @closed ="closedmenu" > <!--@closed是內(nèi)部事件調(diào)用--> </eldilog>
三、組件插槽的使用
在組件標簽中間,添加以下代碼
<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)用標簽的$refs
要在組件標簽中定義ref屬性值(目地是為了在script中獲取標簽)
在script中
- 先導入import type { uploadInstance } from ‘element-plus’
- 定義ref屬性 const ref 屬性名 = ref<uploadInstance>()
- 調(diào)用外部方法 ref屬性名.value.外部方法()(注對元素進行操作)
2、使用方法
在組件中
<el-upload ref="uploadrefss" > <!--要在組件標簽中定義ref屬性值--> </el-upload>
在script中
import type { UploadInstance } from 'element-plus' const 函數(shù)名= () => { uploadrefss.value?.clearFiles() //clearFiles方法,對ref元素進行操作 }
到此這篇關于Vue Element plus使用方法梳理的文章就介紹到這了,更多相關Vue Element plus內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue 實現(xiàn)通過手機發(fā)送短信驗證碼注冊功能
這篇文章主要介紹了vue 實現(xiàn)通過手機發(fā)送短信驗證碼注冊功能的相關資料,需要的朋友可以參考下2018-04-04基于webpack4+vue-cli3項目實現(xiàn)換膚功能
這篇文章主要介紹了基于webpack4+vue-cli3項目的換膚功能,文中是通過scss+style-loader/useable做換膚功能,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07vee-validate vue 2.0自定義表單驗證的實例
今天小編就為大家分享一篇vee-validate vue 2.0自定義表單驗證的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08fullcalendar日程管理插件月份切換回調(diào)處理方案
這篇文章主要為大家介紹了fullcalendar日程管理插件月份切換回調(diào)處理的方案示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-03-03vue element 關閉當前tab 跳轉(zhuǎn)到上一路由操作
這篇文章主要介紹了vue element 關閉當前tab 跳轉(zhuǎn)到上一路由操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07