一、定位问题
按照视频写代码时,发现元素“5个“”定位不对,如下图

正常位置为

还以为是哪里写错了,仔细研究了下,需要在父div上加relative。

position:relative/absolute的父(祖先)节点的padding-box的区进行定位(忽略文字),找不到符合条件的父(祖先)节点,则相对浏览器窗口进行定位。没有设置了TRBL则默认浮动,默认浮动在父级节点的content-box区。

<style lang="stylus" rel="stylesheet/stylus">
@import "../../common/stylus/mixin"
.header
position: relative
color: #fff
background: #999
.content-wrapper
position: relative
font-size 0px
padding: 24px 12px 18px 24px

二、显示区域文字超出显示...

white-space: nowrap
overflow: hidden
text-overflow: ellipsis
font-size:0 影响省略号,不能使用
另外不显示文字
<div class="bulletin-wrapper" @click="showDetail">

因为还没定义showDetail,所以要暂时先把

 @click="showDetail"删掉。

三、模糊背景图片

<style lang="stylus" rel="stylesheet/stylus">
@import "../../common/stylus/mixin"
.header
position: relative
color: #fff
background: rgba(7, 17, 27, 0.5)
.content-wrapper
 .background
position: absolute
top: 0
left: 0
width: 100%
height: 100%
z-index: -1
filter: blur(10px)
<div class="background">
<img :src="seller.avatar" width="100%" height="100%">
</div>

通过一个半透明的颜色层覆盖在一个滤镜模糊图片上实现。

四、点击事件

<div v-if="seller.supports" class="support-count"  @click="showDetail">
<span class="count">{{seller.supports.length}}个</span>
<i class="icon-keyboard_arrow_right"></i>
</div>
<div class="detail" v-show="detailShow"></div>

detailShow相当于一个开关量

export default {
props: {
seller: {
type: Object
}
},
name: 'Vheader',
data() {
return {
detailShow: false
}
},
methods: {
showDetail() {
this.detailShow = true
},
hideDetail() {
this.detailShow = false
}
}
}

这样就可以点击时就可以显示detail

五、显示关闭按钮

需要注意一点的是,要在main.js中导入,注意红色部分,否则不显示,另外要./,否则出错

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import VueResource from 'vue-resource'
import './common/stylus/index.styl' Vue.config.productionTip = false
Vue.use(VueResource)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

另外为了实现自适应内容,要在容器div上加clearfix

VUE2.0 饿了吗视频学习笔记(六):定位问题、文字显示、模糊背景图片、点击事件的更多相关文章

  1. VUE2.0 饿了吗视频学习笔记(四):颜色、跳转、设置、vue-resource

    https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中 1.设置选中项颜色 <template> <div id=" ...

  2. VUE2.0 饿了吗视频学习笔记(七-终):compute,循环,flex,display:table

    一.star组件使用到了computed属性 computed相当于属性的一个实时计算,当对象的某个值改变的时候,会进行实时计算. computed: { starType() { return 's ...

  3. VUE2.0 饿了吗视频学习笔记(二):新版本添加路由和显示Header

    https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中 webpack.dev.conf.js中添加两段代码 'use strict' cons ...

  4. VUE2.0 饿了吗视频学习笔记(一):VUE示例data.json

    https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中有的同学找不到data.json,以下是data.json内容 { "selle ...

  5. VUE2.0 饿了吗视频学习笔记(五):父子对象传递、显示图片

    一.父子组件之间对象传递 1.app.Vue中的v-header 中加入 v-bind:seller="seller" template> <div id=" ...

  6. VUE2.0 饿了吗视频学习笔记(三):VUE2.0取消了v-link

    https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中 写法如下 <div class="tab-item"> ...

  7. vue2.0 饿了么项目学习总结

    最近在GitHub上发现一个基于vue2.0的饿了么项目.本着互联网的分享精神,现在将我自己所理解的,所总结的经验分享给大家.本篇文字我将从学习的角度向大家分享. 在学习本项目之前我已经将vue2.0 ...

  8. 基础学习笔记之opencv(6):实现将图片生成视频

    基础学习笔记之opencv(6):实现将图片生成视频 在做实验的过程中.难免会读视频中的图片用来处理,相反将处理好的图片又整理输出为一个视频文件也是非经常常使用的. 以下就来讲讲基于opencv的C+ ...

  9. Asp.net core 2.0.1 Razor 的使用学习笔记(五)

    按说这里应该写关于Role角色类的笔记,但是我还没时间实验这块,所以等以后我搞定了再来分享.现在先写其他部分. Asp.net core 2.0.1 Razor 的使用学习笔记——建立模型 按照微软官 ...

随机推荐

  1. PHP的安装,编译,扩展工具

    1.基本容易混淆的概念 pecl php的社区贡献扩展库,全称为PHP Extension Community Library, 是php的底层库, 使用C语言编写 pear php的应用扩展库,全称 ...

  2. Bootstrap按钮式下拉菜单

    前面的话 按钮式下拉菜单仅从外观上看,和下拉菜单效果基本上是一样的.不同的是普通的下拉菜单是block元素,而按钮式下拉菜单是inline-block元素.本文将详细介绍Bootstrap按钮式下拉菜 ...

  3. BZOJ3732Network——kruskal重构树+倍增+LCA/最小生成树+倍增

    题目描述 给你N个点的无向图 (1 <= N <= 15,000),记为:1…N. 图中有M条边 (1 <= M <= 30,000) ,第j条边的长度为: d_j ( 1 & ...

  4. C# TreeView 连续点击 不触发AfterCheck事件

    创建一个类 TreeView2 namespace System.Windows.Forms { public class TreeView2 : TreeView { protected overr ...

  5. easyui 功能介绍

    最近使用easyui, 下面,我介绍下常用功能: //绑定Product总类型 $('#gdv_ProductParentType').datagrid({ url: '../api/BindData ...

  6. Java若不为空则取其值的lambda表达式

      原本的写法是: Map<String, Object> map = new HashMap<>(); String text = ""; if(map. ...

  7. day12-13 文件操作b模式

    为什么需要用到二进制的形式?我们默认的r w a 其实是rt wt at 即txt模式如果是图片,视频,音频,是无法用txt打开的,只能用b模式处理 b 模式是以字节形式打开 f = open(&qu ...

  8. MT【205】寻找对称中心

    函数$f(x)=\dfrac{x}{x+1}+\dfrac{x+1}{x+2}+\cdots+\dfrac{x+2018}{x+2019}$ 的图像的对称中心_____ 提示:根据定义域可知如果有对称 ...

  9. 一种使用emwin库函数导致hardfault的情况

    @2018-08-27 使用函数 WM_SendMessageNoPara(hWin_MainTask, WM_INIT_DIALOG),调试至此处进入hardfault,经查是由于hWin_Main ...

  10. luogu1072 [NOIp2009]Hankson的趣味题 (数学+STL::set)

    一个JSB做法 由$\frac{x*b0}{gcd(x,b0)}=b1$,可得$\frac{x}{gcd(x,b0)}=\frac{b1}{b0}$ 设$b2=\frac{b1}{b0}$ 所以对$b ...