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

安装和下载：

# Yarn
$ yarn add vue3-marquee

# NPM
$ npm i vue3-marquee

使用：

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

// 全局
import { createApp } from "vue";
import Vue3Marquee from "vue3-marquee";
createApp(App).use(Vue3Marquee).mount("#app");

// 本地
import Vue3Marquee from "vue3-marquee";
export default {
  components: {
    Vue3Marquee,
  },
};

2. 向滚动条添加内容。

<vue3-marquee>
  ... 这里有什么内容吗 ...
</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: {},
},