index.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. import baseComponent from '../helpers/baseComponent'
  2. import classNames from '../helpers/libs/classNames'
  3. import styleToCssString from '../helpers/libs/styleToCssString'
  4. baseComponent({
  5. properties: {
  6. prefixCls: {
  7. type: String,
  8. value: 'wux-card',
  9. },
  10. hoverClass: {
  11. type: String,
  12. value: 'none',
  13. },
  14. bordered: {
  15. type: Boolean,
  16. value: true,
  17. },
  18. full: {
  19. type: Boolean,
  20. value: false,
  21. },
  22. title: {
  23. type: String,
  24. value: '',
  25. },
  26. thumb: {
  27. type: String,
  28. value: '',
  29. },
  30. thumbStyle: {
  31. type: [String, Object],
  32. value: '',
  33. observer(newVal) {
  34. this.setData({
  35. extStyle: styleToCssString(newVal),
  36. })
  37. },
  38. },
  39. extra: {
  40. type: String,
  41. value: '',
  42. },
  43. actions: {
  44. type: Array,
  45. value: [],
  46. },
  47. },
  48. data: {
  49. extStyle: '',
  50. disabled: false,
  51. },
  52. computed: {
  53. classes: ['prefixCls, hoverClass, bordered, full, actions', function(prefixCls, hoverClass, bordered, full, _actions) {
  54. const wrap = classNames(prefixCls, {
  55. [`${prefixCls}--bordered`]: bordered,
  56. [`${prefixCls}--full`]: full,
  57. [`${prefixCls}--has-actions`]: _actions.length > 0,
  58. })
  59. const hd = `${prefixCls}__hd`
  60. const content = `${prefixCls}__content`
  61. const thumb = `${prefixCls}__thumb`
  62. const extra = `${prefixCls}__extra`
  63. const bd = `${prefixCls}__bd`
  64. const ft = `${prefixCls}__ft`
  65. const actions = `${prefixCls}__actions`
  66. const action = _actions.map((action) => {
  67. const wrap = classNames(`${prefixCls}__action`, {
  68. [`${prefixCls}__action--${action.type || 'default'}`]: action.type || 'default',
  69. [`${prefixCls}__action--bold`]: action.bold,
  70. [`${prefixCls}__action--disabled`]: action.disabled,
  71. [`${action.className}`]: action.className,
  72. })
  73. const hover = action.hoverClass && action.hoverClass !== 'default' ? action.hoverClass : `${prefixCls}__action--hover`
  74. return {
  75. wrap,
  76. hover,
  77. }
  78. })
  79. const hover = hoverClass && hoverClass !== 'default' ? hoverClass : `${prefixCls}--hover`
  80. return {
  81. wrap,
  82. hd,
  83. content,
  84. thumb,
  85. extra,
  86. bd,
  87. ft,
  88. actions,
  89. action,
  90. hover,
  91. }
  92. }],
  93. },
  94. methods: {
  95. onAction(e) {
  96. const { index } = e.currentTarget.dataset
  97. const { actions } = this.data
  98. const action = actions[index]
  99. if (!action.disabled) {
  100. this.triggerEvent('action', { index, action, actions })
  101. }
  102. },
  103. },
  104. })