mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(Tabbar): use composition api
This commit is contained in:
chenjiahan
parent
af49575484
commit
f9b6fda65c
@ -25,11 +25,12 @@ app.use(TabbarItem);
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
};
|
||||
setup() {
|
||||
const active = ref(0);
|
||||
return { active };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -46,11 +47,12 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 'home',
|
||||
};
|
||||
setup() {
|
||||
const active = ref('home');
|
||||
return { active };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -84,14 +86,18 @@ Use `icon` slot to custom icon.
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
setup() {
|
||||
const active = ref(0);
|
||||
const icon = {
|
||||
active: 'https://img.yzcdn.cn/vant/user-active.png',
|
||||
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
|
||||
};
|
||||
return {
|
||||
active: 0,
|
||||
icon: {
|
||||
active: 'https://img.yzcdn.cn/vant/user-active.png',
|
||||
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
|
||||
},
|
||||
icon,
|
||||
active,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -112,21 +118,28 @@ export default {
|
||||
|
||||
```html
|
||||
<van-tabbar v-model="active" @change="onChange">
|
||||
<van-tabbar-item icon="home-o">Tab1</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">Tab2</van-tabbar-item>
|
||||
<van-tabbar-item icon="friends-o">Tab3</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">Tab4</van-tabbar-item>
|
||||
<van-tabbar-item icon="home-o">Tab 1</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">Tab 2</van-tabbar-item>
|
||||
<van-tabbar-item icon="friends-o">Tab 3</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">Tab 4</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
```js
|
||||
import { Notify } from 'vant';
|
||||
import { ref } from 'vue';
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
onChange(index) {
|
||||
Notify({ type: 'primary', message: index });
|
||||
},
|
||||
setup() {
|
||||
const active = ref(0);
|
||||
const onChange = (index) => {
|
||||
Toast(`Tab ${index}`);
|
||||
};
|
||||
|
||||
return {
|
||||
icon,
|
||||
onChange,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -137,8 +150,8 @@ export default {
|
||||
<router-view />
|
||||
|
||||
<van-tabbar route>
|
||||
<van-tabbar-item replace to="/home" icon="home-o"> Tab </van-tabbar-item>
|
||||
<van-tabbar-item replace to="/search" icon="search"> Tab </van-tabbar-item>
|
||||
<van-tabbar-item replace to="/home" icon="home-o">Tab</van-tabbar-item>
|
||||
<van-tabbar-item replace to="/search" icon="search">Tab</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
|
||||
@ -27,11 +27,12 @@ app.use(TabbarItem);
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
};
|
||||
setup() {
|
||||
const active = ref(0);
|
||||
return { active };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -50,11 +51,12 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 'home',
|
||||
};
|
||||
setup() {
|
||||
const active = ref('home');
|
||||
return { active };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -90,14 +92,18 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
setup() {
|
||||
const active = ref(0);
|
||||
const icon = {
|
||||
active: 'https://img.yzcdn.cn/vant/user-active.png',
|
||||
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
|
||||
};
|
||||
return {
|
||||
active: 0,
|
||||
icon: {
|
||||
active: 'https://img.yzcdn.cn/vant/user-active.png',
|
||||
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
|
||||
},
|
||||
icon,
|
||||
active,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -118,21 +124,28 @@ export default {
|
||||
|
||||
```html
|
||||
<van-tabbar v-model="active" @change="onChange">
|
||||
<van-tabbar-item icon="home-o">标签1</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">标签2</van-tabbar-item>
|
||||
<van-tabbar-item icon="friends-o">标签3</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">标签4</van-tabbar-item>
|
||||
<van-tabbar-item icon="home-o">标签 1</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">标签 2</van-tabbar-item>
|
||||
<van-tabbar-item icon="friends-o">标签 3</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">标签 4</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
```js
|
||||
import { Notify } from 'vant';
|
||||
import { ref } from 'vue';
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
onChange(index) {
|
||||
Notify({ type: 'primary', message: index });
|
||||
},
|
||||
setup() {
|
||||
const active = ref(0);
|
||||
const onChange = (index) => {
|
||||
Toast(`标签 ${index}`);
|
||||
};
|
||||
|
||||
return {
|
||||
icon,
|
||||
onChange,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -145,8 +158,8 @@ export default {
|
||||
<router-view />
|
||||
|
||||
<van-tabbar route>
|
||||
<van-tabbar-item replace to="/home" icon="home-o"> 标签 </van-tabbar-item>
|
||||
<van-tabbar-item replace to="/search" icon="search"> 标签 </van-tabbar-item>
|
||||
<van-tabbar-item replace to="/home" icon="home-o">标签</van-tabbar-item>
|
||||
<van-tabbar-item replace to="/search" icon="search">标签</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
|
||||
@ -62,58 +62,64 @@
|
||||
|
||||
<demo-block :title="t('switchEvent')">
|
||||
<van-tabbar v-model="active5" @change="onChange">
|
||||
<van-tabbar-item icon="home-o">{{ t('tab') + 1 }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">{{ t('tab') + 2 }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="friends-o">{{ t('tab') + 3 }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">{{ t('tab') + 4 }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="home-o">{{ `${t('tab')} 1` }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">{{ `${t('tab')} 2` }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="friends-o">{{ `${t('tab')} 3` }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">{{ `${t('tab')} 4` }}</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
badge: '徽标提示',
|
||||
customIcon: '自定义图标',
|
||||
customColor: '自定义颜色',
|
||||
matchByName: '通过名称匹配',
|
||||
switchEvent: '监听切换事件',
|
||||
selectTip: '你切换到了',
|
||||
},
|
||||
'en-US': {
|
||||
badge: 'Show Badge',
|
||||
customIcon: 'Custom Icon',
|
||||
customColor: 'Custom Color',
|
||||
matchByName: 'Match by name',
|
||||
switchEvent: 'Change Event',
|
||||
selectTip: 'You select ',
|
||||
},
|
||||
},
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import Toast from '../../toast';
|
||||
|
||||
data() {
|
||||
return {
|
||||
const i18n = {
|
||||
'zh-CN': {
|
||||
badge: '徽标提示',
|
||||
customIcon: '自定义图标',
|
||||
customColor: '自定义颜色',
|
||||
matchByName: '通过名称匹配',
|
||||
switchEvent: '监听切换事件',
|
||||
selectTip: '你切换到了',
|
||||
},
|
||||
'en-US': {
|
||||
badge: 'Show Badge',
|
||||
customIcon: 'Custom Icon',
|
||||
customColor: 'Custom Color',
|
||||
matchByName: 'Match by name',
|
||||
switchEvent: 'Change Event',
|
||||
selectTip: 'You select ',
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
active: 0,
|
||||
active2: 0,
|
||||
active3: 0,
|
||||
active4: 0,
|
||||
active5: 0,
|
||||
activeName: 'home',
|
||||
});
|
||||
|
||||
const onChange = (index: number) => {
|
||||
Toast(`${t('tab')} ${index + 1}`);
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
icon: {
|
||||
active: 'https://img.yzcdn.cn/vant/user-active.png',
|
||||
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
|
||||
},
|
||||
onChange,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(index) {
|
||||
this.$notify({
|
||||
type: 'primary',
|
||||
message: `${this.t('selectTip')} ${this.t('tab')}${index + 1}`,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -220,7 +220,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</i>
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
Tab1
|
||||
Tab 1
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
@ -229,7 +229,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</i>
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
Tab2
|
||||
Tab 2
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
@ -238,7 +238,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</i>
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
Tab3
|
||||
Tab 3
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
@ -247,7 +247,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</i>
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
Tab4
|
||||
Tab 4
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user