index.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <template>
  2. <view
  3. :class="'custom-class ' + utils.bem('cell', [size, { center, required, borderless: !border, clickable: isLink || clickable }])"
  4. hover-class="van-cell--hover hover-class"
  5. hover-stay-time="70"
  6. :style="customStyle"
  7. @tap="onClick"
  8. >
  9. <van-icon v-if="icon" :name="icon" class="van-cell__left-icon-wrap" custom-class="van-cell__left-icon" />
  10. <slot v-else name="icon" />
  11. <view :style="titleWidth ? 'max-width:' + titleWidth + ';min-width:' + titleWidth : ''" class="van-cell__title title-class">
  12. <block v-if="title">{{ title }}</block>
  13. <slot v-else name="title" />
  14. <view v-if="label || useLabelSlot" class="van-cell__label label-class">
  15. <slot v-if="useLabelSlot" name="label" />
  16. <block v-else-if="label">{{ label }}</block>
  17. </view>
  18. </view>
  19. <view class="van-cell__value value-class">
  20. <block v-if="value || value === 0">{{ value }}</block>
  21. <slot v-else />
  22. </view>
  23. <van-icon
  24. v-if="isLink"
  25. :name="arrowDirection ? 'arrow' + '-' + arrowDirection : 'arrow'"
  26. class="van-cell__right-icon-wrap right-icon-class"
  27. custom-class="van-cell__right-icon"
  28. />
  29. <slot v-else name="right-icon" />
  30. <slot name="extra" />
  31. </view>
  32. </template>
  33. <script module="utils" lang="wxs" src="@/miniprogram_npm/@vant/weapp/wxs/utils.wxs"></script>
  34. <script>
  35. 'use strict';
  36. Object.defineProperty(exports, '__esModule', {
  37. value: true
  38. });
  39. var link_1 = require('../mixins/link');
  40. var component_1 = require('../common/component');
  41. component_1.VantComponent({
  42. classes: ['title-class', 'label-class', 'value-class', 'right-icon-class', 'hover-class'],
  43. mixins: [link_1.link],
  44. props: {
  45. title: null,
  46. value: null,
  47. icon: String,
  48. size: String,
  49. label: String,
  50. center: Boolean,
  51. isLink: Boolean,
  52. required: Boolean,
  53. clickable: Boolean,
  54. titleWidth: String,
  55. customStyle: String,
  56. arrowDirection: String,
  57. useLabelSlot: Boolean,
  58. border: {
  59. type: Boolean,
  60. value: true
  61. }
  62. },
  63. methods: {
  64. onClick: function (event) {
  65. this.$emit('click', event.detail);
  66. this.jumpLink();
  67. }
  68. }
  69. });
  70. </script>
  71. <style>
  72. @import './index.css';
  73. </style>