标签：theme clientWidth 圆形 props 组件 document 方法 size

-

最近写一个组件，圆形开关。

在组件封装时被要求通过设置一个size属性来控制圆形的大小。且随屏幕自适应。

size属性要求是数字，我们把它的单位当成px。要做到随屏幕自适应，需要转换为其它的单位

以下列出3中方法：

方法1：将size转换成vw   （最简单有效）

方法2：将size转换为rem    （需要额外监听屏幕宽度）

方法3：将size转换成百分比   （高度通过padding-top撑起）

<template>
  <span :class="switchClass"></span>
</template>

<script>
import { computed, defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'CircleSwitch',
  props: {
    size: {
      type: Number,
      default: 26
    }
  },
  setup(props) {
    const switchClass = computed(() => {
      return [
        'circle_switch',
      ]
    });
    // 监听窗口宽度变化
    const windowWIdth = ref(document.body.clientWidth);
    const listenResize = () => {
      window.onresize = () => {
        windowWIdth.value = document.body.clientWidth;
      }
    }
    listenResize();

    const theme = computed(() => {
      return {
        // size: `${props.size / document.body.clientWidth * 100}vw`  // 方法1
        // size: `${props.size / (14 * 1920 / windowWIdth.value)}rem` // 方法2
        size: `${props.size / document.body.clientWidth * 100}%` // 方法3
      }
    })
    
    return {
      switchClass,
      theme
    }
  },
})
</script>

<style lang="scss" scoped>
.circle_switch{
  display: inline-block;
  border: 1px solid red;
  width: v-bind('theme.size');
  height: v-bind('theme.size'); 方法1、方法2
  // padding-top: v-bind('theme.size'); 方法3

}

-

标签：theme,clientWidth,圆形,props,组件,document,方法,size
来源： https://www.cnblogs.com/fqh123/p/16412819.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。