You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

316 lines
7.3 KiB

3 years ago
  1. <template>
  2. <view
  3. @tap="click"
  4. class="u-cell"
  5. :class="{ 'u-border-bottom': borderBottom, 'u-border-top': borderTop, 'u-col-center': center, 'u-cell--required': required }"
  6. hover-stay-time="150"
  7. :hover-class="hoverClass"
  8. :style="{
  9. backgroundColor: bgColor
  10. }"
  11. >
  12. <u-icon :size="iconSize" :name="icon" v-if="icon" :custom-style="iconStyle" class="u-cell__left-icon-wrap"></u-icon>
  13. <view class="u-flex" v-else>
  14. <slot name="icon"></slot>
  15. </view>
  16. <view
  17. class="u-cell_title"
  18. :style="[
  19. {
  20. width: titleWidth ? titleWidth + 'rpx' : 'auto'
  21. },
  22. titleStyle
  23. ]"
  24. >
  25. <block v-if="title !== ''">{{ title }}</block>
  26. <slot name="title" v-else></slot>
  27. <view class="u-cell__label" v-if="label || $slots.label" :style="[labelStyle]">
  28. <block v-if="label !== ''">{{ label }}</block>
  29. <slot name="label" v-else></slot>
  30. </view>
  31. </view>
  32. <view class="u-cell__value" :style="[valueStyle]">
  33. <block class="u-cell__value" v-if="value !== ''">{{ value }}</block>
  34. <slot v-else></slot>
  35. </view>
  36. <view class="u-flex u-cell_right" v-if="$slots['right-icon']">
  37. <slot name="right-icon"></slot>
  38. </view>
  39. <u-icon v-if="arrow" name="arrow-right" :style="[arrowStyle]" class="u-icon-wrap u-cell__right-icon-wrap"></u-icon>
  40. </view>
  41. </template>
  42. <script>
  43. /**
  44. * cellItem 单元格Item
  45. * @description cell单元格一般用于一组列表的情况比如个人中心页设置页等搭配u-cell-group使用
  46. * @tutorial https://www.uviewui.com/components/cell.html
  47. * @property {String} title 左侧标题
  48. * @property {String} icon 左侧图标名只支持uView内置图标见Icon 图标
  49. * @property {Object} icon-style 左边图标的样式对象形式
  50. * @property {String} value 右侧内容
  51. * @property {String} label 标题下方的描述信息
  52. * @property {Boolean} border-bottom 是否显示cell的下边框默认true
  53. * @property {Boolean} border-top 是否显示cell的上边框默认false
  54. * @property {Boolean} center 是否使内容垂直居中默认false
  55. * @property {String} hover-class 是否开启点击反馈none为无效果默认true
  56. * // @property {Boolean} border-gap border-bottom为true时,Cell列表中间的条目的下边框是否与左边有一个间隔(默认true)
  57. * @property {Boolean} arrow 是否显示右侧箭头默认true
  58. * @property {Boolean} required 箭头方向可选值默认right
  59. * @property {Boolean} arrow-direction 是否显示左边表示必填的星号默认false
  60. * @property {Object} title-style 标题样式对象形式
  61. * @property {Object} value-style 右侧内容样式对象形式
  62. * @property {Object} label-style 标题下方描述信息的样式对象形式
  63. * @property {String} bg-color 背景颜色默认transparent
  64. * @property {String Number} index 用于在click事件回调中返回标识当前是第几个Item
  65. * @property {String Number} title-width 标题的宽度单位rpx
  66. * @example <u-cell-item icon="integral-fill" title="会员等级" value="新版本"></u-cell-item>
  67. */
  68. export default {
  69. name: 'u-cell-item',
  70. props: {
  71. // 左侧图标名称(只能uView内置图标),或者图标src
  72. icon: {
  73. type: String,
  74. default: ''
  75. },
  76. // 左侧标题
  77. title: {
  78. type: [String, Number],
  79. default: ''
  80. },
  81. // 右侧内容
  82. value: {
  83. type: [String, Number],
  84. default: ''
  85. },
  86. // 标题下方的描述信息
  87. label: {
  88. type: [String, Number],
  89. default: ''
  90. },
  91. // 是否显示下边框
  92. borderBottom: {
  93. type: Boolean,
  94. default: true
  95. },
  96. // 是否显示上边框
  97. borderTop: {
  98. type: Boolean,
  99. default: false
  100. },
  101. // 多个cell中,中间的cell显示下划线时,下划线是否给一个到左边的距离
  102. // 1.4.0版本废除此参数,默认边框由border-top和border-bottom提供,此参数会造成干扰
  103. // borderGap: {
  104. // type: Boolean,
  105. // default: true
  106. // },
  107. // 是否开启点击反馈,即点击时cell背景为灰色,none为无效果
  108. hoverClass: {
  109. type: String,
  110. default: 'u-cell-hover'
  111. },
  112. // 是否显示右侧箭头
  113. arrow: {
  114. type: Boolean,
  115. default: true
  116. },
  117. // 内容是否垂直居中
  118. center: {
  119. type: Boolean,
  120. default: false
  121. },
  122. // 是否显示左边表示必填的星号
  123. required: {
  124. type: Boolean,
  125. default: false
  126. },
  127. // 标题的宽度,单位rpx
  128. titleWidth: {
  129. type: [Number, String],
  130. default: ''
  131. },
  132. // 右侧箭头方向,可选值:right|up|down,默认为right
  133. arrowDirection: {
  134. type: String,
  135. default: 'right'
  136. },
  137. // 控制标题的样式
  138. titleStyle: {
  139. type: Object,
  140. default() {
  141. return {};
  142. }
  143. },
  144. // 右侧显示内容的样式
  145. valueStyle: {
  146. type: Object,
  147. default() {
  148. return {};
  149. }
  150. },
  151. // 描述信息的样式
  152. labelStyle: {
  153. type: Object,
  154. default() {
  155. return {};
  156. }
  157. },
  158. // 背景颜色
  159. bgColor: {
  160. type: String,
  161. default: 'transparent'
  162. },
  163. // 用于识别被点击的是第几个cell
  164. index: {
  165. type: [String, Number],
  166. default: ''
  167. },
  168. // 是否使用lable插槽
  169. useLabelSlot: {
  170. type: Boolean,
  171. default: false
  172. },
  173. // 左边图标的大小,单位rpx,只对传入icon字段时有效
  174. iconSize: {
  175. type: [Number, String],
  176. default: 34
  177. },
  178. // 左边图标的样式,对象形式
  179. iconStyle: {
  180. type: Object,
  181. default() {
  182. return {}
  183. }
  184. },
  185. },
  186. data() {
  187. return {
  188. };
  189. },
  190. computed: {
  191. arrowStyle() {
  192. let style = {};
  193. if (this.arrowDirection == 'up') style.transform = 'rotate(-90deg)';
  194. else if (this.arrowDirection == 'down') style.transform = 'rotate(90deg)';
  195. else style.transform = 'rotate(0deg)';
  196. return style;
  197. }
  198. },
  199. methods: {
  200. click() {
  201. this.$emit('click', this.index);
  202. }
  203. }
  204. };
  205. </script>
  206. <style lang="scss" scoped>
  207. @import "../../libs/css/style.components.scss";
  208. .u-cell {
  209. @include vue-flex;
  210. align-items: center;
  211. position: relative;
  212. /* #ifndef APP-NVUE */
  213. box-sizing: border-box;
  214. /* #endif */
  215. width: 100%;
  216. padding: 26rpx 32rpx;
  217. font-size: 28rpx;
  218. line-height: 54rpx;
  219. color: $u-content-color;
  220. background-color: #fff;
  221. text-align: left;
  222. }
  223. .u-cell_title {
  224. font-size: 28rpx;
  225. }
  226. .u-cell__left-icon-wrap {
  227. margin-right: 10rpx;
  228. font-size: 32rpx;
  229. }
  230. .u-cell__right-icon-wrap {
  231. margin-left: 10rpx;
  232. color: #969799;
  233. font-size: 28rpx;
  234. }
  235. .u-cell__left-icon-wrap,
  236. .u-cell__right-icon-wrap {
  237. @include vue-flex;
  238. align-items: center;
  239. height: 48rpx;
  240. }
  241. .u-cell-border:after {
  242. position: absolute;
  243. /* #ifndef APP-NVUE */
  244. box-sizing: border-box;
  245. content: ' ';
  246. pointer-events: none;
  247. border-bottom: 1px solid $u-border-color;
  248. /* #endif */
  249. right: 0;
  250. left: 0;
  251. top: 0;
  252. transform: scaleY(0.5);
  253. }
  254. .u-cell-border {
  255. position: relative;
  256. }
  257. .u-cell__label {
  258. margin-top: 6rpx;
  259. font-size: 26rpx;
  260. line-height: 36rpx;
  261. color: $u-tips-color;
  262. /* #ifndef APP-NVUE */
  263. word-wrap: break-word;
  264. /* #endif */
  265. }
  266. .u-cell__value {
  267. overflow: hidden;
  268. text-align: right;
  269. /* #ifndef APP-NVUE */
  270. vertical-align: middle;
  271. /* #endif */
  272. color: $u-tips-color;
  273. font-size: 26rpx;
  274. }
  275. .u-cell__title,
  276. .u-cell__value {
  277. flex: 1;
  278. }
  279. .u-cell--required {
  280. /* #ifndef APP-NVUE */
  281. overflow: visible;
  282. /* #endif */
  283. @include vue-flex;
  284. align-items: center;
  285. }
  286. .u-cell--required:before {
  287. position: absolute;
  288. /* #ifndef APP-NVUE */
  289. content: '*';
  290. /* #endif */
  291. left: 8px;
  292. margin-top: 4rpx;
  293. font-size: 14px;
  294. color: $u-type-error;
  295. }
  296. .u-cell_right {
  297. line-height: 1;
  298. }
  299. </style>