企业官网型网站模板下载,山东建设网站公司,什么是外链,成都房地产信息查询平台一、初始化项目结构
1.初始化vite项目
npm create vite
cd vite-project
npm install
2.清理项目结构
清空App.vue
删除components目录下的HelloWorld.vue组件
3.为组件的样式启用sacc或less组件
npm i sass4.初始化index.css全局样式
:root{font-size:12px
}
二、封装…一、初始化项目结构
1.初始化vite项目
npm create vite
cd vite-project
npm install
2.清理项目结构
清空App.vue
删除components目录下的HelloWorld.vue组件
3.为组件的样式启用sacc或less组件
npm i sass4.初始化index.css全局样式
:root{font-size:12px
}
二、封装es-header组件
1.允许用户自定义title标题内容
2.允许用户自定义color文字颜色
3.允许用户自定义bgcolor背景颜色
4.允许用户自定义fsize字体大小
5.组件必须固定到页面顶部位置高度45px,文字居中z-index为999
templatediv classhead-container :style{backgroundColor:bgcolor,color:color,fontSize:fsizepx}{{ 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 langscss
.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 -S
2.在main.js入口文件中导入并配置axios
import axios from axios //配置请求的根路径 axios.defaults.baseURLhttp://localhost:3000 //将axios挂载为全局的$http自定义属性 app.config.globalProperties.$httpaxios
// 从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.baseURLhttp://localhost:3000
app.config.globalProperties.$httpaxios
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.允许用户通过自定义事件的形式监听全选按钮选中状态的变化并获取到最新的选中状态
templatediv classfooter-containerdivinput typecheckbox idcustom-control-label :checkedisfull changeonCheckboxChange /label forcustom-control-label全选/label/divdivspan合计/spanspan classamount{{ amount.toFixed(2)}}/span/divel-button classbtn-settle :disabledtotal0结算({{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)}}
}
/scriptstyle scoped langscss
.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的自定义属性idthumb,title,price,count,checked
3.封装组件的自定义事件stateChange允许外界 监听组件选中状态的变化
templatediv classgoods-containerdiv classleftinput typecheckbox :idid :checkedchecked changeonCheckboxChange /label :foridimg :srcthumb alt/label/divdiv classrightdiv classtop{{ title }}/divdiv classbottomdiv classprice{{ price.toFixed(2) }}/divEsCounter :countcount :min1 numberChangenumberChange/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)}}
}
/scriptstyle scoped langscss
.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
六、实现合计、结算数量、全选功能
templatediv classsonEsHeader title案例/EsHeader EsGoods v-forgoods in goodsList :keygoods.id :idgoods.id :thumbgoods.thumb :titlegoods.title :pricegoods.price :countgoods.count :checkedgoods.state stateChangestateChange countChangecountChange/EsGoodsEsFooter :isfullisfull :amountamount :totaltotal fullChangefullChange/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(itemitem.state flag)},stateChange(id,checked){const findRes this.goodsList.find((item){return item.idid;})if(findRes){findRes.state checked;}this.isfull this.goodsList.every(itemitem.state);},countChange(id,count){const findRes this.goodsList.find((item){return item.idid;})if(findRes){findRes.count count;}}},created(){this.getGoodsList()},computed:{total(){let a0;this.goodsList.filter(itemitem.state).forEach(itemaitem.count)return a},amount(){let sum0;this.goodsList.filter(itemitem.state).forEach(itemsumitem.count*item.price)return sum},}
}
/scriptstyle scoped langscss
.son{padding: 45px 0 50px 0;
}
/style七、封装es-counter组件能
1.渲染组件的基础布局
2.实现数量值得加减操作
3.处理min值
4.使用watc处理文本框输入的结果
5.封装numChange自定义事件
templatediv classcounter-containbutton classbtn :disablednum1 clickonSubClick -/buttoninput typenumber classcounter-input v-model.number.lazynum button classbtn clickonAddClick/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-1this.min)return;this.num--},onAddClick(){this.num},},watch:{num:{handler(newVal,oldVal){const parseRes parseInt(newVal);//不是数字或者小于1强制等于1if(isNaN(parseRes) ||parseRes1){this.num1return}// //如果新值是小数把转换的结果赋给numif(String(parseRes).includes(.)-1){this.numparseResreturn}this.$emit(numberChange,this.num)}}}
}
/script
style scoped langscss
.counter-contain{.btn{width: 34px;
}
.counter-input{width: 36px;
}
}/style
