|
@@ -1,13 +1,13 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="demo">
|
|
<div class="demo">
|
|
|
- <nut-fixednav
|
|
|
|
|
|
|
+ <nut-fixed-nav
|
|
|
active-text="基础用法"
|
|
active-text="基础用法"
|
|
|
:position="{ top: '70px' }"
|
|
:position="{ top: '70px' }"
|
|
|
v-model:visible="visible"
|
|
v-model:visible="visible"
|
|
|
:nav-list="navList"
|
|
:nav-list="navList"
|
|
|
@selected="selected"
|
|
@selected="selected"
|
|
|
/>
|
|
/>
|
|
|
- <nut-fixednav
|
|
|
|
|
|
|
+ <nut-fixed-nav
|
|
|
type="left"
|
|
type="left"
|
|
|
:position="{ top: '140px' }"
|
|
:position="{ top: '140px' }"
|
|
|
v-model:visible="visible1"
|
|
v-model:visible="visible1"
|
|
@@ -16,7 +16,7 @@
|
|
|
:nav-list="navList"
|
|
:nav-list="navList"
|
|
|
@selected="selected"
|
|
@selected="selected"
|
|
|
/>
|
|
/>
|
|
|
- <nut-fixednav
|
|
|
|
|
|
|
+ <nut-fixed-nav
|
|
|
:position="{ top: '210px' }"
|
|
:position="{ top: '210px' }"
|
|
|
:overlay="false"
|
|
:overlay="false"
|
|
|
v-model:visible="visible2"
|
|
v-model:visible="visible2"
|
|
@@ -24,7 +24,7 @@
|
|
|
@selected="selected"
|
|
@selected="selected"
|
|
|
/>
|
|
/>
|
|
|
|
|
|
|
|
- <nut-fixednav :position="{ top: '280px' }" type="left" v-model:visible="myActive" @selected="selected">
|
|
|
|
|
|
|
+ <nut-fixed-nav :position="{ top: '280px' }" type="left" v-model:visible="myActive" @selected="selected">
|
|
|
<template v-slot:list>
|
|
<template v-slot:list>
|
|
|
<ul class="nut-fixednav__list">
|
|
<ul class="nut-fixednav__list">
|
|
|
<li class="nut-fixednav__list-item">1</li>
|
|
<li class="nut-fixednav__list-item">1</li>
|
|
@@ -35,17 +35,19 @@
|
|
|
</ul>
|
|
</ul>
|
|
|
</template>
|
|
</template>
|
|
|
<template v-slot:btn>
|
|
<template v-slot:btn>
|
|
|
- <nut-icon name="retweet" color="#fff"> </nut-icon>
|
|
|
|
|
|
|
+ <Retweet color="#fff" />
|
|
|
<span class="text">{{ myActive ? '自定义开' : '自定义关' }}</span>
|
|
<span class="text">{{ myActive ? '自定义开' : '自定义关' }}</span>
|
|
|
</template>
|
|
</template>
|
|
|
- </nut-fixednav>
|
|
|
|
|
|
|
+ </nut-fixed-nav>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
<script lang="ts">
|
|
|
import { onMounted, reactive, ref } from 'vue';
|
|
import { onMounted, reactive, ref } from 'vue';
|
|
|
|
|
+import { Retweet } from '@nutui/icons-vue';
|
|
|
export default {
|
|
export default {
|
|
|
props: {},
|
|
props: {},
|
|
|
|
|
+ components: { Retweet },
|
|
|
setup() {
|
|
setup() {
|
|
|
const visible = ref(false);
|
|
const visible = ref(false);
|
|
|
const visible1 = ref(false);
|
|
const visible1 = ref(false);
|