标签：es6 seo sha 技术 padding 设置图 str 遍历 password
一丶element-ui中遇到的坑
1.message消息提示框
我们在点击弹出消息提示时，点击多次的话会一直弹出多个相同的消息提示，感觉非常的不友好。这时候我们可以在调用 Message 或 this.$message 会返回当前 Message。 调用实例之前关闭前面提示就好了。
这其实很简单，就是一句代码的事：加上 this.$message.closeAll()就好了！！！
export function jsRound (number, precision) {
return Math.round(+number + ‘e‘ + precision) / Math.pow(10, precision)
}
调用
methods: {
// 四舍六入 .toFixed()
// 取两位小数
format (t) {
return jsRound(t, 2)
}
}
}
怎么用
<span>参团率：{{format(item.ave_group_rate*100)}}%</span>
<div v-for="(v,i) in list" :key="i" @click="changeL(i)" :class="{active: i == active}" >{{ v }}</div> </div>
//下面是说明
:class="{active: i == active}"根据下标绑定类实现点击切换高亮
@click="changeL(i)"点击事件传入下标为参数
data () {
return {
list: [‘上单‘, ‘打野‘, ‘中单‘, ‘ADC‘, ‘辅助‘],利用v-for显示导航栏的显示
active: 0,默认下标为0的高亮
src: require(‘@/assets/image/default.png‘),设置图片src为空时显示的默认图片
//下面相当与映射，把后端返回的英文字段用中文渲染但页面上
//页面上如何用如下
areaString: {
‘1‘: {
‘top‘: ‘上单‘,
‘jun‘: ‘打野‘,
‘mid‘: ‘中路‘,
‘adc‘: ‘ADC‘,
‘sup‘: ‘辅助‘
},
‘2‘: {
‘top‘: ‘一号位‘,
‘mid‘: ‘二号位‘,
‘adc‘: ‘三号位‘,
‘jun‘: ‘四号位‘,
‘sup‘: ‘五号位‘
}
}
}
},
methods: {
//点击事件，点击切换显示
changeL (i) {
this.active = i
},
// 四舍六入 .toFixed()
// 取两位小数
format (t) {
return jsRound(t, 2)
}
}
蓝队
<div class="content" v-for="(item,index) in teamPlayer[0]" :key="‘a‘+index" v-if="index == active">
.....//这里是你要显示的内容，kda,参团率什么的
//
v-if="index == active"因为遍历出来的有五个位置，所以要用v-if绑定下标index==active来切换显示各个位置的信息
</div>
红队
<div class="content" v-for="(item,index) in teamPlayer[1]" :key="‘aa‘+index" v-if="index == active"> .....//这里是你要显示的内容，kda,参团率什么的
key拼接aa是因为有两个相同的key报错如下
vue.esm.js?efeb:628 [Vue warn]: Duplicate keys detected: ‘0‘. This may cause an update error.
</div>
computed: { teamPlayer () { // 加字段 let t = this.data.teamPlayer || [] for (let i = 0; i < t.length; i++) { // e=teamPlayer[0,1]一维 const e = t[i] for (let k = 0; k < e.length; k++) { // ee=teamPlaye[0,1,2,3,4]二维 const ee = e[k] // 在二维数组里边加字段‘kda‘ t[i][k][‘kda‘] = ((ee.ave_assists + ee.ave_kills) / ee.ave_deaths).toFixed(2) } } for (let i = 0; i < t.length; i++) { const e = t[i] for (let k = 0; k < e.length; k++) { const ee = e[k] // kda的百分比 t[i][k][‘kda_width‘] = parseInt((t[i][k][‘kda‘] / (parseFloat(t[0][k][‘kda‘]) + parseFloat(t[1][k][‘kda‘]))) * 100) } for (let k = 0; k < e.length; k++) { const ee = e[k] // 两队的分经济总和 t[i][k][‘double_economy‘] = parseInt((parseFloat(t[0][k][‘ave_min_economy‘]) + parseFloat(t[1][k][‘ave_min_economy‘]))) } for (let k = 0; k < e.length; k++) { const ee = e[k] // 两队的分输出总和 t[i][k][‘double_output‘] = parseInt((parseFloat(t[0][k][‘ave_min_output‘]) + parseFloat(t[1][k][‘ave_min_output‘]))) } for (let k = 0; k < e.length; k++) { const ee = e[k] // 两队的参团率总和 t[i][k][‘double_groupRate‘] = ((parseFloat(t[0][k][‘ave_group_rate‘]) + parseFloat(t[1][k][‘ave_group_rate‘]))) } } return t } },
完整代码如下
<template> <div> <div class="all"> <div class="top"> <div v-for="(v,i) in list" :key="i" @click="changeL(i)" :class="{active: i == active}" >{{ v }}</div> </div> <!-- 蓝队 --> <!-- 盒子 --> <div> <!-- key重复声明报错 字符串拼接成不同的key --> <div class="content" v-for="(item,index) in teamPlayer[0]" :key="‘a‘+index" v-if="index == active"> <!-- 队伍头像 --> <div class="team-icon"> <img :src="item.team_icon?item.team_icon:srcO" alt /> </div> <!-- 玩家信息 --> <div class="play"> <!-- 左边 --> <div class="player"> <!-- 玩家头像 --> <!-- <img class="touxiang" :src="item.head_img?item.head_img:src" alt /> --> <div class="touxiang" :style="{backgroundImage:‘url(‘+(item.head_img)+‘)‘}"></div> <!-- 玩家名字 --> <span class="player-id">{{item.player_name}}</span> <!-- 玩家位置 --> <span class="player-wz">{{areaString[item.game_id][item.area]}}</span> </div> <!-- 右边 --> <div class="match-message"> <!-- KDA --> <div class="kda"> <!-- 进度条 --> <div class="jd-1"> <div class="jd-nei" :style="{width: item.kda_width + ‘%‘}"></div> </div> <div class="kill"> <span>KDA：{{item.ave_kills}}/{{item.ave_deaths}}/{{item.ave_assists}}</span> </div> </div> <!-- 分经济 --> <div class="jing-ji kda"> <div class="jd-1 jd-2"> <div class="jd-nei" :style="{width: (item.ave_min_economy/item.double_economy)*100+ ‘%‘}"></div> </div> <div class="money kill"> <span>分均经济：{{item.ave_min_economy}}</span> </div> </div> <!-- 分均输出 --> <div class="shu-chu kda"> <div class="jd-1 jd-3"> <div class="jd-nei" :style="{width: (item.ave_min_output/item.double_output)*100 + ‘%‘}"></div> </div> <div class="shang-hai kill"> <span>分均输出：{{item.ave_min_output}}</span> </div> </div> <!-- 参团率 --> <div class="can-tuan kda"> <div class="jd-1 jd-4"> <div class="jd-nei" :style="{width: item.ave_group_rate*100 + ‘%‘}"></div> </div> <div class="tuan-zhan kill"> <span>参团率：{{format(item.ave_group_rate*100)}}%</span> </div> </div> </div> </div> </div> <!-- 红队 --> <div class="second content" v-for="(item,index) in teamPlayer[1]" :key="‘aa‘+index" v-if="index == active"> <!-- 战队图标 --> <div class="team-icon"> <img :src="item.team_icon?item.team_icon:srcO" alt /> </div> <!-- 玩家信息 --> <div class="play"> <!-- 左边 --> <div class="player"> <!-- 玩家头像 --> <!-- <img class="touxiang" :src="item.head_img?item.head_img:src" alt /> --> <div class="touxiang" :style="{backgroundImage:‘url(‘+(item.head_img)+‘)‘}"></div> <!-- 玩家名字 --> <span class="player-id">{{item.player_name}}</span> <!-- 玩家位置 --> <span class="player-wz">{{areaString[item.game_id][item.area]}}</span> </div> <!-- 右边 --> <div class="match-message"> <!-- KDA --> <div class="kda"> <div class="jd-1"> <div class="jd-nei" :style="{width: item.kda_width + ‘%‘}"></div> </div> <div class="kill"> <span>KDA：{{item.ave_kills}}/{{item.ave_deaths}}/{{item.ave_assists}}</span> </div> </div> <!-- 分均经济 --> <div class="jing-ji kda"> <div class="jd-1"> <div class="jd-nei" :style="{width: (item.ave_min_economy/item.double_economy)*100 + ‘%‘}"></div> </div> <div class="money kill"> <span>分均经济：{{item.ave_min_economy}}</span> </div> </div> <!-- 分均输出 --> <div class="shu-chu kda"> <div class="jd-1"> <div class="jd-nei" :style="{width: (item.ave_min_output/item.double_output)*100 + ‘%‘}"></div> </div> <div class="shang-hai kill"> <span>分均输出：{{item.ave_min_output}}</span> </div> </div> <!-- 参团率 --> <div class="can-tuan kda"> <div class="jd-1"> <div class="jd-nei" :style="{width: (item.ave_group_rate*100)+ ‘%‘}"></div> </div> <div class="tuan-zhan kill"> <span>参团率：{{format(item.ave_group_rate*100)}}%</span> </div> </div> </div> </div> </div> </div> </div> </div> </template> <script> import { jsRound } from ‘@/utils/common.js‘ export default { name: ‘player‘, props: [‘data‘], data () { return { list: [‘上单‘, ‘打野‘, ‘中单‘, ‘ADC‘, ‘辅助‘], active: 0, src: require(‘@/assets/image/default.png‘), srcO: require(‘@/assets/image/teamDefault.png‘), areaString: { ‘1‘: { ‘top‘: ‘上单‘, ‘jun‘: ‘打野‘, ‘mid‘: ‘中路‘, ‘adc‘: ‘ADC‘, ‘sup‘: ‘辅助‘ }, ‘2‘: { ‘top‘: ‘一号位‘, ‘mid‘: ‘二号位‘, ‘adc‘: ‘三号位‘, ‘jun‘: ‘四号位‘, ‘sup‘: ‘五号位‘ } } } }, computed: { teamPlayer () { // 加字段 let t = this.data.teamPlayer || [] for (let i = 0; i < t.length; i++) { // e=teamPlayer[0,1] const e = t[i] for (let k = 0; k < e.length; k++) { // ee=teamPlayer[0,1][0,1,2,3,4] const ee = e[k] // 在二维数组里边加字段‘kda‘ t[i][k][‘kda‘] = ((ee.ave_assists + ee.ave_kills) / ee.ave_deaths).toFixed(2) } } for (let i = 0; i < t.length; i++) { const e = t[i] for (let k = 0; k < e.length; k++) { const ee = e[k] // kda的百分比 t[i][k][‘kda_width‘] = parseInt((t[i][k][‘kda‘] / (parseFloat(t[0][k][‘kda‘]) + parseFloat(t[1][k][‘kda‘]))) * 100) } for (let k = 0; k < e.length; k++) { const ee = e[k] // 两队的分经济总和 t[i][k][‘double_economy‘] = parseInt((parseFloat(t[0][k][‘ave_min_economy‘]) + parseFloat(t[1][k][‘ave_min_economy‘]))) } for (let k = 0; k < e.length; k++) { const ee = e[k] // 两队的分输出总和 t[i][k][‘double_output‘] = parseInt((parseFloat(t[0][k][‘ave_min_output‘]) + parseFloat(t[1][k][‘ave_min_output‘]))) } for (let k = 0; k < e.length; k++) { const ee = e[k] // 两队的参团率总和 t[i][k][‘double_groupRate‘] = ((parseFloat(t[0][k][‘ave_group_rate‘]) + parseFloat(t[1][k][‘ave_group_rate‘]))) } } return t } }, methods: { changeL (i) { this.active = i }, // 四舍六入 .toFixed() // 取两位小数 format (t) { return jsRound(t, 2) } } } </script> <style lang="less" scoped> .all { width: 420px; height: 508px; background: rgba(51, 51, 51, 1); .top { padding: 20px 20px 20px 16px; display: flex; width: 384px; height: 36px; div { font-size: 14px; background: rgba(40, 40, 40, 1); width: 76px; height: 36px; display: inline-block; text-align: center; line-height: 36px; color: #ccc; margin-left: 1px; cursor: pointer; } .active { background: #505050; } } .content { width: 400px; height: 194px; font-size: 12px; // background-color: #ccc; .team-icon { width: 20px; height: 20px; // background-color: pink; margin-left: 100px; img { width: 100%; height: 100%; } } .play { width: 400px; height: 164px; margin-top: 10px; display: flex; .player { width: 100px; height: 164px; // background-color: pink; padding-top: 30px; box-sizing: border-box; // 头像用背景图 .touxiang { margin: 0 auto; // display: block; // width: 60px; // height: 60px; // background: rgba(153, 153, 153, 1); // border-radius: 30px; width: 60px; height: 60px; background: rgba(153, 153, 153, 1); border-radius: 50%; background-size: cover; background-repeat: no-repeat; background-position: center; } .player-id { display: block; text-align: center; line-height: 36px; color: #ccc; } .player-wz { display: block; text-align: center; color: #ccc; } } .match-message { width: 300px; height: 164px; color: #ccc; // background-color: yellowgreen; .kda { width: 300px; height: 41px; .jd-1 { width: 300px; height: 6px; background-color: #999999; .jd-nei { height: 6px; background-color: #23A8F6; } } .kill { width: 300px; margin-top: 10px; // color:#ccc; } } } } } .second { margin-top: 20px; .match-message { .jd-1 { background-color: #999999; } .jd-nei { height: 6px; background-color: #f6233f !important; } } } } </style>
五丶有关src图片拉伸
有时我们从后台返回的数据中拿到的图片会很大，就会有拉伸的问题，这是时候我们改为背景图就可以了
<div class="touxiang" :style="{backgroundImage:‘url(‘+(item.head_img)+‘)‘}"></div>
样式：上面完整的代码有用到
.touxiang {
margin: 0 auto;
width: 60px;
height: 60px;
background: rgba(153, 153, 153, 1);
border-radius: 50%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
六丶vue中的移入移出，以及滚动到一定高度显示和点击置顶
滚动条滚动往下距离大于60时显示如图
具体代码如下
<template> <div> <div class="all" v-if="btnFlag"> <div class="jwplay" @mouseover="mouseOver" @mouseleave="mouseLeave"> <div class="wechat" :style="active"> <img src="../../assets/image/default.png" alt /> </div> <p>嘻嘻</p> <p>APP</p> </div> <div class="arrowTip" @mouseover="one" @mouseleave="two" ref="cc"> <i class="jiantou font_family icon-shouqi" :style="aa"></i> <span :style="bb" @click="toTop">你好</span> </div> </div> </div> </template> <script> export default { name: ‘wechat‘, data () { return { active: ‘display:none‘, aa: ‘display:block‘, bb: ‘display:none‘, btnFlag: false//v-if让它一开始不显示 } }, // window对象，所有浏览器都支持window对象。它表示浏览器窗口，监听滚动事件 mounted () { window.addEventListener(‘scroll‘, this.scrollToTop) }, destroyed () { window.removeEventListener(‘scroll‘, this.scrollToTop) }, methods: { mouseOver () { this.active = ‘display:block‘ }, mouseLeave () { this.active = ‘display:none‘ }, one () { this.aa = ‘display:none‘ this.bb = ‘display:block‘ var dd = this.$refs.cc dd.style.backgroundColor = ‘#ED5019‘ }, two () { this.bb = ‘display:none‘ this.aa = ‘display:block‘ var dd = this.$refs.cc dd.style.backgroundColor = ‘#222222‘ }, // 点击图片回到顶部方法，加计时器是为了过渡顺滑 toTop () { const that = this let timer = setInterval(() => { let ispeed = Math.floor(-that.scrollTop / 5) document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed if (that.scrollTop === 0) { clearInterval(timer) } }, 16) }, // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏， scrollToTop () { const that = this //this指向问题 let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop that.scrollTop = scrollTop if (that.scrollTop > 60) { that.btnFlag = true } else { that.btnFlag = false } } } } </script> <style lang="less" scoped> .all { width: 180px; height: 320px; // background-color: pink; position: fixed; right: 100px; top: 564px; .jwplay { .wechat { position: absolute; top: -200px; left: 0px; box-sizing: border-box; width: 180px; height: 190px; background:rgba(26,38,59,1); padding: 10px 10px; img { display: block; width: 160px; height: 160px; // background: yellow; } } box-sizing: border-box; width: 60px; height: 60px; background: rgba(237, 80, 25, 1); border-radius: 6px; color: #fff; text-align: center; margin: 0 auto; margin-top: 2px; padding-top: 12px; cursor: pointer; p { position: relative; font-size: 12px; } } .arrowTip { width: 60px; height: 60px; background:rgba(34,34,34,1); border-radius: 8px; margin: 0 auto; margin-top: 8px; box-sizing: border-box; padding-top: 18px; cursor: pointer; i{ font-size: 24px; display: block; text-align: center; // background-color: green; margin: 0 auto; color: #fff; } span{ position: absolute; top: 88px; left: 74px; color: #fff; } } } </style>
标签：es6 seo sha 技术 padding 设置图 str 遍历 password
原文地址：https://www.cnblogs.com/LiuRunMin/p/11832111.html
