vue2.0:(八)、外卖App弹窗部分知识点总结

本篇文章是对外卖App弹窗部分知识点的总结。

知识点一:如何从接口取出不同的图片。

  

  答:

    1、header.vue:

    

    代码:

      <ul v-if="seller.supports" class="supports">
          <li class="support-item" v-for="(item,index) in seller.supports">
              <span class="icon" :class="classMap[seller.supports[index].type]"></span>           <!---------------point1-2>
              <span class="text">{{seller.supports[index].description}}</span>
          </li>
      </ul><script>  export default{        .......                                                /*-----------------其他的先省略*/        created() {            this.classMap = [‘decrease‘,‘discount‘,‘special‘,‘invoice‘,‘guarantee‘];           <!---------------point1-1>        }     .......                                              /*-----------------其他的先省略*/    }</script>

   json数据格式:

{
  "seller": {
    "name": "粥品香坊(回龙观)",
    "description": "蜂鸟专送",
    "deliveryTime": 38,
    "score": 4.2,
    "serviceScore": 4.1,
    "foodScore": 4.3,
    "rankRate": 69.2,
    "minPrice": 20,
    "deliveryPrice": 4,
    "ratingCount": 24,
    "sellCount": 90,
    "bulletin": "粥品香坊其烹饪粥料的秘方源于中国千年古法,在融和现代制作工艺,由世界烹饪大师屈浩先生领衔研发。坚守纯天然、0添加的良心品质深得消费者青睐,发展至今成为粥类的引领品牌。是2008年奥运会和2013年园博会指定餐饮服务商。",
    "supports": [
      {
        "type": 0,
        "description": "在线支付满28减5"
      },
      {
        "type": 1,
        "description": "VC无限橙果汁全场8折"
      },
      {
        "type": 2,
        "description": "单人精彩套餐"
      },
      {
        "type": 3,
        "description": "该商家支持发票,请下单写好发票抬头"
      }      ....................................(其他省略)

  css:

  tip 1: 方法是,在li循环里面更改相应的class名字。

  tip 2: 在script里面设置一个classMap,里面的class名字分别对应着data.json里面的图片。排序相同。如:point1-1

      tip 3: 给span标签绑定class   :class.来取出每个图片的图片的type。即,给每个span绑定循环时添加上的class名字。如:point1-2

  tip 4:在css里面,给每个class名字设置相应的图片。

  知识点二:如何让背景模糊。

filter:blur(10px);  

  知识点三:让弹框显示隐藏。

  html:

代码:

<transition name="fade">                                     <!----------------------point2-4>
            <div v-show="detailShow" class="detail">                     <!----------------------这里的v-show有用>
                <div class="detail-wrapper clearfix">
                    <div class="detail-main">
                        <h1 class="name">{{seller.name}}</h1>
                        <div class="star-wrapper">
                            <star :size="48" :score = "seller.score"></star>
                        </div>
                        <div class="title">
                            <div class="line"></div>
                            <div class="text">优惠信息</div>
                            <div class="line"></div>
                        </div>
                        <ul v-if="seller.supports" class="supports">
                            <li class="support-item" v-for="(item,index) in seller.supports">
                                <span class="icon" :class="classMap[seller.supports[index].type]"></span>
                                <span class="text">{{seller.supports[index].description}}</span>
                            </li>
                        </ul>
                        <div class="title">
                            <div class="line"></div>
                            <div class="text">商家公告</div>
                            <div class="line"></div>
                        </div>
                        <div class="bulletin">
                            <p class="content">{{seller.bulletin}}</p>
                        </div>
                    </div>
                </div>
                <div class="detail-close" @click="hideDetail">                          <!----------------------这里的是给点击事件click加一个要执行的函数>
                    <i class="icon-close">*</i>
                </div>
            </div>
        </transition>

  <script>:

  

代码:

data(){
  return {
     detailShow:false    <!--------------------point-2-1
  };
},
methods:{
   showDetail(){
       this.detailShow = true;
   },
   hideDetail(){
      this.detailShow = false;    <!--------------------point-2-2
   }
},

  css:如果觉得显示隐藏太过生硬,要加渐变显示隐藏,则还需要如下css:

.detail{
            position:fixed;
            top:0;
            left:0;
            z-index: 100;
            width:100%;
            height:100%;
            overflow:auto;
            backdrop-filter:blur(10px);
            opacity:1;
            background:rgba(7,17,27,0.8); /* //渐变结束后的最终效果 */                  point-2-3
            &.fade-enter-active, &.fade-leave-active{/* //渐变的进入和退出都历时0.5s */
                transition:all 0.5s;
            }
            &.fade-enter, &.fade-leave-to{/* //定义进入前和退出后样式,即透明无色背景。 */
                opacity:0;
                background:rgba(7,17,27,0);
            }
}

  step1:先给要显示隐藏的标签一个v-show="detailShow"。然后,通过控制点击事件,来改变detailShow的true或者false值,来回切换。

  step2:在data里面先给detailshow一个默认值。默认不显示,就是false。如point-2-1

   step3:通过绑定click事件来改变detailShow的true或者false值。如point-2-2

   step4:实现渐变显示隐藏需两个步骤:

    point2-4 和上图的point2-3

    point2-4是把要隐藏的div用 transition 标签包起来。point2-3是设置渐变前,时,后的效果。

原文地址:https://www.cnblogs.com/beyrl-blog/p/8743789.html

时间: 2024-10-28 16:44:05

vue2.0:(八)、外卖App弹窗部分知识点总结的相关文章

Vue.js高仿饿了么外卖App 前端框架Vue.js 1.0升级2.0

课程目录:第1章 课程简介介绍课程的学习目标和学习内容.第2章 Vuejs介绍从前端开发趋势分析开始,引入 MVVM 开发框架和 Vue.js,接着对比流行框架Angular 和 React,最后详细介绍 Vue.js 的核心思想-数据驱动和组件化.第3章 Vue-cli 开启 Vuejs 项目介绍 Vue 项目的脚手架,如何安装,对脚手架生成的目录文件做介绍,介绍 Vue 组件的编写方法,最后运行 demo 项目并介绍 webpack 构建脚本来说明 demo 的运行原理.第4章 项目实战-准

基于vue2.0的一个豆瓣电影App

1.搭建项目框架 使用vue-cli 没安装的需要先安装 npm intall -g vue-cli 使用vue-cli生成项目框架 vue init webpack-simple vue-movie 然后一路回车 接着 进入项目目录 cd vue-movie 然后安装项目依赖包 cnpm install 没安装cnpm的先执行这个命令 npm install -g cnpm --registry=https://registry.npm.taobao.org 接着 npm run dev 看到

Vue2.0 全家桶开发的网页应用(参照吾记APP)

github链接 借鉴吾记APP,使用 vue2.0+vue-router+vuex 为主要技术栈,elementui做为ui框架,多模块 spa 模式,webpack2.0 负责模块打包,gulp 负责处理静态资源打包.压缩,欢迎打赏star!!! 安利一下 吾记前端构建流程 本地环境准备 安装node: * https://nodejs.org/en/download/ ("node": ">=6.0",对应需要升级node-sass,不然使用不了!) 配

基于vue2.0的在线电影APP,

基于vue2.0构建的在线电影网[film],webpack + vue + vuex + vue-loader + keepAlive + muse-ui + cordova 全家桶,cordova 打包成APP 从零开始搭建,适合新手练手参考.GitHub地址,api来源于网上,仅供开发参考之用,禁用于商业,否则后果自负. 在线demo apk安装包后续再放出吧 O(∩_∩)O 屏幕截图,该项目使用了响应式布局,适配全分辨率的屏幕 移动端效果 启用侧边栏模式 PC端效果 主要特色: 组件化开

vue2.0 transition

vue2.0 transition -- demo实践填坑 前言 vue1.0版本和2.0版本的过渡系统改变还是蛮彻底的,具体请自行详看文档介绍:https://vuefe.cn/v2/guide/migration.html#过渡.在使用2.0版本做过渡效果的时候,虽然比1.0版本强大很多,但是实践过程中还是踩了一些不应该踩但是还是踩了的坑.虽然官网文档已经很详细地介绍了各种应用场景,但是这里还是通过几个小demo案例来感受下vue2.0 transition 带来的便利吧! 实践 这里将通过

vue2.0入门

vue2.0 开发实践总结之入门篇 vue2.0 据说也出了很久了,博主终于操了一次实刀. 整体项目采用  vue +  vue-router +  vuex (传说中的vue 全家桶 ),构建工具使用尤大大推出的vue-cli 后续文章:如果有兴趣,可以移步  vue2.0 开发实践总结之疑难篇 项目是图片分享社交平台.   项目预览: 1 .vue-cli构建工具必知  我选用的vue-cli 是基于webpack的版本 ,不了解webpack的可以先粗略看下下面的基本知识 webpack

vue2.0组件快速入门

前言 最近开始在学vue相关的内容.组件这章的内容比较多.看了http://www.cnblogs.com/keepfool/p/5625583.html这篇博客,博主总结的还比较全面也挺清晰,可是这篇博客的知识点跟实例都是基于vue 1.0版本的,所以参考这篇博客,我将vue2.0版本中的相关知识点做了一个总结.算是自己学习的一个笔记 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.我们可以将组件看成是封装好的HT

Vue.js 高仿饿了么外卖APP

第1章 课程简介介绍课程的学习目标和学习内容.1-1 课程简介1-2 课程安排 第2章 Vuejs介绍从前端开发趋势分析开始,引入 MVVM 开发框架和 Vue.js,接着对比流行框架Angular 和 React,最后详细介绍 Vue.js 的核心思想-数据驱动和组件化.2-1 Vuejs介绍-近年来前端开发趋势2-2 Vuejs介绍-MVVM框架2-3 Vuejs介绍-什么是Vuejs及Vuejs生态2-4 Vuejs介绍-对比Angular.React2-5 Vuejs介绍-Vuejs核心

Vue.js高仿饿了么外卖App 2016最火前端框架

第1章 课程导学(二期)-15号开放 包括课程概述.核心模块.核心技术.课程安排.课程收获.讲授方式.学习前提等方面的介绍,最后演示了整个外卖App的功能,让同学们对课程项目有一个直观的了解. 1-1 导学(必看) 第2章 项目准备工作(二期)-15号开放 包括项目需求分析.Vue-cli 3.0 脚手架介绍.cube-ui 介绍.目录模块分析.api 接口 mock 等. 2-1 Vue-cli 3.0 介绍 2-2 目录介绍 & cube-ui 安装 2-3 api 接口 mock 第3章