mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
feat(docs): NavMenu code for composition (#2248)
Co-authored-by: 无星 <32910694@qq.com>
This commit is contained in:
@@ -66,6 +66,28 @@ Top bar NavMenu can be used in a variety of scenarios.
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import { defineComponent, ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const activeIndex = ref('1');
|
||||
const activeIndex2 = ref('1');
|
||||
const handleSelect = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
return {
|
||||
activeIndex,
|
||||
activeIndex2,
|
||||
handleSelect,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</setup>
|
||||
-->
|
||||
```
|
||||
:::
|
||||
|
||||
@@ -169,6 +191,28 @@ Vertical NavMenu with sub-menus.
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const handleOpen = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
const handleClose = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
return {
|
||||
handleOpen,
|
||||
handleClose,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</setup>
|
||||
-->
|
||||
```
|
||||
:::
|
||||
|
||||
@@ -239,6 +283,30 @@ Vertical NavMenu could be collapsed.
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import { defineComponent, ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const isCollapse = ref(true);
|
||||
const handleOpen = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
const handleClose = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
return {
|
||||
isCollapse,
|
||||
handleOpen,
|
||||
handleClose,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</setup>
|
||||
-->
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@@ -67,6 +67,28 @@ Top bar NavMenu puede ser usado en distinto escenarios.
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import { defineComponent, ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const activeIndex = ref('1');
|
||||
const activeIndex2 = ref('1');
|
||||
const handleSelect = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
return {
|
||||
activeIndex,
|
||||
activeIndex2,
|
||||
handleSelect,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</setup>
|
||||
-->
|
||||
```
|
||||
:::
|
||||
|
||||
@@ -171,6 +193,28 @@ NavMenu vertical con sub-menús.
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const handleOpen = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
const handleClose = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
return {
|
||||
handleOpen,
|
||||
handleClose,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</setup>
|
||||
-->
|
||||
```
|
||||
:::
|
||||
|
||||
@@ -241,6 +285,30 @@ NavMenu vertical puede ser colapsado.
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import { defineComponent, ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const isCollapse = ref(true);
|
||||
const handleOpen = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
const handleClose = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
return {
|
||||
isCollapse,
|
||||
handleOpen,
|
||||
handleClose,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</setup>
|
||||
-->
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@@ -66,6 +66,28 @@ La barre du haut peut être utilisée pour différents scénarios.
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import { defineComponent, ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const activeIndex = ref('1');
|
||||
const activeIndex2 = ref('1');
|
||||
const handleSelect = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
return {
|
||||
activeIndex,
|
||||
activeIndex2,
|
||||
handleSelect,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</setup>
|
||||
-->
|
||||
```
|
||||
:::
|
||||
|
||||
@@ -169,6 +191,28 @@ Menu vertical avec sous-menus.
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const handleOpen = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
const handleClose = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
return {
|
||||
handleOpen,
|
||||
handleClose,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</setup>
|
||||
-->
|
||||
```
|
||||
:::
|
||||
|
||||
@@ -239,6 +283,30 @@ Le menu vertical peut être réduit.
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import { defineComponent, ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const isCollapse = ref(true);
|
||||
const handleOpen = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
const handleClose = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
return {
|
||||
isCollapse,
|
||||
handleOpen,
|
||||
handleClose,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</setup>
|
||||
-->
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@@ -66,6 +66,28 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import { defineComponent, ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const activeIndex = ref('1');
|
||||
const activeIndex2 = ref('1');
|
||||
const handleSelect = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
return {
|
||||
activeIndex,
|
||||
activeIndex2,
|
||||
handleSelect,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</setup>
|
||||
-->
|
||||
```
|
||||
:::
|
||||
|
||||
@@ -169,6 +191,28 @@ Vサブメニューのある縦型ナビメニュー。
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const handleOpen = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
const handleClose = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
return {
|
||||
handleOpen,
|
||||
handleClose,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</setup>
|
||||
-->
|
||||
```
|
||||
:::
|
||||
|
||||
@@ -239,6 +283,30 @@ Vサブメニューのある縦型ナビメニュー。
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import { defineComponent, ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const isCollapse = ref(true);
|
||||
const handleOpen = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
const handleClose = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
return {
|
||||
isCollapse,
|
||||
handleOpen,
|
||||
handleClose,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</setup>
|
||||
-->
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@@ -67,6 +67,28 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import { defineComponent, ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const activeIndex = ref('1');
|
||||
const activeIndex2 = ref('1');
|
||||
const handleSelect = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
return {
|
||||
activeIndex,
|
||||
activeIndex2,
|
||||
handleSelect,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</setup>
|
||||
-->
|
||||
```
|
||||
:::
|
||||
|
||||
@@ -187,6 +209,28 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const handleOpen = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
const handleClose = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
return {
|
||||
handleOpen,
|
||||
handleClose,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</setup>
|
||||
-->
|
||||
```
|
||||
:::
|
||||
|
||||
@@ -255,6 +299,30 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import { defineComponent, ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const isCollapse = ref(true);
|
||||
const handleOpen = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
const handleClose = (key, keyPath) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
return {
|
||||
isCollapse,
|
||||
handleOpen,
|
||||
handleClose,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</setup>
|
||||
-->
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
Reference in New Issue
Block a user