人民医院前端

yi-line.vue 992B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <template>
  2. <view class="empty-container">
  3. <view class="empty-line" ref="left-line-dom">
  4. </view>
  5. <view class="empty-words" v-if="isHasWords">
  6. <slot>
  7. <view>
  8. 暂无数据
  9. </view>
  10. <view>
  11. 请在右上角添加
  12. </view>
  13. </slot>
  14. </view>
  15. <view class="empty-line" ref="right-line-dom"></view>
  16. </view>
  17. </template>
  18. <script>
  19. export default {
  20. data() {
  21. return {
  22. }
  23. },
  24. mounted() {
  25. this.$refs['left-line-dom'].$el.style.backgroundColor = this.lineColor
  26. this.$refs['right-line-dom'].$el.style.backgroundColor = this.lineColor
  27. },
  28. props: {
  29. isHasWords: {
  30. type: Boolean,
  31. default: true
  32. },
  33. lineColor: {
  34. type: String,
  35. default: '#DCDFE6'
  36. }
  37. }
  38. }
  39. </script>
  40. <style scoped>
  41. .empty-container{
  42. display: flex;
  43. font-size: 14px;
  44. align-items: center;
  45. }
  46. .empty-line{
  47. width: 100%;
  48. height: 1px;
  49. }
  50. .empty-words{
  51. flex-shrink: 0;
  52. text-align: center;
  53. color: #909399;
  54. font-size: 12px;
  55. }
  56. </style>