VUE3 学习笔记（八-1）中 EasyUI 组件的使用方法

目录

一、首先看官方 Accordion 文档说明

二、如何使用 Props （属性） 

三、如何使用 Events（事件）

 四、如何使用Methods（方法）

1. 通过 ref 给Vue3中的标签添加引用

2. 在script setup lang="ts"中定义变量引用

3. 增加一个按键，用来点击实现程序切换panel

五、完整的演示程序代码

---

EasyUI 组件的使用是有规律的，不同的组件可能拥有Props（属性）、Events（事件）、Scoped Slots（插槽）、Methods（方法），不一定四个属性同时拥有，这需要根据官方文档来查看。

那么这些Props（属性）、Events（事件）、Scoped Slots（插槽）、Methods（方法）该如何使用呢？

我们就用 Accordion（手风琴 ）组件为例来说明：

一、首先看官方 Accordion 文档说明

<Accordion style="height:250px">
  <AccordionPanel :title="'Title1'">
    <p>Content1</p>
  </AccordionPanel>
  <AccordionPanel :title="'Title2'">
    <p>Content2</p>
  </AccordionPanel>
  <AccordionPanel :title="'Title3'">
    <p>Content3</p>
  </AccordionPanel>
</Accordion>

Props

Name	Type	Description	Default
border	boolean	Defines if to show the border.	true
multiple	boolean	True to enable expanding multiple panels at one time.	false
animte	boolean	Defines if to show animation effect when expand or collapse panels.	false
selectedIndex	number,array	The initialized selected panel index.	0

Events

Name	Parameter	Description
panelSelect	panel	Emitted when a panel is selected.
panelUnselect	panel	Emitted when a panel is unselected.

Methods

Name	Parameters	Return	Description
select	index	void	Select a specified panel.
unselect	index	void	Unselect a specified panel.
getPanel	index	AccordionPanel	Get a specified panel.
getPanelIndex	panel	number	Get the specified panel's index.
getSelectedIndex	none	number	Get the first selected panel's index.
getSelectedPanel	none	AccordionPanel	Get the first selected panel.
getSelectedPanels	none	AccordionPanel[]	Get all the selected panels.

二、如何使用 Props 属性 

我们用 border 属性为例，默认 border 属性是 true，表示有边框，我们可以通过这个属性设置为false 去掉边框。在 <Accordion> 标签中增加：:border="false"即可。

<Accordion style="height:250px" :border="false">

 再比如期望初始的时候就打开第二个Title，也就是Title2，根据文档，可以设置selectedIndex属性为1(第一个的索引为0)。:selectedIndex="1"

<Accordion style="height:250px" :selectedIndex="1">

注意：上述代码去掉了 :border="false" 所以边框又出现了！

三、如何使用 Events（事件）

官方文档有一个 panelSelect，有一个参数是panel，就是当前包含的面板。该事件表示用户选择了某个面板就会触发，参数就是当前选中的面板。

<Accordion 
        style="height:250px"  
        :selectedIndex="1"
        @panelSelect="do_panelSelect"
        >

事件处理函数，就是显示出来title

function do_panelSelect(panel: any){
       console.log(panel.title)   //打印出当前选择的panel的标题
    }

 四、如何使用Methods（方法）

关于使用方法，稍微有点麻烦，需要用到标签引用，然后才可以使用方法。假如我们需要使用select方法，这个方法有一个参数index，就是表示通过程序选择第几个panel，不用通过鼠标点击。例如我们select(2)，就表示选择第三个panel。要实现程序调用，请按照如下步骤：

1. 通过 ref 给Vue3中的标签添加引用

 <Accordion ref="myAccordion" 
        style="height:250px"  
        :selectedIndex="1"
        @panelSelect="do_panelSelect"
        >

注意上面代码中的 ref="myAccordion"

2. 在script setup lang="ts"中定义变量引用

import {ref } from 'vue';
const myAccordion = ref();     

 注意变量名称必须和标签中的定义一致，本例是: myAccordion，需要使用ref()

 3. 增加一个按键，用来点击实现程序切换panel

<ButtonGroup selectionMode="single">
   <LinkButton iconCls="icon-add" :toggle="true" :selected="true" @click="ClickSelect">选择select(2)</LinkButton>
</ButtonGroup>

点击时间函数：

function ClickSelect(){
   myAccordion.value.select(2)
}

注意 myAccordion.value.select(2) 函数调用

五、完整的演示程序代码

<template>
    <Accordion ref="myAccordion" 
        style="height:250px"  
        :selectedIndex="1"
        @panelSelect="do_panelSelect"
        >
        <AccordionPanel :title="'Title1'">
            <p>Content1</p>
        </AccordionPanel>
        <AccordionPanel :title="'Title2'">
            <p>Content2</p>
        </AccordionPanel>
        <AccordionPanel :title="'Title3'">
            <p>Content3</p>
        </AccordionPanel>
    </Accordion>
    
    <ButtonGroup selectionMode="single">
        <LinkButton iconCls="icon-add" :toggle="true" :selected="true" @click="ClickSelect">选择select(2)</LinkButton>
    </ButtonGroup>
</template>
<script setup lang="ts">
    import {ref } from 'vue';
    const myAccordion = ref();                

    function do_panelSelect(panel: any){
       console.log(panel.title)   //打印出当前选择的panel的标题
    }

    function ClickSelect(){
        myAccordion.value.select(2)
    }
    
</script>