商城首页
swiper轮播插件的使用
引用sass,定义min-width,统一全局颜色变量。
好用的设计稿看图网站:lanhuapp.com
sass用法:(复用)
<style lang="scss">
// 在此处引用顺序很重要,而且要加分号;和@,还有lang="scss"
NavHeader.vue的style中导入@import '../assets/scss/mixin.scss';
scss里面写函数,方便调用
@import '../assets/scss/mixin.scss';
.container{
@include flex();
}
mixin.scss
//flex布局复用
@mixin flex($hov:space-between,$col:center){
display: flex;
justify-content: $hov;
align-items: $col;
}
target="_blank"打开新窗口
<a href="" target="_blank"></a>
商品元素间加竖线
&:before{
content: ' ';
position: absolute;
top: 28px;
right: 0;
border-left: 1px solid $colorF;
height: 100px;
width:1px;
}
&:last-child:before{ //去掉最后一个子元素的竖线
display: none;
}
前端技术
Vue 前端框架 https://vuejs.org/
Vue-router 路由框架 https://router.vuejs.org/
Vuex 全局状态管理框架 https://vuex.vuejs.org/
Element 前端UI框架 https://element.eleme.io/
Axios 前端HTTP框架 https://github.com/axios/axios
v-charts 基于Echarts的图表框架 https://v-charts.js.org/
Js-cookie cookie管理工具 https://github.com/js-cookie/js-cookie
nprogress 进度条控件 https://github.com/rstacruz/nprogress
使用opacity:0.5
时会使字和背景都会变成半透明的
懒加载:
main.js
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
loading:'/imgs/loading-svg/loading-bars.svg' //用本地的svg图片替代待加载图片
})
要给图片加单引号,若不加则是表示变量,会报错
<img v-lazy="'/imgs/banner-1.png'">
<!-- 这种就不用加-->
<img v-lazy="item.img">
向父组件传递方法
v-on:click="$emit('submit')"
@submit="goToCart()"
接收父组件传来的参数
props:{
sureText:{ //接收到的参数,定义数据类型和默认值
btnType:String,
default:'确定'
}
}
如何在点击后跳转到另一页面
goToCart () {
this.$router.push('/cart')
}
整体动画效果
添加<transition name="slide"> </transition>
然后会生成6个类:
slide-enter slide-enter-active slide-enter-to
slide-leave slide-leave-active slide-leave-to
// 顺序也有要求,不然动画不成功
&.slide-enter-active{
top:0;
}
&.slide-leave-active{
top:-100%;
}
&.slide-enter{
top:-100%;
}
.slide-enter要放在后面,否则退出时无动画
插槽slot的用法
vue4.0版本要用template包裹着,v-slot绑定相同的名字
<modal
title="提示"
sureText="查看购物车"
btnType="2"
modalType="middle"
:showModal="showModal"
@submit="goToCart()"
@cancel="showModal=false"
>
<template v-slot:body>
<p>商品添加成功!</p>
</template>
</modal>
以下是Modal.vue
有很多地方写的比较精彩,插槽和按钮的类型选择判断。
这个对话框很值得借鉴!!!在以后的项目中尝试运用到自己的项目里。
<template>
<transition name="slide">
<div class="modal" v-show="showModal">
<!-- 遮罩层 -->
<div class="mask"></div>
<!-- 弹窗 -->
<div class="modal-dialog">
<div class="modal-header">
<span>{{title}}</span>
<a href="javascript:;" class="icon-close" v-on:click="$emit('cancel')"></a>
</div>
<div class="modal-body">
<slot name="body"></slot>
</div>
<div class="modal-footer">
<a href="javascript:;" class="btn" v-if="btnType==1" v-on:click="$emit('submit')">{{sureText}}</a>
<a href="javascript:;" class="btn" v-if="btnType==2" v-on:click="$emit('cancel')">{{cancelText}}</a>
<div class="btn-group" v-if="btnType==3">
<a href="javascript:;" class="btn" v-on:click="$emit('submit')">{{sureText}}</a>
<a href="javascript:;" class="btn btn-default" v-on:click="$emit('cancel')">{{cancelText}}</a>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
export default{
name:'modal',
props:{
//弹框类型:小small/中middle/大large/表单form
modalType:{
type:String,
default:'form'
},
//弹框标题
title:String,
//按钮类型:1:确认按钮;2:取消按钮;3确定取消
btnType:String,
sureText:{
btnType:String,
default:'确定'
},
cancelText:{
type:String,
default:'取消'
},
showModal:Boolean
}
}
</script>
<style lang="scss" scoped>
</style>