feat(docs): NavMenu code for composition (#2248)

Co-authored-by: 无星 <32910694@qq.com>
This commit is contained in:
Xing.Wu
2021-06-19 02:23:50 +08:00
committed by GitHub
parent 7c8ddf5167
commit 334fe977cb
5 changed files with 340 additions and 0 deletions

View File

@@ -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>
-->
```
:::

View File

@@ -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>
-->
```
:::

View File

@@ -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>
-->
```
:::

View File

@@ -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>
-->
```
:::

View File

@@ -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>
-->
```
:::