# 大屏

**Repository Path**: rowrey/large-screen

## Basic Information

- **Project Name**: 大屏
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-09
- **Last Updated**: 2025-07-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

行内样式使用

import { px2vwh,px2vh } from './utils/pxToVw'
`<div style = "width: ${px2vw(500)}; height:${px2vh(300)};"></div>`

<div
  :style="{
    ...px2vwh(500, 300),
    marginBottom: px2vh(15),
    backgroundColor: '#ccc',
  }"
></div>

或者 自定义指令 没有放在项目里面 用上面的就好
// 注册自定义指令

<script>
// 注册自定义指令
app.directive('px', {
  mounted(el, binding) {
    updateStyles(el, binding.value)
    // 添加窗口大小变化监听
    const resizeHandler = () => updateStyles(el, binding.value)
    window.addEventListener('resize', resizeHandler)
    // 存储事件处理器以便卸载时移除
    el._resizeHandler = resizeHandler
  },
  updated(el, binding) {
    updateStyles(el, binding.value)
  },
  unmounted(el) {
    if (el._resizeHandler) {
      window.removeEventListener('resize', el._resizeHandler)
    }
  }
})

// 更新样式函数 - 解决高度转换问题
function updateStyles(el, styles) {
  const designWidth = 1920 // 设计稿宽度
  const designHeight = 1080 // 设计稿高度

  Object.entries(styles).forEach(([prop, valueConfig]) => {
    // 检查是否是带单位的配置对象
    if (typeof valueConfig === 'object' && valueConfig.value !== undefined) {
      const { value, unit = 'vw' } = valueConfig

      if (typeof value === 'number') {
        // 根据单位进行转换
        switch (unit) {
          case 'vw':
            el.style[prop] = `${(value / designWidth) * 100}vw`
            break
          case 'vh':
            el.style[prop] = `${(value / designHeight) * 100}vh`
            break
        }
      }
    } else {
      // 普通样式值
      el.style[prop] = valueConfig
    }
  })
}
</script>

<div
      v-px="{
        width: { value: 500, unit: 'vw' },
        height: { value: 300, unit: 'vh' },
        backgroundColor: '#000',
      }"
    ></div>