You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

83 lines
2.7 KiB

  1. import { defineMixin } from '../../libs/vue'
  2. import BadgeDefaultProps from './badge'
  3. import { registerComponentProps } from '../../libs/config/props.js'
  4. const defProps = registerComponentProps(BadgeDefaultProps)
  5. export const props = defineMixin({
  6. props: {
  7. // 是否显示圆点
  8. isDot: {
  9. type: Boolean,
  10. default: () => defProps.badge.isDot
  11. },
  12. // 显示的内容
  13. value: {
  14. type: [Number, String],
  15. default: () => defProps.badge.value
  16. },
  17. // 显示的内容
  18. modelValue: {
  19. type: [Number, String],
  20. default: () => defProps.badge.modelValue
  21. },
  22. // 是否显示
  23. show: {
  24. type: Boolean,
  25. default: () => defProps.badge.show
  26. },
  27. // 最大值,超过最大值会显示 '{max}+'
  28. max: {
  29. type: [Number, String],
  30. default: () => defProps.badge.max
  31. },
  32. // 主题类型,error|warning|success|primary
  33. type: {
  34. type: String,
  35. default: () => defProps.badge.type
  36. },
  37. // 当数值为 0 时,是否展示 Badge
  38. showZero: {
  39. type: Boolean,
  40. default: () => defProps.badge.showZero
  41. },
  42. // 背景颜色,优先级比type高,如设置,type参数会失效
  43. bgColor: {
  44. type: [String, null],
  45. default: () => defProps.badge.bgColor
  46. },
  47. // 字体颜色
  48. color: {
  49. type: [String, null],
  50. default: () => defProps.badge.color
  51. },
  52. // 徽标形状,circle-四角均为圆角,horn-左下角为直角
  53. shape: {
  54. type: String,
  55. default: () => defProps.badge.shape
  56. },
  57. // 设置数字的显示方式,overflow|ellipsis|limit
  58. // overflow会根据max字段判断,超出显示`${max}+`
  59. // ellipsis会根据max判断,超出显示`${max}...`
  60. // limit会依据1000作为判断条件,超出1000,显示`${value/1000}K`,比如2.2k、3.34w,最多保留2位小数
  61. numberType: {
  62. type: String,
  63. default: () => defProps.badge.numberType
  64. },
  65. // 设置badge的位置偏移,格式为 [x, y],也即设置的为top和right的值,absolute为true时有效
  66. offset: {
  67. type: Array,
  68. default: () => defProps.badge.offset
  69. },
  70. // 是否反转背景和字体颜色
  71. inverted: {
  72. type: Boolean,
  73. default: () => defProps.badge.inverted
  74. },
  75. // 是否绝对定位
  76. absolute: {
  77. type: Boolean,
  78. default: () => defProps.badge.absolute
  79. }
  80. }
  81. })