{"_id":"t-baberrage","_rev":"2-77d3bbb1aaf6949d847fb92405589e08","name":"t-baberrage","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"t-baberrage","version":"1.0.0","description":"Berrage plugin for VUE.js","author":{"name":"Sevenschan"},"private":false,"main":"dist/vue-baberrage.js","scripts":{"dev":"webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","start":"npm run dev","unit":"jest --config test/unit/jest.conf.js --coverage","test":"npm run unit","lint":"eslint --ext .js,.vue src test/unit","lint-fix":"eslint --fix --ext .js --ext .jsx --ext .vue src/","build":"rollup --config rollup.config.js"},"repository":{"type":"git","url":"git+https://github.com/superhos/vue-baberrage.git"},"dependencies":{"hyphenate-style-name":"^1.0.3","rollup-plugin-terser":"^5.2.0","to-px":"^1.1.0","uuid":"^3.4.0","vue":"^2.6.11"},"devDependencies":{"@babel/cli":"^7.8.4","@babel/core":"^7.8.4","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-runtime":"^7.8.3","@babel/preset-env":"^7.8.4","atob":">=2.1.0","autoprefixer":"^7.2.6","babel-eslint":"^8.2.6","babel-helper-vue-jsx-merge-props":"^2.0.3","babel-jest":"^21.0.2","babel-loader":"^8.0.6","babel-plugin-dynamic-import-node":"^1.2.0","babel-plugin-syntax-jsx":"^6.18.0","babel-plugin-transform-decorators-legacy":"^1.3.5","babel-plugin-transform-es2015-modules-commonjs":"^6.26.2","babel-plugin-transform-runtime":"^6.22.0","babel-plugin-transform-vue-jsx":"^3.7.0","babel-preset-stage-2":"^6.22.0","chalk":"^2.4.2","copy-webpack-plugin":"^4.6.0","css-loader":"^0.28.11","eslint":"^4.19.1","eslint-config-standard":"^10.2.1","eslint-friendly-formatter":"^3.0.0","eslint-loader":"^2.1.1","eslint-plugin-import":"^2.15.0","eslint-plugin-node":"^5.2.0","eslint-plugin-promise":"^3.8.0","eslint-plugin-standard":"^3.1.0","eslint-plugin-vue":"^4.7.1","extract-text-webpack-plugin":"^3.0.0","file-loader":"^1.1.11","friendly-errors-webpack-plugin":"^1.7.0","html-webpack-plugin":"^3.2.0","jest":"^22.4.4","jest-serializer-vue":"^0.3.0","less":"^3.10.3","less-loader":"^5.0.0","merge":">=1.2.1","node-notifier":"^5.3.0","optimize-css-assets-webpack-plugin":"^3.2.0","ora":"^1.2.0","portfinder":"^1.0.20","postcss-import":"^11.1.0","postcss-loader":"^2.1.6","postcss-url":"^7.3.2","randomatic":">=3.0.0","rimraf":"^2.6.3","rollup":"^1.31.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-uglify":"^6.0.4","rollup-plugin-vue":"^5.1.6","semver":"^5.6.0","shelljs":"^0.7.6","uglifyjs-webpack-plugin":"^1.3.0","url-loader":"^1.1.2","vue-jest":"^1.0.2","vue-loader":"^14.2.3","vue-style-loader":"^3.1.2","vue-template-compiler":"^2.6.11","webpack":">=4.29.0","webpack-bundle-analyzer":"^3.3.2","webpack-cli":"^3.2.1","webpack-dev-server":">=3.1.11","webpack-merge":"^4.2.1"},"engines":{"node":">= 6.0.0","npm":">= 3.0.0"},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"gitHead":"b08477619ec56089c5198a85f3366bd29e71c409","bugs":{"url":"https://github.com/superhos/vue-baberrage/issues"},"homepage":"https://github.com/superhos/vue-baberrage#readme","_id":"t-baberrage@1.0.0","_nodeVersion":"10.18.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-M4KxYkhIgqVBcVhi4j1n3KWlc45NOpyN5vn0gWMtBESSIv+raEykZxG4vnnZk+fUYOJ/1BWi5oFF3Mg0e9jccg==","shasum":"93bb2a405215bc6885504f67846d68b505dcf12d","tarball":"https://registry.npmjs.org/t-baberrage/-/t-baberrage-1.0.0.tgz","fileCount":61,"unpackedSize":18386420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBy2fCRA9TVsSAnZWagAALZgQAIHR5AOZxyGIiVXE8vzv\nV2HCA78AVZnY6l/33TPrbBr98tpxhIAdaHj60fywflwfvXNTfaaqIYw51EHW\njKcBSFI/pSnBIafH3bCJt8AtsT1L+w6+QNqUchUKta0JLhyp3nUkLeaeaLtS\nmKX5osqOOac8PcuSLoTY7Oa+vcqYjNHPiVzFCcolg1/IVyFEg+u7jURtFcRu\nYgsBGIL5zpHwdNrntCGr8Zv6s0nRhtAUKLyWwcznmWZzm6NedJ4JmoJ0GF/q\nJwfZUdCJX/nLcPN8+f24XTSNrsNuVLiYBsZVcSzdhK8xAZW+lm54r7arEqCu\nIboVBzwN6KiFOQMV6MkwjlPudozT4axOmJ/IxeWfny8DdgaO16H3Ki5brRbW\nQTyyH894HGUnesClclsdb4ISF2wlCh1kBcUviOswE+uiRx6ycLJ/RfzooWYU\nO7bP3hB77bNR7rlufe+64aKWcsghys0/4jItg8Aku5I7I5U9J6Wud4Ijlc2k\nJnKSr7V01Tpi0NdosqYcuAg8LML94WSvWdjXzX92ExNEsIFnf/l27pSsXkHK\n2uLGuCyXk9ZJx8OgnG6W/EWmSXMR8dBbLdmzvexhBPK2y7Gs/CcsCAcwKviR\nDpnoiwt7VAICvOUDynEbBQxFfqQ4l9bkaeYFngOlPdmPu4Hfo3BZPZv0kO5z\nN35M\r\n=aWZE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5J9LW6DpQjhg3J1eYeHSFkGEtKq7uPSn3V4k0Pr9qbgIgLxEYa7sBKCNClAT0j5rQa3TdRIoG7ZpyR24XYN18mKE="}]},"maintainers":[{"name":"zonghua2016","email":"tongzonghua@gmail.com"}],"_npmUser":{"name":"zonghua2016","email":"tongzonghua@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/t-baberrage_1.0.0_1594305950791_0.6304778096821373"},"_hasShrinkwrap":false},"1.0.1":{"name":"t-baberrage","version":"1.0.1","description":"Berrage plugin for VUE.js","author":{"name":"Sevenschan"},"private":false,"main":"dist/vue-baberrage.js","scripts":{"dev":"webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","start":"npm run dev","unit":"jest --config test/unit/jest.conf.js --coverage","test":"npm run unit","lint":"eslint --ext .js,.vue src test/unit","lint-fix":"eslint --fix --ext .js --ext .jsx --ext .vue src/","build":"rollup --config rollup.config.js"},"repository":{"type":"git","url":"git+https://github.com/superhos/vue-baberrage.git"},"dependencies":{"hyphenate-style-name":"^1.0.3","rollup-plugin-terser":"^5.2.0","to-px":"^1.1.0","uuid":"^3.4.0","vue":"^2.6.11"},"devDependencies":{"@babel/cli":"^7.8.4","@babel/core":"^7.8.4","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-runtime":"^7.8.3","@babel/preset-env":"^7.8.4","atob":">=2.1.0","autoprefixer":"^7.2.6","babel-eslint":"^8.2.6","babel-helper-vue-jsx-merge-props":"^2.0.3","babel-jest":"^21.0.2","babel-loader":"^8.0.6","babel-plugin-dynamic-import-node":"^1.2.0","babel-plugin-syntax-jsx":"^6.18.0","babel-plugin-transform-decorators-legacy":"^1.3.5","babel-plugin-transform-es2015-modules-commonjs":"^6.26.2","babel-plugin-transform-runtime":"^6.22.0","babel-plugin-transform-vue-jsx":"^3.7.0","babel-preset-stage-2":"^6.22.0","chalk":"^2.4.2","copy-webpack-plugin":"^4.6.0","css-loader":"^0.28.11","eslint":"^4.19.1","eslint-config-standard":"^10.2.1","eslint-friendly-formatter":"^3.0.0","eslint-loader":"^2.1.1","eslint-plugin-import":"^2.15.0","eslint-plugin-node":"^5.2.0","eslint-plugin-promise":"^3.8.0","eslint-plugin-standard":"^3.1.0","eslint-plugin-vue":"^4.7.1","extract-text-webpack-plugin":"^3.0.0","file-loader":"^1.1.11","friendly-errors-webpack-plugin":"^1.7.0","html-webpack-plugin":"^3.2.0","jest":"^22.4.4","jest-serializer-vue":"^0.3.0","less":"^3.10.3","less-loader":"^5.0.0","merge":">=1.2.1","node-notifier":"^5.3.0","optimize-css-assets-webpack-plugin":"^3.2.0","ora":"^1.2.0","portfinder":"^1.0.20","postcss-import":"^11.1.0","postcss-loader":"^2.1.6","postcss-url":"^7.3.2","randomatic":">=3.0.0","rimraf":"^2.6.3","rollup":"^1.31.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-uglify":"^6.0.4","rollup-plugin-vue":"^5.1.6","semver":"^5.6.0","shelljs":"^0.7.6","uglifyjs-webpack-plugin":"^1.3.0","url-loader":"^1.1.2","vue-jest":"^1.0.2","vue-loader":"^14.2.3","vue-style-loader":"^3.1.2","vue-template-compiler":"^2.6.11","webpack":">=4.29.0","webpack-bundle-analyzer":"^3.3.2","webpack-cli":"^3.2.1","webpack-dev-server":">=3.1.11","webpack-merge":"^4.2.1"},"engines":{"node":">= 6.0.0","npm":">= 3.0.0"},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"gitHead":"b08477619ec56089c5198a85f3366bd29e71c409","bugs":{"url":"https://github.com/superhos/vue-baberrage/issues"},"homepage":"https://github.com/superhos/vue-baberrage#readme","_id":"t-baberrage@1.0.1","_nodeVersion":"10.18.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-znkPeMmI1tkDwPnTjspvsW018Mfw65ieOdXZ5mOAPX1kq/z5E+tIUjyS6jOktP/X2a1ffrh5+Nloxq/9Oub2YQ==","shasum":"d7f9d090de15c54f867ca300944a5e83997dd27b","tarball":"https://registry.npmjs.org/t-baberrage/-/t-baberrage-1.0.1.tgz","fileCount":61,"unpackedSize":18386420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB/40CRA9TVsSAnZWagAAlmoQAJqrDa3JykCj5S1CDPzm\nEMzn1d+WCTxMUe9iHSnh1VWNrsopZOLQQvvSM7ggiF1Ttj7ACOr/6hVE9YoB\nEB22u9Jw9sGOnYEOZ6A7AvjtyGU6X/8XyLvxuMVRcH0F7R6y64CKmeF5FHpD\nxviVoLbNFH9txAyXt5UZIZuHhDMJZIY3p4cFPt69L3kGlYJSb2y6B7BD5rny\nuLDlsZ47SDEPazqpY988QPgXl89XAA9HdLOn09uDJ6EB+kkx5a3YEakNVxvF\nN86x8q3pMQaJbJJq90uawbI73xsiT4Q/MOtZBuQ2XikI6cpW6nqCv5d3qPoK\nCPauAD9qsSPeJnDHF0Ss/pcEw9eRoIFyzpom7sph6XmJA3iPisgPC6BTVFQ6\nlHeMl5Ysm5QdRwvED+lAtVvep/C+yJ4NV7CUuTSv8Qt59OnVUteelskOBbt9\n4BmkbdtRV8BlYo5I6VUKAdRPXIfB15kp6xxx3DHSqZ1fEH4CcF56TayoL+jN\ncRGDr5htn41Uhype34HNJxh14rwH/atz3MrfNoYMhsxSKmzO1PjV5b62ZLiE\nT+vqF68MR8XDSHYaqB3Tc0wgxfJX+hScmzQfBDKYtsToq8pXSSTzNmusL01U\nwI3zmTAGxv1vQGhkkzXFjP5C+nxe4KClRP9zluv8+Iw7c7/tJ8uXSP+eSymw\nLaFZ\r\n=GzIc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDg1TKmaQLTRrRmgaylPZsFWfA8bRpsE093RRh7ypCF9gIhAPkqwpxPo5/gddJ2yN6NkB78QT6TTF3K0BLQw1QKF6Kj"}]},"maintainers":[{"name":"zonghua2016","email":"tongzonghua@gmail.com"}],"_npmUser":{"name":"zonghua2016","email":"tongzonghua@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/t-baberrage_1.0.1_1594359348177_0.5030166969158845"},"_hasShrinkwrap":false}},"time":{"created":"2020-07-09T14:45:50.790Z","1.0.0":"2020-07-09T14:45:51.314Z","modified":"2022-05-19T07:11:08.621Z","1.0.1":"2020-07-10T05:35:48.574Z"},"maintainers":[{"name":"zonghua2016","email":"tongzonghua@gmail.com"}],"description":"Berrage plugin for VUE.js","homepage":"https://github.com/superhos/vue-baberrage#readme","repository":{"type":"git","url":"git+https://github.com/superhos/vue-baberrage.git"},"author":{"name":"Sevenschan"},"bugs":{"url":"https://github.com/superhos/vue-baberrage/issues"},"readme":"\n<h1 align=\"center\">\n  <br>\n  <a href=\"#\" style=\"border-radius:50px;padding:10px;box-sizing:border-box;background:#000;display:inline-block;\" ><img src=\"https://raw.githubusercontent.com/superhos/vue-baberrage/master/docs/logo.png\" alt=\"VueBaberrage\" style=\"border-radius:150px;box-sizing:border-box;\" width=\"200\"></a>\n  <br>\n\t<br>\n</h1>\n\n<h4 align=\"center\">Barrage plugin for Vue.js.</h4>\n<p align=\"center\">\n<img alt=\"\" src=\"https://img.shields.io/badge/vueBaberrage.js-3.2.0-green.svg\">\n<img alt=\"\" src=\"https://img.shields.io/badge/vue.js-2.5.22-brightgreen.svg\">\n<img alt=\"\" src=\"https://img.shields.io/badge/minified size-20kB-blue.svg\">\n<img alt=\"\" src=\"https://img.shields.io/badge/License-MIT-orange.svg\">\n</p>\n\n<p align=\"center\">\n  <a href=\"#overview\">Overview</a> •\n  <a href=\"#overview\">Overview</a> •\n  <a href=\"#demo\">Demo</a> •\n  <a href=\"#installation\">Installation</a> •\n  <a href=\"#usage\">Usage</a> •\n  <a href=\"#plugin-options\">Plug Options</a> •\n  <a href=\"#roadmap\">Roadmap</a>\n</p>\n\n## Introduction\n\nBaberrage is one of the popular comment perform style in China.\n\n## Overview\n\n![new_version](https://raw.githubusercontent.com/superhos/vue-baberrage/master/screenshot/demo-show.gif)\n\nGIF performance is not good enough. Please refer to [DEMO](http://blog.chenhaotaishuaile.com/vue-baberrage/) page\n\n[中文文档](/docs/zh/README.md)\n\n## Demo\n\nSee the [DEMO](https://blog.chenhaotaishuaile.com/vue-baberrage/) page\n\n## Installation\n\n1) Install package via NPM\n\n```bash\nnpm i vue-baberrage\n```\n2) Install plugin within project\n\n```javascript\nimport Vue from 'vue'\nimport { vueBaberrage } from 'vue-baberrage'\nVue.use(vueBaberrage)\n```\nor\n\n```javascript\nconst vueBaberrage = request('vue-baberrage').vueBaberrage\n```\n\nor\n\n```html\n<script src=\"./dist/vue-baberrage.js\"></script>\n```\n\n## Usage\n\n1) Template\n`isShow` and `barrageList` are necessary.\n\n```html\n<div id=\"app\">\n<vue-baberrage\n      :isShow= \"barrageIsShow\"\n      :barrageList = \"barrageList\"\n      :loop = \"barrageLoop\"\n      >\n    </vue-baberrage>\n</div>\n```\n\n2) Script\n\n```javascript\nimport { MESSAGE_TYPE } from 'vue-baberrage'\n\nexport default {\n  name: 'app',\n  data () {\n    return {\n      msg: 'Hello vue-baberrage',\n      barrageIsShow: true,\n      currentId : 0,\n      barrageLoop: false,\n      barrageList: []\n    }\n  },  \n  methods:{\n    addToList (){\n      this.barrageList.push({\n        id: ++this.currentId,\n        avatar: \"./static/avatar.jpg\",\n        msg: this.msg,\n        time: 5,\n        type: MESSAGE_TYPE.NORMAL\n      });\n  ...\n```\n\n3) Already done\n\nJust two step, and add new barrage message by pushing data into the `barrageList`. You needn't concern about the management of the barrageList, it will be handled by vue-baberrage. Suggest the `barrageList` store into the Vuex.\n\n## Custom Example\n\nNew function in version 3.2.0. Support provides VNode to render the barrage.\n````javascript\n<vue-baberrage\n        ref=\"baberrage\"\n        :lanesCount=\"5\"\n        :boxHeight= \"stageHeight\"\n        :isShow= \"barrageIsShow\"\n        :barrageList = \"barrageList\"\n        :loop = \"barrageLoop\"\n        :maxWordCount = \"60\"\n        :hoverLanePause = \"hoverLanePause\"\n        >\n\t\t<template v-slot:default=\"slotProps\">\n\t\t\t<span style=\"color: #000\">\n\t\t\t{{slotProps.item.data.userName}}: {{slotProps.item.msg}}\n\t\t\t</span>\n\t\t</template>\n\t  </vue-baberrage>\n````\nCustomized your barrage UI as the slot of component.`props.item` data same as barrage data. Noticed that, if the width of barrage not fit in stage. You can add the field `extraWidth` in barrage data.\n````javascript\n{\n\tid: ++this.currentId,\n\tavatar: \"./static/avatar.jpg\",\n\tmsg: this.msg,\n\tdata: {\n\t  userName: 'more data'\n\t},\n\ttime: 5,\n\ttype: MESSAGE_TYPE.NORMAL,\n\textraWidth: 60\n}\n````\n\nSince vue-baberrage only count the width of length of the barrage's message.\n\n## Plugin Options\n\n#### isShow\n\t- Default: `true`\n\t- Acceptable-Values: Boolean\n\t- Function: This is the switch that if barrage is displayed.\n\n#### barrageList\n\t- Default: `[]`\n\t- Acceptable-Values: Array\n\t- Function: The is the container for managing the all barrage messages.\n\n#### boxWidth\n\t- Default: `parent's Width`\n\t- Acceptable-Values: Number\n\t- Function: Determine the width of the stage.\n\n#### boxHeight\n\t- Default: `window's Height`\n\t- Acceptable-Values: Number\n\t- Function: Determine the height of the stage.\n\n#### messageHeight\n\t- Default: `message's Height`\n\t- Acceptable-Values: Number\n\t- Function: Determine the height of the message.\n\n#### maxWordCount\n\t- Default: 60\n\t- Acceptable-Values: Number\n\t- Function: Determine the word count of the message.\n\n#### loop\n\t- Default: `false`\n\t- Acceptable-Values: Boolean\n\t- Function: Loop or not.\n\n#### throttleGap\n\t- Default: 2000\n\t- Acceptable-Values: Number\n\t- Function: The gap time between the message\n\n#### posRender\n\t- Default: null\n\t- Acceptable-Values: Function\n\t- Function: To customize the lane of babbarrage messages.\n\t- Return: The function muse return the index of the lane.\n\n#### lanesCount\n\t- Default: 0\n\t- Acceptable-Values: Number\n\t- Function: To fixed the number of the lanes.\n\n## Barrage Message Options\n\n#### id\n\t- Default: `null`\n\t- Acceptable-Values: Number\n\t- Function: For distinguish with other barrage messages.\n\n#### avatar\n\t- Default: `#`\n\t- Acceptable-Values: String\n\t- Function: Show the avatar of the barrage message.\n\t\n#### msg\n\t- Default: `null`\n\t- Acceptable-Values: String\n\t- Function: The content of the barrage message.\n\n#### barrageStyle\n\t- Default: `normal`\n\t- Acceptable-Values: String\n\t- Function: the css class name of the barrage message.\n\n#### time\n\t- Default: `10`\n\t- Acceptable-Values: Number\n\t- Function: How long does the barrage message show.(Seconds)\n\n#### type\n\t- Default: MESSAGE_TYPE.NORMAL\n\t- Acceptable-Values: Symbol\n\t- Function: The type of the barrage message. \n\t\t\t\tMESSAGE_TYPE.NORMAL for scroll from right to left. \n\t\t\t\tMESSAGE_TYPE.FROM_TOP for fixed on the top of the stage.\n\n#### extraWidth\n\t- Default: 0\n\t- Acceptable-Values: Number\n\t- Function: Add extra width to the barrage message.\n\n## Events\n\n`barrage-list-empty` when the `barrageList` is empty will be called.\n\n```html\n<vue-baberrage\n\t      :is-show= \"barrageIsShow\"\n\t      :barrage-list = \"barrageList\"\n\t      :loop = \"barrageLoop\"\n\t      @barrage-list-empty=\"sayHi\"\n\t      >\n```\n\n## Roadmap\n\n#### Version 0.0.1\n- Realized the basic functionality.\n\n#### Version 1.0.0\n- Performance improvement.\n\n#### Version 1.2.0\n- Code specification\n- Performance improvement.\n\n#### Version 2.1.2\n- Used ES6.\n- Performance improvement.\n\n#### Version 2.1.9\n- Added Throttling\n\n#### Version 3.1.0\n- Used Rollup to build.\n- Add `posRender` attribute for customizing the show up lane of baberrage messages.\n- Fixed issues.\n\n#### Version 3.2.0\n- Support customize baberrage.\n- Fixed issues.\n\n## Future\nI am developing `Vue-Baberrage-Plus`, difference between `Vue-Barrage` and `Vue-Baberrage-Plus` is former will be used for a tool, and `Plus` is a baberrage system.\n","readmeFilename":"README.md"}