欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue?Element?plus使用方法梳理

 更新時(shí)間：2022年12月23日 15:50:27   作者：hrj199036  
Element?Plus，由餓了么大前端團(tuán)隊(duì)開(kāi)源出品的一套為開(kāi)發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于?Vue?3.0?的組件庫(kù)，Element?Plus是基于Vue3面向設(shè)計(jì)師和開(kāi)發(fā)者的組件庫(kù)，提供了配套設(shè)計(jì)資源，幫助你的網(wǎng)站快速成型

說(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)文章

最新評(píng)論