t-td.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <template>
  2. <view class="t-td" :style="{ 'border-width': thBorder + 'px','border-color':borderColor ,'font-size':fontSize+'px' ,'color':color,'justify-content':tdAlignCpd}">
  3. <slot></slot>
  4. </view>
  5. </template>
  6. <script>
  7. export default {
  8. props: {
  9. align: String
  10. },
  11. data() {
  12. return {
  13. thBorder: '1',
  14. borderColor: '#d0dee5',
  15. fontSize: '14',
  16. color: '#555c60',
  17. tdAlign: 'center'
  18. };
  19. },
  20. inject: ['table', 'tr'],
  21. created() {
  22. this.thBorder = this.table.border;
  23. this.borderColor = this.table.borderColor;
  24. this.fontSize = this.tr.fontSize;
  25. this.color = this.tr.color;
  26. if (this.align) {
  27. this.tdAlign = this.align;
  28. } else {
  29. this.tdAlign = this.tr.align
  30. }
  31. },
  32. computed: {
  33. tdAlignCpd() {
  34. let nameAlign = '';
  35. switch (this.tdAlign) {
  36. case 'left':
  37. nameAlign = 'flex-start'
  38. break;
  39. case 'center':
  40. nameAlign = 'center'
  41. break;
  42. case 'right':
  43. nameAlign = 'flex-end'
  44. break;
  45. default:
  46. nameAlign = 'center'
  47. break;
  48. }
  49. return nameAlign
  50. }
  51. }
  52. };
  53. </script>
  54. <style>
  55. .t-td {
  56. flex: 1;
  57. display: flex;
  58. align-items: center;
  59. width: 100%;
  60. padding: 14upx;
  61. border-top: 1px #d0dee5 solid;
  62. border-left: 1px #d0dee5 solid;
  63. text-align: center;
  64. color: #697081;
  65. font-size: 24upx;
  66. }
  67. </style>