vuecli 如何让一个元素自适应 现已经监听到窗口的宽度 就差设置某个元素的高了 有哪个大佬帮我下呗 百度我搜不到了！还有就是video-player动态切换视频源怎么整？小白提问

Question

Answer 1

参考GPT和自己的思路：

关于Vue CLI如何让一个元素自适应宽度和高度，可以使用CSS的width和height属性设置为百分比，如：width: 100%; height: 100%;，这样该元素就可以根据容器的大小自适应，但需要注意该元素的父元素也必须设置为自适应大小。

至于你的代码中需要设置某个元素的高度，可以使用Vue.js中的ref来获取该元素的DOM，然后通过修改DOM元素的样式来动态改变高度。示例代码如下：

Template:

<template>
  <div ref="myElem">
    ...
  </div>
</template>

Script:

<script>
export default {
  name: 'MyComponent',
  mounted() {
    window.addEventListener('resize', this.handleResize);
    this.handleResize();
  },
  methods: {
    handleResize() {
      const elem = this.$refs.myElem;
      if (elem) {
        // 获取容器的宽度
        const width = elem.offsetWidth;
        // 设置高度为宽度的一半
        elem.style.height = `${width / 2}px`;
      }
    },
  },
};
</script>

关于video-player动态切换视频源的问题，可以通过修改source标签的src属性来实现。示例代码如下：

Template:

<template>
  <div>
    <video ref="videoPlayer" controls>
      <source :src="currentSource" type="video/mp4" />
    </video>
    <button @click="handleSwitchSource">Switch Source</button>
  </div>
</template>

Script:

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      sources: [
        'https://example.com/video1.mp4',
        'https://example.com/video2.mp4',
      ],
      currentSourceIndex: 0,
    };
  },
  computed: {
    currentSource() {
      return this.sources[this.currentSourceIndex];
    },
  },
  methods: {
    handleSwitchSource() {
      this.currentSourceIndex = (this.currentSourceIndex + 1) % this.sources.length;
      const videoElem = this.$refs.videoPlayer;
      if (videoElem) {
        videoElem.pause();
        videoElem.load();
        videoElem.play();
      }
    },
  },
};
</script>

以上是简单的解决方案，如果还有问题可以继续提问。