uni-list-item.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478
  1. <template>
  2. <!-- #ifdef APP-NVUE -->
  3. <cell>
  4. <!-- #endif -->
  5. <view :class="{ 'uni-list-item--disabled': disabled }"
  6. :hover-class="(!clickable && !link) || disabled || showSwitch ? '' : 'uni-list-item--hover'"
  7. class="uni-list-item" @click="onClick">
  8. <view v-if="!isFirstChild" :class="{ 'uni-list--border': border }" class="border--left"></view>
  9. <view :class="{ 'container--right': showArrow || link, 'flex--direction': direction === 'column' }"
  10. class="uni-list-item__container">
  11. <slot name="header">
  12. <view class="uni-list-item__header">
  13. <view v-if="thumb" class="uni-list-item__icon">
  14. <image :class="['uni-list--' + thumbSize]" :src="thumb" class="uni-list-item__icon-img"/>
  15. </view>
  16. <view v-else-if="showExtraIcon" class="uni-list-item__icon">
  17. <uni-icons :color="extraIcon.color" :size="extraIcon.size" :type="extraIcon.type"/>
  18. </view>
  19. </view>
  20. </slot>
  21. <slot name="body">
  22. <view :class="{ 'uni-list-item__content--center': thumb || showExtraIcon || showBadge || showSwitch }"
  23. class="uni-list-item__content">
  24. <text v-if="title" :class="[ellipsis !== 0 && ellipsis <= 2 ? 'uni-ellipsis-' + ellipsis : '']"
  25. class="uni-list-item__content-title">{{ title }}
  26. </text>
  27. <text v-if="note" class="uni-list-item__content-note">{{ note }}</text>
  28. </view>
  29. </slot>
  30. <slot name="footer">
  31. <view v-if="rightText || showBadge || showSwitch" :class="{ 'flex--justify': direction === 'column' }"
  32. class="uni-list-item__extra">
  33. <text v-if="rightText" class="uni-list-item__extra-text">{{ rightText }}</text>
  34. <uni-badge v-if="showBadge" :custom-style="badgeStyle" :text="badgeText" :type="badgeType"/>
  35. <switch v-if="showSwitch" :checked="switchChecked" :disabled="disabled"
  36. @change="onSwitchChange"/>
  37. </view>
  38. </slot>
  39. </view>
  40. <uni-icons v-if="showArrow || link" :size="16" class="uni-icon-wrapper" color="#bbb" type="arrowright"/>
  41. </view>
  42. <!-- #ifdef APP-NVUE -->
  43. </cell>
  44. <!-- #endif -->
  45. </template>
  46. <script>
  47. /**
  48. * ListItem 列表子组件
  49. * @description 列表子组件
  50. * @tutorial https://ext.dcloud.net.cn/plugin?id=24
  51. * @property {String} title 标题
  52. * @property {String} note 描述
  53. * @property {String} thumb 左侧缩略图,若thumb有值,则不会显示扩展图标
  54. * @property {String} thumbSize = [lg|base|sm] 略缩图大小
  55. * @value lg 大图
  56. * @value base 一般
  57. * @value sm 小图
  58. * @property {String} badgeText 数字角标内容
  59. * @property {String} badgeType 数字角标类型,参考[uni-icons](https://ext.dcloud.net.cn/plugin?id=21)
  60. * @property {Object} badgeStyle 数字角标样式
  61. * @property {String} rightText 右侧文字内容
  62. * @property {Boolean} disabled = [true|false] 是否禁用
  63. * @property {Boolean} clickable = [true|false] 是否开启点击反馈
  64. * @property {String} link = [navigateTo|redirectTo|reLaunch|switchTab] 是否展示右侧箭头并开启点击反馈
  65. * @value navigateTo 同 uni.navigateTo()
  66. * @value redirectTo 同 uni.redirectTo()
  67. * @value reLaunch 同 uni.reLaunch()
  68. * @value switchTab 同 uni.switchTab()
  69. * @property {String | PageURIString} to 跳转目标页面
  70. * @property {Boolean} showBadge = [true|false] 是否显示数字角标
  71. * @property {Boolean} showSwitch = [true|false] 是否显示Switch
  72. * @property {Boolean} switchChecked = [true|false] Switch是否被选中
  73. * @property {Boolean} showExtraIcon = [true|false] 左侧是否显示扩展图标
  74. * @property {Object} extraIcon 扩展图标参数,格式为 {color: '#4cd964',size: '22',type: 'spinner'}
  75. * @property {String} direction = [row|column] 排版方向
  76. * @value row 水平排列
  77. * @value column 垂直排列
  78. * @event {Function} click 点击 uniListItem 触发事件
  79. * @event {Function} switchChange 点击切换 Switch 时触发
  80. */
  81. export default {
  82. name: 'UniListItem',
  83. emits: ['click', 'switchChange'],
  84. props: {
  85. direction: {
  86. type: String,
  87. default: 'row'
  88. },
  89. title: {
  90. type: String,
  91. default: ''
  92. },
  93. note: {
  94. type: String,
  95. default: ''
  96. },
  97. ellipsis: {
  98. type: [Number, String],
  99. default: 0
  100. },
  101. disabled: {
  102. type: [Boolean, String],
  103. default: false
  104. },
  105. clickable: {
  106. type: Boolean,
  107. default: false
  108. },
  109. showArrow: {
  110. type: [Boolean, String],
  111. default: false
  112. },
  113. link: {
  114. type: [Boolean, String],
  115. default: false
  116. },
  117. to: {
  118. type: String,
  119. default: ''
  120. },
  121. showBadge: {
  122. type: [Boolean, String],
  123. default: false
  124. },
  125. showSwitch: {
  126. type: [Boolean, String],
  127. default: false
  128. },
  129. switchChecked: {
  130. type: [Boolean, String],
  131. default: false
  132. },
  133. badgeText: {
  134. type: String,
  135. default: ''
  136. },
  137. badgeType: {
  138. type: String,
  139. default: 'success'
  140. },
  141. badgeStyle: {
  142. type: Object,
  143. default() {
  144. return {}
  145. }
  146. },
  147. rightText: {
  148. type: String,
  149. default: ''
  150. },
  151. thumb: {
  152. type: String,
  153. default: ''
  154. },
  155. thumbSize: {
  156. type: String,
  157. default: 'base'
  158. },
  159. showExtraIcon: {
  160. type: [Boolean, String],
  161. default: false
  162. },
  163. extraIcon: {
  164. type: Object,
  165. default() {
  166. return {
  167. type: '',
  168. color: '#000000',
  169. size: 20
  170. };
  171. }
  172. },
  173. border: {
  174. type: Boolean,
  175. default: true
  176. }
  177. },
  178. // inject: ['list'],
  179. data() {
  180. return {
  181. isFirstChild: false
  182. };
  183. },
  184. mounted() {
  185. this.list = this.getForm()
  186. // 判断是否存在 uni-list 组件
  187. if (this.list) {
  188. if (!this.list.firstChildAppend) {
  189. this.list.firstChildAppend = true;
  190. this.isFirstChild = true;
  191. }
  192. }
  193. },
  194. methods: {
  195. /**
  196. * 获取父元素实例
  197. */
  198. getForm(name = 'uniList') {
  199. let parent = this.$parent;
  200. let parentName = parent.$options.name;
  201. while (parentName !== name) {
  202. parent = parent.$parent;
  203. if (!parent) return false
  204. parentName = parent.$options.name;
  205. }
  206. return parent;
  207. },
  208. onClick() {
  209. if (this.to !== '') {
  210. this.openPage();
  211. return;
  212. }
  213. if (this.clickable || this.link) {
  214. this.$emit('click', {
  215. data: {}
  216. });
  217. }
  218. },
  219. onSwitchChange(e) {
  220. this.$emit('switchChange', e.detail);
  221. },
  222. openPage() {
  223. if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) {
  224. this.pageApi(this.link);
  225. } else {
  226. this.pageApi('navigateTo');
  227. }
  228. },
  229. pageApi(api) {
  230. let callback = {
  231. url: this.to,
  232. success: res => {
  233. this.$emit('click', {
  234. data: res
  235. });
  236. },
  237. fail: err => {
  238. this.$emit('click', {
  239. data: err
  240. });
  241. }
  242. }
  243. switch (api) {
  244. case 'navigateTo':
  245. uni.navigateTo(callback)
  246. break
  247. case 'redirectTo':
  248. uni.redirectTo(callback)
  249. break
  250. case 'reLaunch':
  251. uni.reLaunch(callback)
  252. break
  253. case 'switchTab':
  254. uni.switchTab(callback)
  255. break
  256. default:
  257. uni.navigateTo(callback)
  258. }
  259. }
  260. }
  261. };
  262. </script>
  263. <style lang="scss">
  264. $uni-font-size-sm: 12px;
  265. $uni-font-size-base: 14px;
  266. $uni-font-size-lg: 16px;
  267. $uni-spacing-col-lg: 12px;
  268. $uni-spacing-row-lg: 15px;
  269. $uni-img-size-sm: 20px;
  270. $uni-img-size-base: 26px;
  271. $uni-img-size-lg: 40px;
  272. $uni-border-color: #e5e5e5;
  273. $uni-bg-color-hover: #f1f1f1;
  274. $uni-text-color-grey: #999;
  275. $list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg;
  276. .uni-list-item {
  277. /* #ifndef APP-NVUE */
  278. display: flex;
  279. /* #endif */
  280. font-size: $uni-font-size-lg;
  281. position: relative;
  282. justify-content: space-between;
  283. align-items: center;
  284. background-color: #fff;
  285. flex-direction: row;
  286. /* #ifdef H5 */
  287. cursor: pointer;
  288. /* #endif */
  289. }
  290. .uni-list-item--disabled {
  291. opacity: 0.3;
  292. }
  293. .uni-list-item--hover {
  294. background-color: $uni-bg-color-hover;
  295. }
  296. .uni-list-item__container {
  297. position: relative;
  298. /* #ifndef APP-NVUE */
  299. display: flex;
  300. /* #endif */
  301. flex-direction: row;
  302. padding: $list-item-pd;
  303. padding-left: $uni-spacing-row-lg;
  304. flex: 1;
  305. overflow: hidden;
  306. // align-items: center;
  307. }
  308. .container--right {
  309. padding-right: 0;
  310. }
  311. // .border--left {
  312. // margin-left: $uni-spacing-row-lg;
  313. // }
  314. .uni-list--border {
  315. position: absolute;
  316. top: 0;
  317. right: 0;
  318. left: 0;
  319. /* #ifdef APP-NVUE */
  320. border-top-color: $uni-border-color;
  321. border-top-style: solid;
  322. border-top-width: 0.5px;
  323. /* #endif */
  324. }
  325. /* #ifndef APP-NVUE */
  326. .uni-list--border:after {
  327. position: absolute;
  328. top: 0;
  329. right: 0;
  330. left: 0;
  331. height: 1px;
  332. content: '';
  333. -webkit-transform: scaleY(0.5);
  334. transform: scaleY(0.5);
  335. background-color: $uni-border-color;
  336. }
  337. /* #endif */
  338. .uni-list-item__content {
  339. /* #ifndef APP-NVUE */
  340. display: flex;
  341. /* #endif */
  342. padding-right: 8px;
  343. flex: 1;
  344. color: #3b4144;
  345. // overflow: hidden;
  346. flex-direction: column;
  347. justify-content: space-between;
  348. overflow: hidden;
  349. }
  350. .uni-list-item__content--center {
  351. justify-content: center;
  352. }
  353. .uni-list-item__content-title {
  354. font-size: $uni-font-size-base;
  355. color: #3b4144;
  356. overflow: hidden;
  357. }
  358. .uni-list-item__content-note {
  359. margin-top: 6 rpx;
  360. color: $uni-text-color-grey;
  361. font-size: $uni-font-size-sm;
  362. overflow: hidden;
  363. }
  364. .uni-list-item__extra {
  365. // width: 25%;
  366. /* #ifndef APP-NVUE */
  367. display: flex;
  368. /* #endif */
  369. flex-direction: row;
  370. justify-content: flex-end;
  371. align-items: center;
  372. }
  373. .uni-list-item__header {
  374. /* #ifndef APP-NVUE */
  375. display: flex;
  376. /* #endif */
  377. flex-direction: row;
  378. align-items: center;
  379. }
  380. .uni-list-item__icon {
  381. margin-right: 18 rpx;
  382. flex-direction: row;
  383. justify-content: center;
  384. align-items: center;
  385. }
  386. .uni-list-item__icon-img {
  387. /* #ifndef APP-NVUE */
  388. display: block;
  389. /* #endif */
  390. height: $uni-img-size-base;
  391. width: $uni-img-size-base;
  392. margin-right: 10px;
  393. }
  394. .uni-icon-wrapper {
  395. /* #ifndef APP-NVUE */
  396. display: flex;
  397. /* #endif */
  398. align-items: center;
  399. padding: 0 10px;
  400. }
  401. .flex--direction {
  402. flex-direction: column;
  403. /* #ifndef APP-NVUE */
  404. align-items: initial;
  405. /* #endif */
  406. }
  407. .flex--justify {
  408. /* #ifndef APP-NVUE */
  409. justify-content: initial;
  410. /* #endif */
  411. }
  412. .uni-list--lg {
  413. height: $uni-img-size-lg;
  414. width: $uni-img-size-lg;
  415. }
  416. .uni-list--base {
  417. height: $uni-img-size-base;
  418. width: $uni-img-size-base;
  419. }
  420. .uni-list--sm {
  421. height: $uni-img-size-sm;
  422. width: $uni-img-size-sm;
  423. }
  424. .uni-list-item__extra-text {
  425. color: $uni-text-color-grey;
  426. font-size: $uni-font-size-sm;
  427. }
  428. .uni-ellipsis-1 {
  429. /* #ifndef APP-NVUE */
  430. overflow: hidden;
  431. white-space: nowrap;
  432. text-overflow: ellipsis;
  433. /* #endif */
  434. /* #ifdef APP-NVUE */
  435. lines: 1;
  436. text-overflow: ellipsis;
  437. /* #endif */
  438. }
  439. .uni-ellipsis-2 {
  440. /* #ifndef APP-NVUE */
  441. overflow: hidden;
  442. text-overflow: ellipsis;
  443. display: -webkit-box;
  444. -webkit-line-clamp: 2;
  445. -webkit-box-orient: vertical;
  446. /* #endif */
  447. /* #ifdef APP-NVUE */
  448. lines: 2;
  449. text-overflow: ellipsis;
  450. /* #endif */
  451. }
  452. </style>