index.vue 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <template>
  2. <demo-section>
  3. <demo-block :title="$t('basicUsage')">
  4. <van-badge-group
  5. :active-key="activeKey"
  6. @change="onChange"
  7. >
  8. <van-badge :title="$t('title')" />
  9. <van-badge
  10. :title="$t('title')"
  11. info="8"
  12. />
  13. <van-badge
  14. :title="$t('title')"
  15. info="99"
  16. />
  17. <van-badge
  18. :title="$t('title')"
  19. info="99+"
  20. />
  21. </van-badge-group>
  22. </demo-block>
  23. </demo-section>
  24. </template>
  25. <script>
  26. export default {
  27. i18n: {
  28. 'zh-CN': {
  29. title: '标签名称'
  30. }
  31. },
  32. data() {
  33. return {
  34. activeKey: 0
  35. };
  36. },
  37. methods: {
  38. onChange(key) {
  39. this.activeKey = key;
  40. }
  41. }
  42. };
  43. </script>
  44. <style lang="less">
  45. @import '../../style/var';
  46. .demo-badge {
  47. .van-badge-group {
  48. width: auto;
  49. margin: 0 15px;
  50. padding: 20px 0;
  51. background-color: @white;
  52. &::after {
  53. display: none;
  54. }
  55. }
  56. .van-badge {
  57. width: 85px;
  58. margin: 0 auto;
  59. }
  60. }
  61. </style>