Vue项目实战六——热销推荐组件开发
时间:2019-02-19
本文章向大家介绍Vue项目实战六——热销推荐组件开发,主要包括Vue项目实战六——热销推荐组件开发使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
新建recommend组件,代码部分
注意点,在我们使用ellipsis()函数样式时,超出范围的字不会出现省略号,此时需要在item-info中加入min-width: 0,保证内容不超出外层容器,才会显示省略号
<template>
<div>
<div class="title">
热销推荐
</div>
<ul>
<li class="item" v-for="item of itemList" :key="item.id">
<div class="item-img-wrapper">
<img class="item-img" :src="item.imgUrl" :alt="item.title">
</div>
<div class="item-info">
<p class="item-title">{{item.title}}</p>
<p class="item-desc">{{item.desc}}</p>
<button class="item-button">查看详情</button>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HomeRecommend',
data: function () {
return {
itemList: [{
id: '0001',
imgUrl: 'http://img1.qunarzz.com/sight/p0/1810/cc/cc47164357acbeb5a3.water.jpg_200x200_151f0405.jpg',
title: '杭州云曼温泉',
desc: '1127条评论'
},
{
id: '0002',
imgUrl: 'http://img1.qunarzz.com/sight/p0/1810/cc/cc47164357acbeb5a3.water.jpg_200x200_151f0405.jpg',
title: '杭州云曼温泉',
desc: '1127条评论'
},
{
id: '0003',
imgUrl: 'http://img1.qunarzz.com/sight/p0/1810/cc/cc47164357acbeb5a3.water.jpg_200x200_151f0405.jpg',
title: '杭州云曼温泉',
desc: '1127条评论'
}
]
}
}
}
</script>
<style lang="stylus" scoped>
@import "~styles/mixins.styl"
.title
margin-top: 0.2rem
height: 0.8rem
line-height: 0.8rem
background-color: #eee
.item
overflow: hidden
display: flex
height: 2.4rem
//background-color: red
.item-img
width: 2.2rem
height: 2.2rem
padding: 0.1rem
.item-info
flex: 1
box-sizing: border-box
margin: .2rem
min-width: 0 //保证内容不超出外层容器
//background-color: green
.item-title
margin-top: .2rem
font-size: .32rem
line-height: .44rem
ellipsis()
.item-desc
font-size: .26rem
margin-top: .2rem
ellipsis()
.item-button
margin-top: .2rem
background-color: yellow
border-radius: .1rem
font-size: .26rem
width: 1.2rem
height: .45rem
</style>
最终效果
- SpringBoot开发案例之整合mail队列篇
- SpringBoot开发案例之整合日志管理
- SpringBoot开发案例之奇技淫巧
- SpringBoot开发案例之整合Spring-data-jpa
- SpringBoot开发案例之整合定时任务(Scheduled)
- SpringBoot开发案例之整合mail发送服务
- SpringBoot开发案例之整合mongoDB
- Docker学习之CentOS 7安装配置
- Docker学习之搭建JavaWeb环境
- Docker学习之搭建JavaWeb环境进阶篇
- Docker学习之网络模式配置
- Docker学习之SSH连接docker容器
- Docker学习之搭建Nginx容器服务
- Docker学习之搭建MySql容器服务
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 聊到JVM(还怕面试官问JVM吗?)
- Android.location.Address类方法获取GPS定位信息
- Python二叉树详解笔记
- 《剑指offer》第七天:二叉树的下一个结点
- 后台登录微信并定时发送消息,消息包括农历、阴历、天气;自动监测是否断线,支持邮箱发送二维码登录;适合于挂在服务器上运行
- 《剑指offer》第八天:二叉树的下一个结点
- 基于python和OpenCV构建智能停车系统
- nvm管理工具
- 基于OpenCV的图像卡通化
- shadertoy绘图
- 单基因生信分析流程(6)单基因相似性分析
- 三阴性乳腺癌提取和分析
- 一日一技:更友好的格式化数据提取方案
- 『深度应用』YoloV5 RTX2080Ti TensorRT与PyTorch速度对比
- 0797-使用HDP或CDP的Atlas采集CDH6的元数据和血缘