u-cell.vue 7.2 KB

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