mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(Sidebar): use composition api
This commit is contained in:
chenjiahan
parent
192697de0d
commit
d1f637afc7
@ -137,12 +137,12 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div>
|
||||
<transition-stub style="margin-right: 5px;">
|
||||
<span class="van-tag van-tag--plain van-tag--danger">
|
||||
标签
|
||||
Tag
|
||||
</span>
|
||||
</transition-stub>
|
||||
<transition-stub>
|
||||
<span class="van-tag van-tag--plain van-tag--danger">
|
||||
标签
|
||||
Tag
|
||||
</span>
|
||||
</transition-stub>
|
||||
</div>
|
||||
|
||||
@ -16,7 +16,7 @@ app.use(SidebarItem);
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<van-sidebar v-model="activeKey">
|
||||
<van-sidebar v-model="active">
|
||||
<van-sidebar-item title="Title" />
|
||||
<van-sidebar-item title="Title" />
|
||||
<van-sidebar-item title="Title" />
|
||||
@ -24,11 +24,12 @@ app.use(SidebarItem);
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeKey: 0,
|
||||
};
|
||||
setup() {
|
||||
const active = ref(0);
|
||||
return { active };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -36,17 +37,17 @@ export default {
|
||||
### Show Badge
|
||||
|
||||
```html
|
||||
<van-sidebar v-model="activeKey">
|
||||
<van-sidebar v-model="active">
|
||||
<van-sidebar-item title="Title" dot />
|
||||
<van-sidebar-item title="Title" badge="5" />
|
||||
<van-sidebar-item title="Title" badge="99+" />
|
||||
<van-sidebar-item title="Title" badge="20" />
|
||||
</van-sidebar>
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
```html
|
||||
<van-sidebar v-model="activeKey">
|
||||
<van-sidebar v-model="active">
|
||||
<van-sidebar-item title="Title" />
|
||||
<van-sidebar-item title="Title" disabled />
|
||||
<van-sidebar-item title="Title" />
|
||||
@ -56,26 +57,28 @@ export default {
|
||||
### Change Event
|
||||
|
||||
```html
|
||||
<van-sidebar v-model="activeKey" @change="onChange">
|
||||
<van-sidebar-item title="Title1" />
|
||||
<van-sidebar-item title="Title2" />
|
||||
<van-sidebar-item title="Title3" />
|
||||
<van-sidebar v-model="active" @change="onChange">
|
||||
<van-sidebar-item title="Title 1" />
|
||||
<van-sidebar-item title="Title 2" />
|
||||
<van-sidebar-item title="Title 3" />
|
||||
</van-sidebar>
|
||||
```
|
||||
|
||||
```js
|
||||
import { Notify } from 'vant';
|
||||
import { ref } from 'vue';
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeKey: 0,
|
||||
setup() {
|
||||
const active = ref(0);
|
||||
const onChange = (index) => {
|
||||
Toast(`Title ${index + 1}`);
|
||||
};
|
||||
|
||||
return {
|
||||
active,
|
||||
onChange,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onChange(index) {
|
||||
Notify({ type: 'primary', message: index });
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -18,7 +18,7 @@ app.use(SidebarItem);
|
||||
通过 `v-model` 绑定当前选中项的索引。
|
||||
|
||||
```html
|
||||
<van-sidebar v-model="activeKey">
|
||||
<van-sidebar v-model="active">
|
||||
<van-sidebar-item title="标签名称" />
|
||||
<van-sidebar-item title="标签名称" />
|
||||
<van-sidebar-item title="标签名称" />
|
||||
@ -26,11 +26,12 @@ app.use(SidebarItem);
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeKey: 0,
|
||||
};
|
||||
setup() {
|
||||
const active = ref(0);
|
||||
return { active };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -40,10 +41,10 @@ export default {
|
||||
设置 `dot` 属性后，会在右上角展示一个小红点；设置 `badge` 属性后，会在右上角展示相应的徽标。
|
||||
|
||||
```html
|
||||
<van-sidebar v-model="activeKey">
|
||||
<van-sidebar v-model="active">
|
||||
<van-sidebar-item title="标签名称" dot />
|
||||
<van-sidebar-item title="标签名称" badge="5" />
|
||||
<van-sidebar-item title="标签名称" badge="99+" />
|
||||
<van-sidebar-item title="标签名称" badge="20" />
|
||||
</van-sidebar>
|
||||
```
|
||||
|
||||
@ -52,7 +53,7 @@ export default {
|
||||
通过 `disabled` 属性禁用选项。
|
||||
|
||||
```html
|
||||
<van-sidebar v-model="activeKey">
|
||||
<van-sidebar v-model="active">
|
||||
<van-sidebar-item title="标签名称" />
|
||||
<van-sidebar-item title="标签名称" disabled />
|
||||
<van-sidebar-item title="标签名称" />
|
||||
@ -64,26 +65,28 @@ export default {
|
||||
设置 `change` 方法来监听切换导航项时的事件。
|
||||
|
||||
```html
|
||||
<van-sidebar v-model="activeKey" @change="onChange">
|
||||
<van-sidebar-item title="标签名1" />
|
||||
<van-sidebar-item title="标签名2" />
|
||||
<van-sidebar-item title="标签名3" />
|
||||
<van-sidebar v-model="active" @change="onChange">
|
||||
<van-sidebar-item title="标签名 1" />
|
||||
<van-sidebar-item title="标签名 2" />
|
||||
<van-sidebar-item title="标签名 3" />
|
||||
</van-sidebar>
|
||||
```
|
||||
|
||||
```js
|
||||
import { Notify } from 'vant';
|
||||
import { ref } from 'vue';
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeKey: 0,
|
||||
setup() {
|
||||
const active = ref(0);
|
||||
const onChange = (index) => {
|
||||
Toast(`标签名 ${index + 1}`);
|
||||
};
|
||||
|
||||
return {
|
||||
active,
|
||||
onChange,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onChange(index) {
|
||||
Notify({ type: 'primary', message: index });
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<van-grid :column-num="2" :border="false">
|
||||
<van-grid-item>
|
||||
<h3 class="demo-sidebar-title">{{ t('basicUsage') }}</h3>
|
||||
<van-sidebar v-model="activeKey1">
|
||||
<van-sidebar v-model="active1">
|
||||
<van-sidebar-item :title="t('title')" />
|
||||
<van-sidebar-item :title="t('title')" />
|
||||
<van-sidebar-item :title="t('title')" />
|
||||
@ -11,16 +11,16 @@
|
||||
|
||||
<van-grid-item>
|
||||
<h3 class="demo-sidebar-title">{{ t('showBadge') }}</h3>
|
||||
<van-sidebar v-model="activeKey2">
|
||||
<van-sidebar v-model="active2">
|
||||
<van-sidebar-item :title="t('title')" dot />
|
||||
<van-sidebar-item :title="t('title')" badge="5" />
|
||||
<van-sidebar-item :title="t('title')" badge="99+" />
|
||||
<van-sidebar-item :title="t('title')" badge="20" />
|
||||
</van-sidebar>
|
||||
</van-grid-item>
|
||||
|
||||
<van-grid-item>
|
||||
<h3 class="demo-sidebar-title">{{ t('disabled') }}</h3>
|
||||
<van-sidebar v-model="activeKey3">
|
||||
<van-sidebar v-model="active3">
|
||||
<van-sidebar-item :title="t('title')" />
|
||||
<van-sidebar-item :title="t('title')" disabled />
|
||||
<van-sidebar-item :title="t('title')" />
|
||||
@ -29,49 +29,53 @@
|
||||
|
||||
<van-grid-item>
|
||||
<h3 class="demo-sidebar-title">{{ t('changeEvent') }}</h3>
|
||||
<van-sidebar v-model="activeKey4" @change="onChange">
|
||||
<van-sidebar-item :title="t('title') + 1" />
|
||||
<van-sidebar-item :title="t('title') + 2" />
|
||||
<van-sidebar-item :title="t('title') + 3" />
|
||||
<van-sidebar v-model="active4" @change="onChange">
|
||||
<van-sidebar-item :title="`${t('title')} 1`" />
|
||||
<van-sidebar-item :title="`${t('title')} 2`" />
|
||||
<van-sidebar-item :title="`${t('title')} 3`" />
|
||||
</van-sidebar>
|
||||
</van-grid-item>
|
||||
</van-grid>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import Toast from '../../toast';
|
||||
|
||||
const i18n = {
|
||||
'zh-CN': {
|
||||
title: '标签名',
|
||||
disabled: '禁用选项',
|
||||
showBadge: '徽标提示',
|
||||
changeEvent: '监听切换事件',
|
||||
},
|
||||
'en-US': {
|
||||
disabled: 'Disabled',
|
||||
showBadge: 'Show Badge',
|
||||
changeEvent: 'Change Event',
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title: '标签名',
|
||||
showBadge: '徽标提示',
|
||||
disabled: '禁用选项',
|
||||
changeEvent: '监听切换事件',
|
||||
selectTip: '你切换到了',
|
||||
},
|
||||
'en-US': {
|
||||
showBadge: 'Show Badge',
|
||||
disabled: 'Disabled',
|
||||
changeEvent: 'Change Event',
|
||||
selectTip: 'You select ',
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
active1: 0,
|
||||
active2: 0,
|
||||
active3: 0,
|
||||
active4: 0,
|
||||
});
|
||||
|
||||
data() {
|
||||
return {
|
||||
activeKey1: 0,
|
||||
activeKey2: 0,
|
||||
activeKey3: 0,
|
||||
activeKey4: 0,
|
||||
const onChange = (index: number) => {
|
||||
Toast(`${t('title')} ${index + 1}`);
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(index) {
|
||||
this.$notify({
|
||||
type: 'primary',
|
||||
message: `${this.t('selectTip')} ${this.t('title')}${index + 1}`,
|
||||
});
|
||||
},
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
onChange,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -55,7 +55,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-badge__wrapper van-sidebar-item__text">
|
||||
Title
|
||||
<div class="van-badge van-badge--fixed">
|
||||
99+
|
||||
20
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@ -98,17 +98,17 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-sidebar">
|
||||
<a class="van-sidebar-item van-sidebar-item--select">
|
||||
<div class="van-badge__wrapper van-sidebar-item__text">
|
||||
Title1
|
||||
Title 1
|
||||
</div>
|
||||
</a>
|
||||
<a class="van-sidebar-item">
|
||||
<div class="van-badge__wrapper van-sidebar-item__text">
|
||||
Title2
|
||||
Title 2
|
||||
</div>
|
||||
</a>
|
||||
<a class="van-sidebar-item">
|
||||
<div class="van-badge__wrapper van-sidebar-item__text">
|
||||
Title3
|
||||
Title 3
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user