您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
vue项目第三天图集预览与评论
发布时间：2020-05-06 20:40:10编辑：雪饮阅读（）
目标1：图集的预览
之前在图文分享的详情页中以宫格方式展示了某个图集下面的所有图片，但现在有个需求是点击某个图片后就能全屏预览，这个需求看似很容易直接放大即可，但是这样比较随意，我们弄一个专业的组件来解决不仅好看而且还有其它额外的功能及装饰。
第一步先安装vue-preview组件
npm i vue-preview –S
然后src/main.js中引入该组件
//引入vue-preview
import VuePreview from 'vue-preview';
Vue.use(VuePreview);
然后图文详情页的图集列表元素修改为
<div class="imgBox">
<my-ul>
<vue-preview :slides="imgs"></vue-preview>
</my-ul>
</div>
那么之前获取图片缩略图信息接口返回值时候追加上我们这个组件所需要的参数
//获取图片缩略图信息
this.$axios.get(`/api/getthumimages/${pid}`)
.then(res=>{
this.imgs=res.data.message;
/*
给vue-preview组件准备参数
src大图地址，msrc小图地址
w大图浏览宽度，h大图浏览高度
*/
this.imgs.forEach(img=>{
img.w=document.body.clientWidth;
img.h=document.body.clientHeight;
img.msrc=img.src;
})
})
.catch(res=>{
console.log(res);
});
那么最终效果如
目标2：评论列表及发表评论功能 在该页面末尾处加上评论组件 新建评论组件如 此处第一个标红是文本区域的双向绑定，用于发表评论时提交时候直接拿到数据而不是通过dom去获取 第二个标红mt-button这个在mint-ui官网有具体使用说明 relTime这里是使用了一个相对时间格式化过滤器，该过滤器在src/main.js中定义如 toast也是mint-ui的js功能 目标3：解决moment.locale(‘zh-cn’)无效 关于上面的relTime这里使用moment组件再加上自己的封装，但是国际化为zh-cn时仍旧是英文提示 百度了各种结果唯有下面这个结果可以解决，可能真如他们所说我不在node环境(如果真是这样，那么node也太不要脸了) 那么解决方案如 解决之后的效果如 <div class="photo-desc">
<p v-html="photoInfo.content"></p>
</div>
<comment :cid="$route.params.id"></comment><template>
<div class="tmpl">
<div class="photo-bottom">
<ul>
<li class="text-comment">
<textarea v-model="content"></textarea>
</li>
<li>
<mt-button type="primary" size="large" @click="sendMsg">发表评论</mt-button>
</li>
<li class="photo-comment">
<div>
<span>评论列表</span>
<span>{{total}}条评论</span>
</div>
</li>
</ul>
<ul class="comment-list">
<li v-for="(msg,index) in msgs" :key="index">{{msg.user_name}}:{{msg.content}} {{msg.add_time | relTime}}</li>
</ul>
<mt-button size="large" type="danger" plain @click="loadMore">加载更多</mt-button>
</div>
</div>
</template>
<script>
export default {
name: 'comment',
props:['cid'],
data(){
return {
msgs:[],
total:0,
content:"",
page:1
}
},
created () {
this.commentList(1);
},
methods:{
sendMsg(){
this.$axios.post(`/api/postcomment/${this.cid}`,`content=${this.content}`)
.then(res=>{
//刷新评论列表
this.commentList(1,1,'refresh')
})
.catch(res=>{
console.log(res);
});
},
commentList(page,type,mode){
this.$axios.get(`/api/getcomments/${this.cid}?page=${page}`)
.then(res=>{
var message=res.data.message;
if(message.data.length>0){
if(mode=="refresh"){
this.msgs=message.data;
}
else{
this.msgs=this.msgs.concat(message.data);
}
this.total=message.total;
this.page=page;
}
else{
if(type==2){
this.$toast({message:"没有更多了",iconClass:'icon icon-success'});
}
}
})
.catch(res=>{
console.log(res);
})
},
loadMore:function () {
this.commentList(this.page+1,2,'append');
}
}
}
</script>
<style scoped>
.photo-comment > div span:nth-child(1){
float: left;
font-weight: bold;
margin-left: 5px;
}
.photo-comment > div span:nth-child(2){
float: right;
}
ul{
padding:0;
margin: 0;
}
li{
list-style: none;
}
.text-comment{
display: flex;
justify-content: center;
}
.text-comment textarea{
width: 90%;
height: 50px;
margin-bottom: 10px;
}
.comment-list{
clear: both;
}
</style>//评论列表的时间(相对时间)过滤器
Vue.filter('relTime',function(time){
return moment(time).fromNow()
})
//定义全局过滤器
import moment from 'moment'
moment.locale('zh-cn', {
months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
weekdaysMin: '日_一_二_三_四_五_六'.split('_'),
longDateFormat: {
LT: 'Ah点mm分',
LTS: 'Ah点m分s秒',
L: 'YYYY-MM-DD',
LL: 'YYYY年MMMD日',
LLL: 'YYYY年MMMD日Ah点mm分',
LLLL: 'YYYY年MMMD日ddddAh点mm分',
l: 'YYYY-MM-DD',
ll: 'YYYY年MMMD日',
lll: 'YYYY年MMMD日Ah点mm分',
llll: 'YYYY年MMMD日ddddAh点mm分'
},
meridiemParse: /凌晨|早上|上午|中午|下午|晚上/,
meridiemHour: function (h, meridiem) {
let hour = h;
if (hour === 12) {
hour = 0;
}
if (meridiem === '凌晨' || meridiem === '早上' ||
meridiem === '上午') {
return hour;
} else if (meridiem === '下午' || meridiem === '晚上') {
return hour + 12;
} else {
// '中午'
return hour >= 11 ? hour : hour + 12;
}
},
meridiem: function (hour, minute, isLower) {
const hm = hour * 100 + minute;
if (hm < 600) {
return '凌晨';
} else if (hm < 900) {
return '早上';
} else if (hm < 1130) {
return '上午';
} else if (hm < 1230) {
return '中午';
} else if (hm < 1800) {
return '下午';
} else {
return '晚上';
}
},
calendar: {
sameDay: function () {
return this.minutes() === 0 ? '[今天]Ah[点整]' : '[今天]LT';
},
nextDay: function () {
return this.minutes() === 0 ? '[明天]Ah[点整]' : '[明天]LT';
},
lastDay: function () {
return this.minutes() === 0 ? '[昨天]Ah[点整]' : '[昨天]LT';
},
nextWeek: function () {
let startOfWeek, prefix;
startOfWeek = moment().startOf('week');
prefix = this.diff(startOfWeek, 'days') >= 7 ? '[下]' : '[本]';
return this.minutes() === 0 ? prefix + 'dddAh点整' : prefix + 'dddAh点mm';
},
lastWeek: function () {
let startOfWeek, prefix;
startOfWeek = moment().startOf('week');
prefix = this.unix() < startOfWeek.unix() ? '[上]' : '[本]';
return this.minutes() === 0 ? prefix + 'dddAh点整' : prefix + 'dddAh点mm';
},
sameElse: 'LL'
},
ordinalParse: /\d{1,2}(日|月|周)/,
ordinal: function (number, period) {
switch (period) {
case 'd':
case 'D':
case 'DDD':
return number + '日';
case 'M':
return number + '月';
case 'w':
case 'W':
return number + '周';
default:
return number;
}
},
relativeTime: {
future: '%s内',
past: '%s前',
s: '几秒',
m: '1 分钟',
mm: '%d 分钟',
h: '1 小时',
hh: '%d 小时',
d: '1 天',
dd: '%d 天',
M: '1 个月',
MM: '%d 个月',
y: '1 年',
yy: '%d 年'
},
week: {
// GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效
dow: 1, // Monday is the first day of the week.
doy: 4 // The week that contains Jan 4th is the first week of the year.
}
});
关键字词：vue,图片,全屏预览,vue-preview,评论列表,发表评论,moment.locale,ch-cn,无效
上一篇：vue项目第三天
下一篇：vue项目第四天商品列表、购物车