props.js 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. import { defineProps } from '../../libs/util/props';
  2. import theme from '../../libs/config/theme.js';
  3. export default defineProps('tabs', {
  4. // 滑块的移动过渡时间,单位ms
  5. duration: {
  6. type: Number,
  7. default: 300,
  8. },
  9. // 是否启用转场动画
  10. animated: {
  11. type: Boolean,
  12. default: false,
  13. },
  14. // 是否启用左右滑动切换
  15. swipeable: {
  16. type: Boolean,
  17. default: false,
  18. },
  19. // 高度
  20. height: {
  21. type: [String, Number],
  22. default: '',
  23. },
  24. // tabs标签数组
  25. list: {
  26. type: Array,
  27. default: () => [],
  28. },
  29. // 滑块颜色
  30. lineColor: {
  31. type: String,
  32. default: theme.primary,
  33. },
  34. // 菜单选择中时的样式
  35. activeStyle: {
  36. type: [String, Object],
  37. default: () => ({
  38. color: theme.contentColor,
  39. }),
  40. },
  41. // 菜单非选中时的样式
  42. inactiveStyle: {
  43. type: [String, Object],
  44. default: () => ({
  45. color: theme.lightColor,
  46. }),
  47. },
  48. // 滑块长度
  49. lineWidth: {
  50. type: [String, Number],
  51. default: 20,
  52. },
  53. // 滑块高度
  54. lineHeight: {
  55. type: [String, Number],
  56. default: 3,
  57. },
  58. // 滑块背景显示大小,当滑块背景设置为图片时使用
  59. lineBgSize: {
  60. type: String,
  61. default: 'cover',
  62. },
  63. // 菜单item的样式
  64. itemStyle: {
  65. type: [String, Object],
  66. default: () => ({
  67. height: '44px',
  68. }),
  69. },
  70. // 菜单是否可滚动
  71. scrollable: {
  72. type: Boolean,
  73. default: true,
  74. },
  75. // 当前选中标签的索引
  76. current: {
  77. type: [Number, String],
  78. default: 0,
  79. },
  80. // 默认读取的键名
  81. keyName: {
  82. type: String,
  83. default: 'name',
  84. },
  85. });