├── .browserslistrc ├── .eslintrc.js ├── .gitignore ├── README.md ├── babel.config.js ├── dist ├── css │ └── app.css ├── index.html └── js │ ├── app.js │ └── chunk-vendors.js ├── index.js ├── package.json ├── postcss.config.js ├── public └── index.html ├── src ├── App.vue ├── components │ └── TextMarquee.vue └── main.js ├── vue.config.js └── yarn.lock /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/essential', 8 | 'eslint:recommended' 9 | ], 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 13 | }, 14 | parserOptions: { 15 | parser: 'babel-eslint' 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | *.map 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | package-lock.json -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-text-marquee 2 | 3 | > [Online Demo](https://satrong.github.io/vue-text-marquee/dist/index.html) 4 | 5 | ## Install 6 | ```sh 7 | npm i vue-text-marquee 8 | ``` 9 | 10 | 11 | ## Global Usage 12 | 13 | ```js 14 | import Vue from 'vue'; 15 | import VTextMarquee from 'vue-text-marquee'; 16 | Vue.use(VMarquee); 17 | ``` 18 | 19 | ## Use in `.vue` file 20 | 21 | ```js 22 | import { VTextMarquee } from 'vue-text-marquee'; 23 | export default { 24 | component: { 25 | VTextMarquee: VTextMarquee 26 | } 27 | } 28 | ``` 29 | 30 | ## Prop 31 | 32 | - `speed` `{Number}` , scrolling speed, default `50` 33 | - `content` `{String}` , scrolling content, you can also use default slot instead. 34 | - `animate` `{Boolean}` , control the animation is running or pause, default `true`.(Used css3's `animation-play-state`) 35 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /dist/css/app.css: -------------------------------------------------------------------------------- 1 | .v-marquee[data-v-757b2fb2]{white-space:nowrap;overflow:hidden}.v-marquee>div[data-v-757b2fb2]{display:inline-block;-webkit-animation:marquee linear infinite;animation:marquee linear infinite}.v-marquee .pause[data-v-757b2fb2]{-webkit-animation-play-state:paused;animation-play-state:paused}.v-marquee .running[data-v-757b2fb2]{-webkit-animation-play-state:running;animation-play-state:running}textarea[data-v-20dc6ede]{border:1px solid #ccc} -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 |