blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs(Tabbar): use composition api

Browse Source
This commit is contained in:
chenjiahan 2020-12-13 14:15:36 +08:00
parent af49575484
commit f9b6fda65c
4 changed files with 121 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/tabbar/README.md
View File

@ -25,11 +25,12 @@ app.use(TabbarItem);
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
return { const active = ref(0);
active: 0, return { active };
};
}, },
}; };
``` ```
@ -46,11 +47,12 @@ export default {
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
return { const active = ref('home');
active: 'home', return { active };
};
}, },
}; };
``` ```
@ -84,14 +86,18 @@ Use `icon` slot to custom icon.
``` ```
```js ```js
import { ref } from 'vue';
export default { 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 { return {
active: 0, icon,
icon: { active,
active: 'https://img.yzcdn.cn/vant/user-active.png',
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
},
}; };
}, },
}; };
@ -112,21 +118,28 @@ export default {
```html ```html
<van-tabbar v-model="active" @change="onChange"> <van-tabbar v-model="active" @change="onChange">
<van-tabbar-item icon="home-o">Tab1</van-tabbar-item> <van-tabbar-item icon="home-o">Tab 1</van-tabbar-item>
<van-tabbar-item icon="search">Tab2</van-tabbar-item> <van-tabbar-item icon="search">Tab 2</van-tabbar-item>
<van-tabbar-item icon="friends-o">Tab3</van-tabbar-item> <van-tabbar-item icon="friends-o">Tab 3</van-tabbar-item>
<van-tabbar-item icon="setting-o">Tab4</van-tabbar-item> <van-tabbar-item icon="setting-o">Tab 4</van-tabbar-item>
</van-tabbar> </van-tabbar>
``` ```
```js ```js
import { Notify } from 'vant'; import { ref } from 'vue';
import { Toast } from 'vant';
export default { export default {
methods: { setup() {
onChange(index) { const active = ref(0);
Notify({ type: 'primary', message: index }); const onChange = (index) => {
}, Toast(`Tab ${index}`);
};
return {
icon,
onChange,
};
}, },
}; };
``` ```
@ -137,8 +150,8 @@ export default {
<router-view /> <router-view />
<van-tabbar route> <van-tabbar route>
<van-tabbar-item replace to="/home" icon="home-o"> 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-item replace to="/search" icon="search">Tab</van-tabbar-item>
</van-tabbar> </van-tabbar>
``` ```

63
src/tabbar/README.zh-CN.md
View File

@ -27,11 +27,12 @@ app.use(TabbarItem);
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
return { const active = ref(0);
active: 0, return { active };
};
}, },
}; };
``` ```
@ -50,11 +51,12 @@ export default {
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
return { const active = ref('home');
active: 'home', return { active };
};
}, },
}; };
``` ```
@ -90,14 +92,18 @@ export default {
``` ```
```js ```js
import { ref } from 'vue';
export default { 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 { return {
active: 0, icon,
icon: { active,
active: 'https://img.yzcdn.cn/vant/user-active.png',
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
},
}; };
}, },
}; };
@ -118,21 +124,28 @@ export default {
```html ```html
<van-tabbar v-model="active" @change="onChange"> <van-tabbar v-model="active" @change="onChange">
<van-tabbar-item icon="home-o">标签1</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="search">标签 2</van-tabbar-item>
<van-tabbar-item icon="friends-o">标签3</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="setting-o">标签 4</van-tabbar-item>
</van-tabbar> </van-tabbar>
``` ```
```js ```js
import { Notify } from 'vant'; import { ref } from 'vue';
import { Toast } from 'vant';
export default { export default {
methods: { setup() {
onChange(index) { const active = ref(0);
Notify({ type: 'primary', message: index }); const onChange = (index) => {
}, Toast(`标签 ${index}`);
};
return {
icon,
onChange,
};
}, },
}; };
``` ```
@ -145,8 +158,8 @@ export default {
<router-view /> <router-view />
<van-tabbar route> <van-tabbar route>
<van-tabbar-item replace to="/home" icon="home-o"> 标签 </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-item replace to="/search" icon="search">标签</van-tabbar-item>
</van-tabbar> </van-tabbar>
``` ```

76
src/tabbar/demo/index.vue
View File

@ -62,58 +62,64 @@
<demo-block :title="t('switchEvent')"> <demo-block :title="t('switchEvent')">
<van-tabbar v-model="active5" @change="onChange"> <van-tabbar v-model="active5" @change="onChange">
<van-tabbar-item icon="home-o">{{ t('tab') + 1 }}</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="search">{{ `${t('tab')} 2` }}</van-tabbar-item>
<van-tabbar-item icon="friends-o">{{ t('tab') + 3 }}</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="setting-o">{{ `${t('tab')} 4` }}</van-tabbar-item>
</van-tabbar> </van-tabbar>
</demo-block> </demo-block>
</template> </template>
<script> <script lang="ts">
export default { import { reactive, toRefs } from 'vue';
i18n: { import { useTranslate } from '@demo/use-translate';
'zh-CN': { import Toast from '../../toast';
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 ',
},
},
data() { const i18n = {
return { '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, active: 0,
active2: 0, active2: 0,
active3: 0, active3: 0,
active4: 0, active4: 0,
active5: 0, active5: 0,
activeName: 'home', activeName: 'home',
});
const onChange = (index: number) => {
Toast(`${t('tab')} ${index + 1}`);
};
return {
...toRefs(state),
t,
icon: { icon: {
active: 'https://img.yzcdn.cn/vant/user-active.png', active: 'https://img.yzcdn.cn/vant/user-active.png',
inactive: 'https://img.yzcdn.cn/vant/user-inactive.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> </script>

8
src/tabbar/test/__snapshots__/demo.spec.js.snap
View File

@ -220,7 +220,7 @@ exports[`should render demo and match snapshot 1`] = `
</i> </i>
</div> </div>
<div class="van-tabbar-item__text"> <div class="van-tabbar-item__text">
Tab1 Tab 1
</div> </div>
</div> </div>
<div class="van-tabbar-item"> <div class="van-tabbar-item">
@ -229,7 +229,7 @@ exports[`should render demo and match snapshot 1`] = `
</i> </i>
</div> </div>
<div class="van-tabbar-item__text"> <div class="van-tabbar-item__text">
Tab2 Tab 2
</div> </div>
</div> </div>
<div class="van-tabbar-item"> <div class="van-tabbar-item">
@ -238,7 +238,7 @@ exports[`should render demo and match snapshot 1`] = `
</i> </i>
</div> </div>
<div class="van-tabbar-item__text"> <div class="van-tabbar-item__text">
Tab3 Tab 3
</div> </div>
</div> </div>
<div class="van-tabbar-item"> <div class="van-tabbar-item">
@ -247,7 +247,7 @@ exports[`should render demo and match snapshot 1`] = `
</i> </i>
</div> </div>
<div class="van-tabbar-item__text"> <div class="van-tabbar-item__text">
Tab4 Tab 4
</div> </div>
</div> </div>
</div> </div>