123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291 |
- <template>
- <view style="overflow: hidden;position: absolute;width: 100%;height: 90%;pointer-events: none; top: 0;left:0;z-index: 9996;">
- <view class="danmu-li" v-for="(item,index) in listData" :class="item.type" :style="item.style" :key="index">
- <view class="danmu-inner">
- <view class="user-box">
- <!-- <view class="user-img">
- <view class="img-box">
- <image src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=317894666,3379114684&fm=26&gp=0.jpg"></image>
- </view>
- </view> -->
- <!-- <view class="user-text cl1">
- 人名
- </view> -->
- <view class="user-status cl1" v-html="getText(item.item)">
- </view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import {
- emojiName,
- emojiUrl,
- emojiMap
- } from '@/config/emojiMap';
- export default {
- props: {
- //rightToLeft leftToRight leftBottom
- type: {
- type: String,
- default: 'rightToLeft'
- },
- list: {
- type: Array,
- default () {
- return []
- }
- },
- minTime: {
- type: Number,
- default: 4
- },
- maxTime: {
- type: Number,
- default: 9
- },
- minTop: {
- type: Number,
- default: 0
- },
- maxTop: {
- type: Number,
- default: 240
- },
- hrackH: { //轨道高度
- type: Number,
- default: 40
- }
- },
- data() {
- return {
- listData: [],
- emojiList: [],
- }
- },
- mounted() {
- //leftBottom 使用参数
- if (this.type === 'leftBottom') {
- this.hrackNum = Math.floor(this.maxTop / this.hrackH);
- }
- for (let i = 0; i < emojiName.length; i++) {
- this.emojiList.push({
- emojiName: emojiName[i],
- url: emojiUrl + emojiMap[emojiName[i]]
- });
- }
- },
- methods: {
- add(obj) {
- let data = {
- item: obj.item,
- id:Date.parse(new Date()),
- time: Math.ceil(Math.floor(Math.random() * (this.maxTime - this.minTime + 1) + this.minTime)),
- type: this.type
- }
- if (this.type === 'leftBottom') {
- let objData = {
- item: data.item,
- type: 'leftBottomEnter',
- style: {
- transition: `all 0.5s`,
- animationDuration: `0.5s`,
- transform: `translateX(0%)`,
- bottom: `${this.minTop}px`
- }
- }
- let listLen = this.listData.length;
- let hrackNum = this.hrackNum;
- for (let i in this.listData) {
- if(this.listData[i].status === 'reuse'){ //重用
- this.$set(this.listData,i,objData);
- }else if(this.listData[i].status === 'reset'){ //重置
- this.listData[i].style.transition = 'none';
- this.listData[i].style.bottom = 0;
- this.listData[i].status = 'reuse';
- }else if(this.listData[i].status === 'recycle'){ //回收
- this.listData[i].type = 'leftBottomExit';
- this.listData[i].status = 'reset';
- }else{
- this.listData[i].style.bottom = parseInt(this.listData[i].style.bottom) + this.hrackH + 'px';
- }
- if(parseInt(this.listData[i].style.bottom) >= (this.maxTop - this.hrackH) && this.listData[i].status !== 'reset'){ //需要回收
- this.listData[i].status = 'recycle';
- }
- }
- if(listLen < hrackNum + 2){
- this.listData.push(objData);
- }
- } else if (this.type === 'rightToLeft') {
-
-
- let num = Math.ceil(Math.random() * (this.maxTop - this.minTop + 1) + this.minTop);
-
- let objData = {
- item: data.item,
- type: 'rightToLeft',
- style: {
- animationDuration: `${data.time}s`,
- top: num > 196 ?'196px': `${num}px`
- },
- delTime: Date.parse(new Date()) + data.time * 1200
- }
- for (let i in this.listData) {
- if (this.listData[i].delTime <= Date.parse(new Date())) {
- this.repaint(i, objData.type);
- objData.type = '';
- this.$set(this.listData, i, objData);
- return
- }
- }
- this.listData.push(objData);
- }
- },
- repaint(index, type) {
- setTimeout(() => {
- this.listData[index].type = type;
- }, 100)
- },
- getText(str) {
- // let str = 'jfkdsj[咒骂]dsjfkljsa[憨笑]哈哈哈,[惊恐]'
- let exp = /\[(.*?)\]/g; //匹配[*] 大括号里面任意内容的正则
- let arr = str.match(exp); //字符串匹配出来的数组
- // console.log(arr);
- if (!arr) return str;
-
- this.emojiList.forEach((item1, index) => {
- arr.map(item => {
- // console.log(item1);
- if (item1.emojiName === item) {
- str = str.replace(item,
- `<img src='${item1.url}' style="width:20px;height:20px">`
- );
- }
- // console.log(item);
- // let key = `p${item.substr(1, item.length - 2)}`; //记录大括号里的值 用作id 方便取值
- // if (!this.salaryVars.hasOwnProperty(key)) this.$set(this.salaryVars, key, '');
- }); //循环遍历
- })
- // let arrNum = 取出所有正则匹配值并转换为input
-
- // console.log(str);
- return str;
- }
- }
- }
- </script>
- <style>
- </style>
- <style lang="scss">
- @keyframes leftBottomEnter {
- 0% {
- transform: translateY(100%);
- opacity: 0;
- }
- 100% {
- transform: translateY(0%);
- opacity: 1;
- }
- }
- @keyframes leftBottomExit {
- 0% {
- transform: translateY(0%);
- opacity: 1;
- }
-
- 100% {
- transform: translateY(-200%);
- opacity: 0;
- }
- }
- @keyframes leftToRight {
- 0% {
- transform: translateX(-100%);
- }
- 100% {
- transform: translateX(100%);
- }
- }
- @keyframes rightToLeft {
- 0% {
- transform: translateX(100%);
- }
- 100% {
- transform: translateX(-100%);
- }
- }
- .danmu-li {
- position: absolute;
- width: 100%;
- transform: translateX(100%);
- animation-timing-function: linear;
- &.leftBottomEnter {
- animation-name: leftBottomEnter;
- }
- &.leftBottomExit{
- animation-name: leftBottomExit;
- animation-fill-mode: forwards;
- }
- &.rightToLeft {
- animation-name: rightToLeft;
- }
- &.leftToRight {
- animation-name: rightToLeft;
- }
- .danmu-inner {
- display: inline-block;
- .user-box {
- display: flex;
- padding: 3rpx 40rpx 3rpx 10rpx;
- background: rgba(0, 0, 0, 0.3);
- border-radius: 32rpx;
- align-items: center;
- .user-img {
- .img-box {
- display: flex;
- image {
- width: 58rpx;
- height: 58rpx;
- background: rgba(55, 55, 55, 1);
- border-radius: 50%;
- }
- }
- }
- .user-status {
- margin-left: 10rpx;
- white-space: nowrap;
- font-size: 28rpx;
- font-weight: 400;
- color: rgba(255, 255, 255, 1);
- }
- .user-text {
- margin-left: 10rpx;
- // white-space: nowrap;
- font-size: 28rpx;
- font-weight: 400;
- width: 80rpx;
- color: rgba(255, 255, 255, 1);
- }
- }
- }
- }
- </style>
|