index.vue 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <template>
  2. <view
  3. :class="utils.bem('sidebar-item', { selected, disabled }) + ' ' + (selected ? 'active-class' : '') + ' ' + (disabled ? 'disabled-class' : '') + ' custom-class'"
  4. hover-class="van-sidebar-item--hover"
  5. hover-stay-time="70"
  6. @tap="onClick"
  7. >
  8. <view class="van-sidebar-item__text">
  9. <van-info v-if="info !== null || dot" :dot="dot" :info="info" custom-style="right: 4px" />
  10. <view v-if="title">{{ title }}</view>
  11. <slot v-else name="title" />
  12. </view>
  13. </view>
  14. </template>
  15. <script module="utils" lang="wxs" src="@/miniprogram_npm/@vant/weapp/wxs/utils.wxs"></script>
  16. <script>
  17. 'use strict';
  18. Object.defineProperty(exports, '__esModule', {
  19. value: true
  20. });
  21. var component_1 = require('../common/component');
  22. component_1.VantComponent({
  23. classes: ['active-class', 'disabled-class'],
  24. relation: {
  25. type: 'ancestor',
  26. name: 'sidebar',
  27. current: 'sidebar-item'
  28. },
  29. props: {
  30. dot: Boolean,
  31. info: null,
  32. title: String,
  33. disabled: Boolean
  34. },
  35. methods: {
  36. onClick: function () {
  37. var that = this;
  38. var parent = this.parent;
  39. if (!parent || this.disabled) {
  40. return;
  41. }
  42. var index = parent.children.indexOf(this);
  43. parent.setActive(index).then(function () {
  44. that.$emit('click', index);
  45. parent.$emit('change', index);
  46. });
  47. },
  48. setActive: function (selected) {
  49. return this.setData({
  50. selected: selected
  51. });
  52. }
  53. }
  54. });
  55. </script>
  56. <style>
  57. @import './index.css';
  58. </style>