Vue水平滚动条跑马灯组件– vue-marquee

描述：

Vue3平滑滚动组件，灵感来自传统的 <marquee /> 元素。

如何使用它：

1.安装并导入vue-marquee组件。

// globally
import { createApp } from "vue";
import Vue3Marquee from "vue3-marquee";
createApp(App).use(Vue3Marquee).mount("#app");
// locally
import Vue3Marquee from "vue3-marquee";
export default {
  components: {
    Vue3Marquee,
  },
};

2. 向滚动条添加内容。

<vue3-marquee>
  ... Any Content Here ...
</vue3-marquee>

3. 配置项。

direction: {
  type: String,
  required: false,
  default: "left",
  validator(value) {
    return ["left", "right"].includes(value);
  },
},
duration: {
  type: Number,
  required: false,
  default: 20,
},
delay: {
  type: Number,
  required: false,
  default: 0,
},
loop: {
  type: Number,
  required: false,
  default: 0,
},
clone: {
  type: Boolean,
  required: false,
  default: false,
},
gradient: {
  type: Boolean,
  required: false,
  default: false,
},
gradientColor: {
  type: Array,
  required: false,
  default: [255, 255, 255],
  validator: (value) => {
    if (value.length != 3) {
      return false;
    }
    if (typeof value[0] !== "number" || value[0] < 0 || value[0] > 255) {
      return false;
    }
    if (typeof value[1] !== "number" || value[1] < 0 || value[1] > 255) {
      return false;
    }
    if (typeof value[2] !== "number" || value[2] < 0 || value[2] > 255) {
      return false;
    }
    return true;
  },
},
gradientWidth: {
  type: [String, Number],
  required: false,
  default: 200,
},
pauseOnHover: {
  type: Boolean,
  required: false,
  default: false,
},
pauseOnClick: {
  type: Boolean,
  required: false,
  default: false,
},
options: {
  type: Object,
  required: false,
  default: {},
},