YTBreakPoint.ets 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. declare interface BreakPointTypeOption<T> {
  2. xs?: T
  3. sm?: T
  4. md?: T
  5. lg?: T
  6. }
  7. export class BreakPointType<T> {
  8. options: BreakPointTypeOption<T>
  9. constructor(option: BreakPointTypeOption<T>) {
  10. this.options = option
  11. }
  12. getValue(currentBreakPoint: string) {
  13. if (currentBreakPoint === 'xs') {
  14. return this.options.xs
  15. } else if (currentBreakPoint === 'sm') {
  16. return this.options.sm
  17. } else if (currentBreakPoint === 'md') {
  18. return this.options.md
  19. } else if (currentBreakPoint === 'lg') {
  20. return this.options.lg
  21. } else {
  22. return undefined
  23. }
  24. }
  25. }
  26. class YTBreakPoint {
  27. readonly KEY = 'bp'
  28. setBreakPoint(width: number) {
  29. const vpWidth = px2vp(width)
  30. let bp = ''
  31. if (vpWidth < 320) {
  32. bp = 'xs'
  33. } else if (vpWidth < 600) {
  34. bp = 'sm'
  35. } else if (vpWidth < 840) {
  36. bp = 'md'
  37. } else {
  38. bp = 'lg'
  39. }
  40. AppStorage.setOrCreate<string>(this.KEY, bp)
  41. }
  42. getBreakPoint() {
  43. return AppStorage.get<string>(this.KEY)
  44. }
  45. }
  46. export const yTBreakPoint = new YTBreakPoint()