YTBreakPoint.ets 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. import { BreakPointString } from '../models'
  2. interface BreakPointTypeOption<T> {
  3. xs?: T
  4. sm?: T
  5. md?: T
  6. lg?: T
  7. }
  8. export class BreakPointType<T> {
  9. private readonly options: BreakPointTypeOption<T>
  10. constructor(option: BreakPointTypeOption<T>) {
  11. this.options = option
  12. }
  13. getValue(currentBreakPoint: BreakPointString) {
  14. switch (currentBreakPoint) {
  15. case 'xs':
  16. return this.options.xs;
  17. case 'sm':
  18. return this.options.sm;
  19. case 'md':
  20. return this.options.md;
  21. case 'lg':
  22. return this.options.lg;
  23. default:
  24. return undefined;
  25. }
  26. }
  27. }
  28. export class YTBreakPoint {
  29. /**
  30. * @type BreakPointString
  31. * @description 断点KEY值 使用BreakPointString类型代替string,限制非法输入
  32. */
  33. static readonly KEY = 'bp'
  34. static setBreakPoint(width: number) {
  35. const vpWidth = px2vp(width)
  36. let bp: BreakPointString = 'xs'
  37. if (vpWidth < 320) {
  38. bp = 'xs'
  39. } else if (vpWidth < 600) {
  40. bp = 'sm'
  41. } else if (vpWidth < 840) {
  42. bp = 'md'
  43. } else {
  44. bp = 'lg'
  45. }
  46. AppStorage.setOrCreate<BreakPointString>(YTBreakPoint.KEY, bp)
  47. }
  48. static getBreakPoint() {
  49. return AppStorage.get<string>(YTBreakPoint.KEY)
  50. }
  51. }