业务

如何阻止输入框里可以输入 e

在 HTML 中，<input type="number" /> 允许用户输入数字，但默认情况下也允许输入字母 e（用于科学计数法，例如：1e3 表示 1000），这在某些业务场景下可能不符合需求。

可以使用 onkeydown 事件过滤输入

<input type="number" onkeydown="return (event.key !== 'e' && event.key !== 'E');" />

自定义 element plus 的每个轮播项有不同的停留时间

场景：使用 element plus 的走马灯 carousel 组件能展示图片和视频，并且支持自定义每个轮播项有不同的停留时间

我们需要通过 next 方法手动控制何时切换到下一个项目。

<script setup lang="ts">
  import { ref, onMounted } from 'vue';

  const lists = ref([
    { id: 1, type: 'img', banner: '/src/assets/sea1.jpg', target: 'www.baidu.com', duration: 3000 },
    { id: 2, type: 'video', banner: '/src/assets/sky.mp4', target: 'www.baidu.com', duration: 10000 },
    { id: 3, type: 'img', banner: '/src/assets/sea2.jpg', target: 'www.baidu.com', duration: 5000 },
    { id: 4, type: 'img', banner: '/src/assets/sea3.jpg', target: 'www.baidu.com', duration: 8000 }
  ]);

  const carouselRef = ref(null);

  let currentTimeout = null;
  const handleChange = index => {
    if (currentTimeout) clearTimeout(currentTimeout);

    // 设置新的定时器，根据当前轮播项的停留时间切换到下一项
    currentTimeout = setTimeout(() => {
      carouselRef.value.next(); // 切换到下一项
    }, lists.value[index].duration);
  };

  // 检查URL是否包含协议，防止浏览器将目标地址误认为是相对路径
  function addProtocolIfMissing(url) {
    if (!/^https?:\/\//i.test(url)) {
      return 'https://' + url;
    }
    return url;
  }

  const handleClick = item => {
    const targetUrl = addProtocolIfMissing(item.target);
    window.open(targetUrl, '_blank'); // _self
  };

  onMounted(() => {
    handleChange(0); // 手动触发第一次
  });
</script>

<template>
  <div class="wrapper">
    <el-carousel height="300px" ref="carouselRef" :interval="0" @change="handleChange">
      <el-carousel-item v-for="item in lists" :key="item.id" @click="handleClick(item)">
        <img v-if="item.type === 'img'" :src="item.banner" alt="" />
        <video v-else :src="item.banner" autoplay loop muted />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<style scoped>
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>