其他分享
首页 > 其他分享> > vue跑马灯vue3-marquee

vue跑马灯vue3-marquee

作者:互联网

  1. 安装vue3-marquee
    如果您使用的是 npm:
    npm install vue3-marquee@latest --save
    如果您使用的是yarn:
    yarn add vue3-marquee@latest
  2. 用法
    最常见的用例是全局注册组件。
// main.js
import { createApp } from 'vue'
import Vue3Marquee from 'vue3-marquee'
import 'vue3-marquee/dist/style.css'

createApp(App).use(Vue3Marquee).mount('#app')

或者,您可以在本地导入选取框组件。

import { Vue3Marquee } from 'vue3-marquee'
import 'vue3-marquee/dist/style.css'

export default {
  components: {
    Vue3Marquee,
  },
}

然后,您可以在模板中使用该组件。一个常见的用例是用于徽标的图像选取框,但您也可以使用它来滚动文本。

<template>
  <Vue3Marquee>
    <img height="200" width="300" src="...img" />
    <img height="200" width="300" src="...img" />
    <img height="200" width="300" src="...img" />
  </Vue3Marquee>
</template>

<script>
import { Vue3Marquee } from 'vue3-marquee'
import 'vue3-marquee/dist/style.css'

export default {
  components: {
    Vue3Marquee,
  },
}
</script>

标签:style,vue,dist,marquee,跑马灯,Vue3Marquee,vue3,import
来源: https://www.cnblogs.com/huashenyin/p/16320443.html