【 phân chia vue2 cùng vue3 hạ element UI NavMenu hướng dẫn thực đơn lắp ráp, phân biệt kỹ càng tỉ mỉ giới thiệu thuộc tính, sự kiện, phương pháp như thế nào sử dụng, đều phát triển lệ 】

Ở Element UI ( nhằm vào Vue 2 ) cùng Element Plus ( nhằm vào Vue 3 ) trung,NavMenuHướng dẫn thực đơn lắp ráp thông thường được xưng làel-menu.Tuy rằng hai cái phiên bản ở API cùng thực hiện thượng khả năng có một ít rất nhỏ khác biệt, nhưng cơ bản khái niệm cùng cách dùng là tương tự. Phía dưới ta đem phân biệt giới thiệu ở Vue 2 Element UI cùng Vue 3 Element Plus trung như thế nào sử dụngel-menuLắp ráp.

Vue 2 + Element UI

Ở Vue 2 Element UI trung,el-menuLắp ráp dùng cho sáng tạo hướng dẫn thực đơn.

Thuộc tính ( Props )

• mode:Thực đơn hình thức, nhưhorizontal( trình độ ) hoặcvertical( vuông góc ).
• default-active:Cam chịu kích hoạt thực đơn hạng hướng dẫn tra cứu.
• default-openeds:Cam chịu triển khai thực đơn hạng hướng dẫn tra cứu số tổ ( chỉ đươngmodeVìverticalKhi hữu hiệu ).
• unique-opened:Hay không chỉ bảo trì một cái tử thực đơn triển khai ( chỉ đươngmodeVìverticalKhi hữu hiệu ).
• router:Hay không bắt đầu dùng lộ từ hình thức.
• background-color:Thực đơn bối cảnh sắc.
• text-color:Thực đơn văn tự nhan sắc.
• active-text-color:Trước mặt kích hoạt thực đơn văn tự nhan sắc.
• …( còn có mặt khác thuộc tính, cụ thể thỉnh tham khảo Element UI phía chính phủ hồ sơ )

Sự kiện ( Events )

• select:Đương thực đơn hạng bị điểm đánh khi kích phát.
• open:Chỗ trống thực đơn triển khai khi kích phát.
• close:Chỗ trống thực đơn đóng cửa khi kích phát.
• …( còn có mặt khác sự kiện, cụ thể thỉnh tham khảo Element UI phía chính phủ hồ sơ )

Thí dụ mẫu

<template>
<el-menu
:default-active= "activeIndex"
class= "el-menu-vertical-demo"
@select= "handleSelect"
mode= "vertical"
background-color= "#545c64"
text-color= "#fff"
active-text-color= "#ffd04b"
>
<el-menu-item index= "1" > xử lý trung tâm </el-menu-item>
<el-submenu index= "2" >
<template slot= "title" > công tác của ta đài </template>
<el-menu-item index= "2-1" > lựa chọn 1</el-menu-item>
<el-menu-item index= "2-2" > lựa chọn 2</el-menu-item>
</el-submenu>
<!-- mặt khác thực đơn hạng -->
</el-menu>
</template>

<script>
export default {
data() {
return {
activeIndex: '1'
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
this.activeIndex = key;
}
}
};
</script>

Vue 3 + Element Plus

Ở Vue 3 Element Plus trung,el-menuLắp ráp cách dùng cùng Vue 2 Element UI cùng loại, nhưng khả năng sẽ có một ít API biến động cùng tân tăng công năng.

Thuộc tính ( Props ) cùng sự kiện ( Events )

Element Plusel-menuLắp ráp đại bộ phận thuộc tính cùng sự kiện cùng Element UI bảo trì nhất trí, nhưng khả năng sẽ có một ít rất nhỏ khác biệt hoặc tân tăng thuộc tính / sự kiện.

Thí dụ mẫu ( giả thiết cùng Element UI cùng loại )

<template>
<el-menu
:default-active= "activeIndex"
@select= "handleSelect"
mode= "vertical"
background-color= "#545c64"
text-color= "#fff"
active-text-color= "#ffd04b"
>
<el-menu-item index= "1" > xử lý trung tâm </el-menu-item>
<el-submenu index= "2" >
<template #title>
Công tác của ta đài
</template>
<el-menu-item index= "2-1" > lựa chọn 1</el-menu-item>
<el-menu-item index= "2-2" > lựa chọn 2</el-menu-item>
</el-submenu>
<!-- mặt khác thực đơn hạng -->
</el-menu>
</template>

<script setup>
import { ref } from 'vue';

const activeIndex = ref('1');

function handleSelect(key, keyPath) {
console.log(key, keyPath);
activeIndex.value = key;
}
</script>

Chú ý:Bởi vì Element Plus còn đang không ngừng phát triển trung, cụ thể API cùng sử dụng phương pháp khả năng sẽ có điều bất đồng