u-cell.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. <template>
  2. <view class="u-cell" :class="[customClass]" :style="[$u.addStyle(customStyle)]"
  3. :hover-class="(!disabled && (clickable || isLink)) ? 'u-cell--clickable' : ''" :hover-stay-time="250"
  4. @tap="clickHandler">
  5. <view class="u-cell__body" :class="[ center && 'u-cell--center', size === 'large' && 'u-cell__body--large']">
  6. <view class="u-cell__body__content">
  7. <view class="u-cell__left-icon-wrap" v-if="$slots.icon || icon">
  8. <slot name="icon" v-if="$slots.icon">
  9. </slot>
  10. <u-icon v-else :name="icon" :custom-style="iconStyle" :size="size === 'large' ? 22 : 18"></u-icon>
  11. </view>
  12. <view class="u-cell__title">
  13. <slot name="title">
  14. <text v-if="title" class="u-cell__title-text" :style="[titleTextStyle]"
  15. :class="[disabled && 'u-cell--disabled', size === 'large' && 'u-cell__title-text--large']">{{ title }}
  16. </text>
  17. </slot>
  18. <slot name="label">
  19. <text class="u-cell__label" v-if="label"
  20. :class="[disabled && 'u-cell--disabled', size === 'large' && 'u-cell__label--large']">{{ label }}
  21. </text>
  22. </slot>
  23. </view>
  24. </view>
  25. <slot name="value">
  26. <text class="u-cell__value"
  27. :class="[disabled && 'u-cell--disabled', size === 'large' && 'u-cell__value--large']"
  28. v-if="!$u.test.empty(value)">{{ value }}
  29. </text>
  30. </slot>
  31. <view class="u-cell__right-icon-wrap" v-if="$slots['right-icon'] || isLink"
  32. :class="[`u-cell__right-icon-wrap--${arrowDirection}`]">
  33. <slot name="right-icon" v-if="$slots['right-icon']">
  34. </slot>
  35. <u-icon v-else :name="rightIcon" :custom-style="rightIconStyle" :color="disabled ? '#c8c9cc' : 'info'"
  36. :size="size === 'large' ? 18 : 16"></u-icon>
  37. </view>
  38. </view>
  39. <u-line v-if="border"></u-line>
  40. </view>
  41. </template>
  42. <script>
  43. import props from './props.js';
  44. /**
  45. * cell 单元格
  46. * @description cell单元格一般用于一组列表的情况,比如个人中心页,设置页等。
  47. * @tutorial https://uviewui.com/components/cell.html
  48. * @property {String | Number} title 标题
  49. * @property {String | Number} label 标题下方的描述信息
  50. * @property {String | Number} value 右侧的内容
  51. * @property {String} icon 左侧图标名称,或者图片链接(本地文件建议使用绝对地址)
  52. * @property {String | Number} titleWidth 标题的宽度,单位任意,数值默认为px单位
  53. * @property {Boolean} disabled 是否禁用cell
  54. * @property {Boolean} border 是否显示下边框 (默认 true )
  55. * @property {Boolean} center 内容是否垂直居中(主要是针对右侧的value部分) (默认 false )
  56. * @property {String} url 点击后跳转的URL地址
  57. * @property {String} linkType 链接跳转的方式,内部使用的是uView封装的route方法,可能会进行拦截操作 (默认 'navigateTo' )
  58. * @property {Boolean} clickable 是否开启点击反馈(表现为点击时加上灰色背景) (默认 false )
  59. * @property {Boolean} isLink 是否展示右侧箭头并开启点击反馈 (默认 false )
  60. * @property {Boolean} required 是否显示表单状态下的必填星号(此组件可能会内嵌入input组件) (默认 false )
  61. * @property {String} rightIcon 右侧的图标箭头 (默认 'arrow-right')
  62. * @property {String} arrowDirection 右侧箭头的方向,可选值为:left,up,down
  63. * @property {Object | String} rightIconStyle 右侧箭头图标的样式
  64. * @property {Object | String} titleStyle 标题的样式
  65. * @property {Object | String} iconStyle 左侧图标样式
  66. * @property {String} size 单位元的大小,可选值为 large,normal,mini
  67. * @property {Boolean} stop 点击cell是否阻止事件传播 (默认 true )
  68. * @property {Object} customStyle 定义需要用到的外部样式
  69. *
  70. * @event {Function} click 点击cell列表时触发
  71. * @example 该组件需要搭配cell-group组件使用,见官方文档示例
  72. */
  73. export default {
  74. name: 'u-cell',
  75. data() {
  76. return {}
  77. },
  78. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  79. computed: {
  80. titleTextStyle() {
  81. return uni.$u.addStyle(this.titleStyle)
  82. }
  83. },
  84. methods: {
  85. // 点击cell
  86. clickHandler(e) {
  87. if (this.disabled) return
  88. this.$emit('click', {
  89. name: this.name
  90. })
  91. // 如果配置了url(此props参数通过mixin引入)参数,跳转页面
  92. this.openPage()
  93. // 是否阻止事件传播
  94. this.stop && this.preventEvent(e)
  95. },
  96. }
  97. }
  98. </script>
  99. <style lang="scss" scoped>
  100. @import "../../libs/css/components.scss";
  101. $u-cell-padding: 10px 15px !default;
  102. $u-cell-font-size: 15px !default;
  103. $u-cell-line-height: 24px !default;
  104. $u-cell-color: $u-main-color !default;
  105. $u-cell-icon-size: 16px !default;
  106. $u-cell-title-font-size: 15px !default;
  107. $u-cell-title-line-height: 22px !default;
  108. $u-cell-title-color: $u-main-color !default;
  109. $u-cell-label-font-size: 12px !default;
  110. $u-cell-label-color: $u-tips-color !default;
  111. $u-cell-label-line-height: 18px !default;
  112. $u-cell-value-font-size: 14px !default;
  113. $u-cell-value-color: $u-content-color !default;
  114. $u-cell-clickable-color: $u-bg-color !default;
  115. $u-cell-disabled-color: #c8c9cc !default;
  116. $u-cell-padding-top-large: 13px !default;
  117. $u-cell-padding-bottom-large: 13px !default;
  118. $u-cell-value-font-size-large: 15px !default;
  119. $u-cell-label-font-size-large: 14px !default;
  120. $u-cell-title-font-size-large: 16px !default;
  121. $u-cell-left-icon-wrap-margin-right: 4px !default;
  122. $u-cell-right-icon-wrap-margin-left: 4px !default;
  123. $u-cell-title-flex: 1 !default;
  124. $u-cell-label-margin-top: 5px !default;
  125. .u-cell {
  126. &__body {
  127. @include flex();
  128. /* #ifndef APP-NVUE */
  129. box-sizing: border-box;
  130. /* #endif */
  131. padding: $u-cell-padding;
  132. font-size: $u-cell-font-size;
  133. color: $u-cell-color;
  134. // line-height: $u-cell-line-height;
  135. align-items: center;
  136. &__content {
  137. @include flex(row);
  138. align-items: center;
  139. flex: 1;
  140. }
  141. &--large {
  142. padding-top: $u-cell-padding-top-large;
  143. padding-bottom: $u-cell-padding-bottom-large;
  144. }
  145. }
  146. &__left-icon-wrap,
  147. &__right-icon-wrap {
  148. @include flex();
  149. align-items: center;
  150. // height: $u-cell-line-height;
  151. font-size: $u-cell-icon-size;
  152. }
  153. &__left-icon-wrap {
  154. margin-right: $u-cell-left-icon-wrap-margin-right;
  155. }
  156. &__right-icon-wrap {
  157. margin-left: $u-cell-right-icon-wrap-margin-left;
  158. transition: transform 0.3s;
  159. &--up {
  160. transform: rotate(-90deg);
  161. }
  162. &--down {
  163. transform: rotate(90deg);
  164. }
  165. }
  166. &__title {
  167. flex: $u-cell-title-flex;
  168. &-text {
  169. font-size: $u-cell-title-font-size;
  170. line-height: $u-cell-title-line-height;
  171. color: $u-cell-title-color;
  172. &--large {
  173. font-size: $u-cell-title-font-size-large;
  174. }
  175. }
  176. }
  177. &__label {
  178. margin-top: $u-cell-label-margin-top;
  179. font-size: $u-cell-label-font-size;
  180. color: $u-cell-label-color;
  181. line-height: $u-cell-label-line-height;
  182. &--large {
  183. font-size: $u-cell-label-font-size-large;
  184. }
  185. }
  186. &__value {
  187. text-align: right;
  188. font-size: $u-cell-value-font-size;
  189. line-height: $u-cell-line-height;
  190. color: $u-cell-value-color;
  191. &--large {
  192. font-size: $u-cell-value-font-size-large;
  193. }
  194. }
  195. &--clickable {
  196. background-color: $u-cell-clickable-color;
  197. }
  198. &--disabled {
  199. color: $u-cell-disabled-color;
  200. /* #ifndef APP-NVUE */
  201. cursor: not-allowed;
  202. /* #endif */
  203. }
  204. &--center {
  205. align-items: center;
  206. }
  207. }
  208. </style>