vue选项式写法项目案例(购物车)
一、初始化项目结构
1.初始化vite项目
npm create vite
cd vite-project
npm install2.清理项目结构
清空App.vue
删除components目录下的HelloWorld.vue组件
3.为组件的样式启用sacc或less组件
npm i sass
4.初始化index.css全局样式
:root{
font-size:12px
}二、封装es-header组件
1.允许用户自定义title标题内容
2.允许用户自定义color文字颜色
3.允许用户自定义bgcolor背景颜色
4.允许用户自定义fsize字体大小
5.组件必须固定到页面顶部位置，高度45px,文字居中，z-index为999
<template>
<div class="head-container" :style="{backgroundColor:bgcolor,color:color,fontSize:fsize+'px'}">{{ title }}</div>
</template>
<script>
import bus from '../../ulits/eventBus'
export default {
props:{
title:{
type:String,
default:'es-header'
},
bgcolor:{
type:String,
default:'#007bff'
},
color:{
type:String,
default:'#fff'
},
fsize:{
type:Number,
default:'12'
},
}
}
</script>
<style scoped lang="scss">
.head-container{
position: fixed;
top:0;
left: 0;
width: 100%;
height: 45px;
text-align: center;
line-height: 45px;
z-index:999;
}
</style>三、基于axios请求商品列表数据
1.安装axios
npm i axios -S2.在main.js入口文件中导入并配置axios
import axios from 'axios'
//配置请求的根路径
axios.defaults.baseURL='http://localhost:3000'
//将axios挂载为全局的$http自定义属性
app.config.globalProperties.$http=axios
// 从vue中按需导入createApp函数，用于创建vue的实例对象
import { createApp } from 'vue'
// 导入待渲染的App组件
import App from './App.vue'
import './style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from "./routers/index.js";
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import axios from 'axios'
// 创建vue的实例对象
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
axios.defaults.baseURL='http://localhost:3000'
app.config.globalProperties.$http=axios
app.use(ElementPlus)
app.use(router)
// 指定vue控制的Dom区域，把App组件的模板结构渲染到指定的el区域中
app.mount('#app')
3.请求商品列表数据
四、封装es-footer组件
1.组件必须固定到页面底部位置，高度50px,内容两端贴边对其，z-index为999
2.允许用户自定义amount总价格，渲染时保留两位小数
3.允许用户自定义totalt总数量，并渲染到结算按钮中，如果要结算的商品数量为0，则禁用结算按钮
4.允许用户自定义isfull全选按钮的选中状态
5.允许用户通过自定义事件的形式，监听全选按钮选中状态的变化，并获取到最新的选中状态
<template>
<div class="footer-container">
<div>
<input type="checkbox" id="custom-control-label" :checked="isfull" @change="onCheckboxChange" /><label for="custom-control-label">全选</label>
</div>
<div>
<span>合计：</span>
<span class="amount">￥{{ amount.toFixed(2)}}</span>
</div>
<el-button class="btn-settle" :disabled="total===0">结算({{total}})</el-button>
</div>
</template>
<script>
export default {
props:{
amount:{
type:Number,
dafault:0
},
total:{
type:Number,
dafault:0
},
isfull:{
type:Boolean,
default: false
}
},
emits:['fullChange'],
methods:{
onCheckboxChange(e){
this.$emit('fullChange',e.target.checked)
}
}
}
</script>
<style scoped lang="scss">
.footer-container{
width: 100%;
height: 50px;
border-top:1px solid #ededed;
background-color: #fff;
position: fixed;
bottom:0;
left:0;
padding:0 10px;
display: flex;
justify-content: space-between;
align-items: center;
input{
vertical-align: middle;
}
.amount{
color:red;
}
.btn-settle{
min-width: 100px;
height: 38px;
border-radius: 19px;
}
}
</style>五、封装es-goods组件
1.实现edgoods组件的基本布局
2.封装组建的6的自定义属性id，thumb,title,price,count,checked
3.封装组件的自定义事件stateChange，允许外界 监听组件选中状态的变化
<template>
<div class="goods-container">
<div class="left">
<input type="checkbox" :id="id" :checked="checked" @change="onCheckboxChange" />
<label :for="id"><img :src="thumb" alt=""></label>
</div>
<div class="right">
<div class="top">{{ title }}</div>
<div class="bottom">
<div class="price">￥{{ price.toFixed(2) }}</div>
<EsCounter :count="count" :min="1" @numberChange="numberChange"></EsCounter>
</div>
</div>
</div>
</template>
<script>
import EsCounter from './esCounter.vue'
export default {
components:{
EsCounter
},
props:{
id:{
type:String,
default:'',
require:true
},
thumb:{
type:String,
default:'',
require:true
},
title:{
type:String,
default:'',
require:true
},
price:{
type:Number,
default:0,
require:true
},
count:{
type:Number,
default:0,
require:true
},
checked:{
type:Boolean,
default:false,
require:true
}
},
emits:['stateChange','countChange'],
methods:{
onCheckboxChange(e){
this.$emit('stateChange',e.target.id,e.target.checked)
},
numberChange(num){
this.$emit('countChange',this.id,num)
}
}
}
</script>
<style scoped lang="scss">
.goods-container{
width: 100%;
padding:10px;
display: flex;
border:1px solid #ededed;
.left{
width: 110px;
height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
img{
width: 100px;
height: 100px;
}
input{
vertical-align: middle;
}
}
.right{
padding: 10px;
flex:1;
display: flex;
flex-direction: column;
justify-content: space-around;
.bottom{
display: flex;
justify-content: space-between;
align-items: center;
.price{
color:red;
}
}
}
}
</style>六、实现合计、结算数量、全选功能
<template>
<div class="son">
<EsHeader title="案例"></EsHeader>
<EsGoods v-for="goods in goodsList" :key="goods.id" :id="goods.id" :thumb="goods.thumb" :title="goods.title" :price="goods.price" :count="goods.count" :checked="goods.state" @stateChange="stateChange" @countChange='countChange'></EsGoods>
<EsFooter :isfull="isfull" :amount="amount" :total="total" @fullChange="fullChange"></EsFooter>
</div>
</template>
<script>
import EsHeader from './EsHeader.vue'
import EsFooter from './esFooter.vue'
import EsGoods from './EsGoods.vue'
export default {
components:{EsHeader,EsGoods,EsFooter},
data(){
return{
goodsList:[],
amount:0,
total:0
}
},
methods:{
async getGoodsList(){
const {data:res}= await this.$http.get('/goodsList')
this.goodsList = res
},
fullChange(flag){
this.goodsList.forEach(item=>item.state =flag)
},
stateChange(id,checked){
const findRes = this.goodsList.find((item)=>{
return item.id==id;
})
if(findRes){
findRes.state =checked;
}
this.isfull = this.goodsList.every(item=>item.state);
},
countChange(id,count){
const findRes = this.goodsList.find((item)=>{
return item.id==id;
})
if(findRes){
findRes.count =count;
}
}
},
created(){
this.getGoodsList()
},
computed:{
total(){
let a=0;
this.goodsList.filter(item=>item.state).forEach(item=>a+=item.count)
return a
},
amount(){
let sum=0;
this.goodsList.filter(item=>item.state).forEach(item=>sum+=item.count*item.price)
return sum
},
}
}
</script>
<style scoped lang="scss">
.son{
padding: 45px 0 50px 0;
}
</style>
七、封装es-counter组件能
1.渲染组件的基础布局
2.实现数量值得加减操作
3.处理min值
4.使用watc处理文本框输入的结果
5.封装numChange自定义事件
<template>
<div class="counter-contain">
<button class="btn" :disabled="num===1" @click="onSubClick"> -</button>
<input type="number" class="counter-input" v-model.number.lazy="num" >
<button class="btn" @click="onAddClick">+</button>
</div>
</template>
<script>
export default {
props:{
count:{
type:Number,
default:0,
require:true
},
min:{
type:Number,
default:0,
require:NaN
}
},
emits:['numberChange'],
data(){
return{
num: this.count
}
},
methods:{
onSubClick(){
if(isNaN(this.min)&& this.num-1<this.min)return;
this.num--
},
onAddClick(){
this.num++
},
},
watch:{
num:{
handler(newVal,oldVal){
const parseRes = parseInt(newVal);
//不是数字或者小于1，强制等于1
if(isNaN(parseRes) ||parseRes<1){
this.num=1
return
}
// //如果新值是小数，把转换的结果赋给num
if(String(parseRes).includes('.')==-1){
this.num=parseRes
return
}
this.$emit('numberChange',this.num)
}
}
}
}
</script>
<style scoped lang="scss">
.counter-contain{
.btn{
width: 34px;
}
.counter-input{
width: 36px;
}
}
</style>