index.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <template>
  2. <uni-shadow-root class="weapp-lib-cell-index"><view :class="'custom-class '+(utils.bem('cell', [size, { center, required, borderless: !border, clickable: isLink || clickable }]))" hover-class="van-cell--hover hover-class" hover-stay-time="70" :style="customStyle" @click="onClick">
  3. <van-icon v-if="icon" :name="icon" class="van-cell__left-icon-wrap" custom-class="van-cell__left-icon"></van-icon>
  4. <slot v-else name="icon"></slot>
  5. <view :style="computed.titleStyle({ titleWidth, titleStyle })" class="van-cell__title title-class">
  6. <block v-if="title">{{ title }}</block>
  7. <slot v-else name="title"></slot>
  8. <view v-if="label || useLabelSlot" class="van-cell__label label-class">
  9. <slot v-if="useLabelSlot" name="label"></slot>
  10. <block v-else-if="label">{{ label }}</block>
  11. </view>
  12. </view>
  13. <view class="van-cell__value value-class">
  14. <block v-if="value || value === 0">{{ value }}</block>
  15. <slot v-else></slot>
  16. </view>
  17. <van-icon v-if="isLink" :name="arrowDirection ? 'arrow' + '-' + arrowDirection : 'arrow'" class="van-cell__right-icon-wrap right-icon-class" custom-class="van-cell__right-icon"></van-icon>
  18. <slot v-else name="right-icon"></slot>
  19. <slot name="extra"></slot>
  20. </view></uni-shadow-root>
  21. </template>
  22. <wxs src="../wxs/utils.wxs" module="utils"></wxs><wxs src="./index.wxs" module="computed"></wxs>
  23. <script>
  24. import VanIcon from '../icon/index.vue'
  25. global['__wxVueOptions'] = {components:{'van-icon': VanIcon}}
  26. global['__wxRoute'] = 'weapp/lib/cell/index'
  27. "use strict";
  28. Object.defineProperty(exports, "__esModule", { value: true });
  29. var link_1 = require("../mixins/link");
  30. var component_1 = require("../common/component");
  31. (0, component_1.VantComponent)({
  32. classes: [
  33. 'title-class',
  34. 'label-class',
  35. 'value-class',
  36. 'right-icon-class',
  37. 'hover-class',
  38. ],
  39. mixins: [link_1.link],
  40. props: {
  41. title: null,
  42. value: null,
  43. icon: String,
  44. size: String,
  45. label: String,
  46. center: Boolean,
  47. isLink: Boolean,
  48. required: Boolean,
  49. clickable: Boolean,
  50. titleWidth: String,
  51. customStyle: String,
  52. arrowDirection: String,
  53. useLabelSlot: Boolean,
  54. border: {
  55. type: Boolean,
  56. value: true,
  57. },
  58. titleStyle: String,
  59. },
  60. methods: {
  61. onClick: function (event) {
  62. this.$emit('click', event.detail);
  63. this.jumpLink();
  64. },
  65. },
  66. });
  67. export default global['__wxComponents']['weapp/lib/cell/index']
  68. </script>
  69. <style platform="mp-weixin">
  70. @import '../common/index.css';.van-cell{background-color:var(--cell-background-color,#fff);box-sizing:border-box;color:var(--cell-text-color,#323233);display:flex;font-size:var(--cell-font-size,14px);line-height:var(--cell-line-height,24px);padding:var(--cell-vertical-padding,10px) var(--cell-horizontal-padding,16px);position:relative;width:100%}.van-cell:after{border-bottom:1px solid #ebedf0;bottom:0;box-sizing:border-box;content:" ";left:16px;pointer-events:none;position:absolute;right:16px;transform:scaleY(.5);transform-origin:center}.van-cell--borderless:after{display:none}.van-cell-group{background-color:var(--cell-background-color,#fff)}.van-cell__label{color:var(--cell-label-color,#969799);font-size:var(--cell-label-font-size,12px);line-height:var(--cell-label-line-height,18px);margin-top:var(--cell-label-margin-top,3px)}.van-cell__value{color:var(--cell-value-color,#969799);overflow:hidden;text-align:right;vertical-align:middle}.van-cell__title,.van-cell__value{flex:1}.van-cell__title:empty,.van-cell__value:empty{display:none}.van-cell__left-icon-wrap,.van-cell__right-icon-wrap{align-items:center;display:flex;font-size:var(--cell-icon-size,16px);height:var(--cell-line-height,24px)}.van-cell__left-icon-wrap{margin-right:var(--padding-base,4px)}.van-cell__right-icon-wrap{color:var(--cell-right-icon-color,#969799);margin-left:var(--padding-base,4px)}.van-cell__left-icon{vertical-align:middle}.van-cell__left-icon,.van-cell__right-icon{line-height:var(--cell-line-height,24px)}.van-cell--clickable.van-cell--hover{background-color:var(--cell-active-color,#f2f3f5)}.van-cell--required{overflow:visible}.van-cell--required:before{color:var(--cell-required-color,#ee0a24);content:"*";font-size:var(--cell-font-size,14px);left:var(--padding-xs,8px);position:absolute}.van-cell--center{align-items:center}.van-cell--large{padding-bottom:var(--cell-large-vertical-padding,12px);padding-top:var(--cell-large-vertical-padding,12px)}.van-cell--large .van-cell__title{font-size:var(--cell-large-title-font-size,16px)}.van-cell--large .van-cell__value{font-size:var(--cell-large-value-font-size,16px)}.van-cell--large .van-cell__label{font-size:var(--cell-large-label-font-size,14px)}
  71. </style>