props.js 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. import { defineProps } from '../../libs/util/props';
  2. import theme from '../../libs/config/theme.js';
  3. export default defineProps('slider', {
  4. // #ifdef VUE2
  5. value: {
  6. type: [Number, Array],
  7. default: 0
  8. },
  9. // #endif
  10. // #ifdef VUE3
  11. modelValue: {
  12. type: [Number, Array],
  13. default: 0
  14. },
  15. // #endif
  16. // 最小值
  17. min: {
  18. type: Number,
  19. default: 0
  20. },
  21. // 最大值
  22. max: {
  23. type: Number,
  24. default: 100
  25. },
  26. // 步长
  27. step: {
  28. type: Number,
  29. default: 1
  30. },
  31. // 是否开启双滑块模式
  32. range: {
  33. type: Boolean,
  34. default: false
  35. },
  36. // 是否禁用滑块
  37. disabled: {
  38. type: Boolean,
  39. default: false
  40. },
  41. // 是否反向移动
  42. reverse: {
  43. type: Boolean,
  44. default: false
  45. },
  46. // 是否为只读状态
  47. readonly: {
  48. type: Boolean,
  49. default: false
  50. },
  51. // 是否禁止双滑块交叉
  52. noCross: {
  53. type: Boolean,
  54. default: false
  55. },
  56. // 是否垂直展示
  57. vertical: {
  58. type: Boolean,
  59. default: false
  60. },
  61. // 滑块的尺寸
  62. size: {
  63. type: [String, Number],
  64. default: 24
  65. },
  66. // 滑块大小
  67. thumbSize: {
  68. type: [String, Number],
  69. default: 15
  70. },
  71. // 滑块颜色
  72. thumbColor: {
  73. type: String,
  74. default: '#ffffff'
  75. },
  76. // 滑块边框颜色
  77. thumbBorder: {
  78. type: String,
  79. default: '3px solid ' + theme.primary
  80. },
  81. // 滑块圆角
  82. thumbRadius: {
  83. type: [String, Number],
  84. default: 50
  85. },
  86. // 轨道颜色
  87. railColor: {
  88. type: String,
  89. default: 'rgba(0, 0, 0, 0.1)'
  90. },
  91. // 轨道圆角
  92. railRadius: {
  93. type: [String, Number],
  94. default: 10
  95. },
  96. // 轨道大小
  97. railSize: {
  98. type: [String, Number],
  99. default: 4
  100. },
  101. // 已选择部分的轨道颜色
  102. trackColor: {
  103. type: String,
  104. default: theme.primary
  105. },
  106. // 是否显示数值
  107. showValue: {
  108. type: Boolean,
  109. default: false
  110. }
  111. })