插件名称 | megasanjay |
---|---|
发布时间 | 2021年11月22日 |
插件作者 | vue3-marquee |
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: {},
},