目录
vue2:
以下都是vue2用到的内容
关于写聊天室：
const chartlist = {
status: 200,
data: [
//
{
id: 1,
ava: 'a',
name: '王伟',
objlist: [
{
obj: '1认面比会气维角意感气件年商做深度却。西根所后清千何养治日加民金新论它力酸。十府量权子龙长率低这至省外也.',
user: '1火条斯发采路走科数回速派号员就。高证他格角般但革要导路决世南江还院。解除金列西得选有图出它上金精科值。'
},
{
obj: '1去多参做需制毛军次参照九么。育门去文干改于产展两工达接器基值。',
user: '1物月产位包会三金因华该过才样。成任报关风话适容存收量料候非。'
},
{
obj: '1又油周被习成上农华如多白面声太。眼群上厂列决日深低性型细在究光太。济知写美公质等格学五府层事道民。',
user: '1打及采记如论会们据入石集然头接光保须。'
}
]
}
]
}有好多种办法，
<div class="right-top" id="righttop">
<div v-for="(item, index) in showlist.objlist" :key="index">
<div class="right-one">
<div class="right-ava">{{showlist.ava}}</div>
<div class="right-box">
<div class="right-name">{{showlist.name}}</div>
<div class="right-com">{{item.obj}}</div>
</div>
</div>
<div class="right-two">
<div class="two-box">
<div class="two-name">Cynthia Gonzalez</div>
<div class="two-com">{{item.user}}</div>
</div>
<div class="two-ava">a</div>
</div>
</div>
</div>
<div class="right-bottom">
<div class="right-a">
<input type="text" v-model="inputval">
<el-button type="primary" icon="el-icon-position" circle @click="addlist"></el-button>
</div>
</div>因为这个项目是前端独立完成，自己就在网上看了一下就把对话写一个对象了，之前按照自己逻辑写是分两个数组结果是各循环各的。
获取新消息视图，聊天消息往上推（没设置之前，最新消息都需要自己往下滑动才可以看到）
updated () {
const ele = document.querySelector('#righttop')
ele.scrollTop = ele.scrollHeight
}加一个对方随机推送消息的随机数据
const list = ['噫吁嚱，危乎高哉！蜀道之难，难于上青天！', '蚕丛及鱼凫，开国何茫然',
'尔来四万八千岁，不与秦塞通人烟', '西当太白有鸟道，可以横绝峨眉巅', '地崩山摧壮士死，然后天梯石栈相钩连', '上有六龙回日之高标，下有冲波逆折之回川',
'黄鹤之飞尚不得过，猿猱欲度愁攀援', '青泥何盘盘，百步九折萦岩峦', '扪参历井仰胁息，以手抚膺坐长叹。', '问君西游何时还？畏途巉岩不可攀', '但见悲鸟号古木，雄飞雌从绕林间。',
'又闻子规啼夜月，愁空山。']
var index = parseInt(Math.random() * 12)
return list[index]vue项目中导出表格
npm install --save xlsx file-saver
创建文件
// 在新创建的文件下引入
// 导出表格
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
export default {
// 导出Excel表格
exportExcel (name, tableName) {
// name表示生成excel的文件名 tableName表示表格的id
var sel = XLSX.utils.table_to_book(document.querySelector(tableName))
var selIn = XLSX.write(sel, { bookType: 'xlsx', bookSST: true, type: 'array' })
try {
FileSaver.saveAs(new Blob([selIn], { type: 'application/octet-stream' }), name)
} catch (e) {
if (typeof console !== 'undefined') console.log(e, selIn)
}
return selIn
}
}
刚开始用如果只是
import XLSX from 'xlsx'
会报一个错误
Cannot read properties of undefined (reading 'utils')"
只要加上 * as 就可以了
这就是踩的坑
// 在main.js中引入
import htmltoexcel from './excel/htmltotxcel'
Vue.prototype.$htmltoexcels = htmltoexcel
在要导出的表格加id
定义一个方法
exportexcel () {
this.$htmltoexcels.exportExcel('mocj设置.xlsx', '#vcgo')
}最后给按钮添加方法
使用轮播展示数据
显示效果是往上一直无缝滚动
//安装vue-seamless-scroll插件
npm install vue-seamless-scroll --save
//在mian.js文件中引入
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
<div class="scroll-one two">
<vue-seamless-scroll :data="twolist" :class-option="classOption">
<div class="scroll-one-top">
<span>组名</span>
<span>组长</span>
<span>年龄</span>
<span>评分</span>
</div>
<ul>
<li v-for="(item,index) in twolist" :key="index">
<span>{{item.group}}</span>
<span>{{item.captain}}</span>
<span>{{item.age}}</span>
<span>{{item.integral}}</span>
</li>
</ul>
</vue-seamless-scroll>
</div> computed: {
classOption () {
return {
step: 2, // 数值越大速度滚动越快
limitMoveNum: 3, // 开启无缝滚动的数据量 设置(数值<=页面展示数据条数不滚)(超过页面展示条数滚动)
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 40,
waitTime: 1 // 单行停顿时间(singleHeight,waitTime)
}
}
}其他配置可以查看文档chenxuan0000
重置样式
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td ,textarea,input { margin:0; padding:0; }
address,cite,dfn,em,var, i {font-style:normal;}
body {font-size: 16px; line-height: 1.5; font-family:'Microsoft Yahei','simsun','arial','tahoma'; color: #222; background: #fff; }
table { border-collapse:collapse; border-spacing:0; }
h1, h2, h3, h4, h5, h6, th { font-size: 100%; font-weight: normal; }
button,input,select,textarea{font-size:100%;}
fieldset,img{border:0;}
a { text-decoration: none; color: #666; background: none }
ul, ol { list-style: none; }
:focus{ outline:none;}
.clearfix{ clear: both; content: ""; display: block; overflow: hidden }
.clear{clear: both;}
.fl{ float: left; }
.fr{float: right;}在data中引入图片路径问题
之前没注意过引入图片问题，现在好好回顾以下
data(){
return{
img: '../assets/img/1.jpg'
}
}
// 这种引入后图片不显示，没有报错问题
data(){
return{
img: require('../assets/img/1.jpg')
}
}
// 正确显示全局事件总线的运用
// main.js中
new Vue({
router,
store,
render: h => h(App),
beforeCreate () {
Vue.prototype.$bus = this // 事件总线
}
}).$mount('#app')
// 在这里定义<el-color-picker v-model="color2" @change="status(1)"></el-color-picker>
status (e) {
// console.log('1')
if (e === 1) {
this.$bus.$emit('changecolor', this.color2)
}
}
// 相当于 $emit this.$bus.$on('changecolor', data => {
// console.log(data)
this.bgcolor = data
})
// 可以写到methods或者mounted中vue运行命令的修改
（小知识不是很重要）
// 原先
npm run serve => npm run dev
只需要在scripts里面的第一行键设置为dev即可
如果运行npm run serve
运行npm run dev
动态背景
<view class="nav" :style="{'backgroundImage':'url('+userinfo.bgimg+')' }">仅做参考
346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
