mix-list-cell.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <template>
  2. <view class="content">
  3. <view class="mix-list-cell" :class="border" @click="eventClick" hover-class="cell-hover" :hover-stay-time="50">
  4. <text
  5. v-if="icon"
  6. class="cell-icon yticon"
  7. :style="[{
  8. color: iconColor,
  9. }]"
  10. :class="icon"
  11. ></text>
  12. <text class="cell-tit clamp">{{title}}</text>
  13. <text v-if="tips" class="cell-tip">{{tips}}</text>
  14. <text class="cell-more yticon"
  15. :class="typeList[navigateType]"
  16. ></text>
  17. </view>
  18. </view>
  19. </template>
  20. <script>
  21. /**
  22. * 简单封装了下, 应用范围比较狭窄,可以在此基础上进行扩展使用
  23. * 比如加入image, iconSize可控等
  24. */
  25. export default {
  26. data() {
  27. return {
  28. typeList: {
  29. left: 'icon-zuo',
  30. right: 'icon-you',
  31. up: 'icon-shang',
  32. down: 'icon-xia'
  33. },
  34. }
  35. },
  36. props: {
  37. icon: {
  38. type: String,
  39. default: ''
  40. },
  41. title: {
  42. type: String,
  43. default: '标题'
  44. },
  45. tips: {
  46. type: String,
  47. default: ''
  48. },
  49. navigateType: {
  50. type: String,
  51. default: 'right'
  52. },
  53. border: {
  54. type: String,
  55. default: 'b-b'
  56. },
  57. hoverClass: {
  58. type: String,
  59. default: 'cell-hover'
  60. },
  61. iconColor: {
  62. type: String,
  63. default: '#333'
  64. }
  65. },
  66. methods: {
  67. eventClick(){
  68. this.$emit('eventClick');
  69. }
  70. },
  71. }
  72. </script>
  73. <style lang='scss'>
  74. .icon .mix-list-cell.b-b:after{
  75. left: 90upx;
  76. }
  77. .mix-list-cell{
  78. display:flex;
  79. align-items:baseline;
  80. padding: 20upx $page-row-spacing;
  81. line-height:60upx;
  82. position:relative;
  83. &.cell-hover{
  84. background:#fafafa;
  85. }
  86. &.b-b:after{
  87. left: 30upx;
  88. }
  89. .cell-icon{
  90. align-self:center;
  91. width:56upx;
  92. max-height:60upx;
  93. font-size:38upx;
  94. }
  95. .cell-more{
  96. align-self: center;
  97. font-size:30upx;
  98. color:$font-color-base;
  99. margin-left:$uni-spacing-row-sm;
  100. }
  101. .cell-tit{
  102. flex: 1;
  103. font-size: $font-base;
  104. color: $font-color-dark;
  105. margin-right:10upx;
  106. }
  107. .cell-tip{
  108. font-size: $font-sm+2upx;
  109. color: $font-color-light;
  110. }
  111. }
  112. </style>