pos小demo页面的总结笔记

在根目录index.html中可以设置css

 html,body,#app{
        padding: 0;
        margin: 0;
        height: 100%;
      }

在main.js中导入Element和 router等：

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
 Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

在app.vue中导入组件：

<template>
  <div id="app">
  <leftNav></leftNav>
    <div id="main">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import leftNav from '@/components/common/leftNav';
import pos from '@/components/page/pos';

export default {
  name: 'app',
  components:{
    leftNav,
    pos,
  },
}
</script>

在leftNav组件中：通过i标签引入阿里的iconfont图标：

 <div id="leftNav">
        <ul>
        <li>
          <i class="iconfont icon-goumai "></i>
          <div>收银</div>
        </li>
          <li>
            <i class="iconfont icon-dianpu "></i>
            <div>店铺</div>
          </li>
          ...
        </ul>
</div>

在pos.vue组件中：

通过element的栅格分栏，使用el-tabs 注意作用域（scope.row）

   <template slot-scope="scope">
        <el-button @click="delSingle(scope.row)" type="text" size="small" >删除</el-button>
        <el-button type="text" size="small" @click="addOrderList(scope.row)">增加</el-button>
   </template>
                 

在li中使用v-for遍历时注意传值：

  <li v-for="goods in oftenGoods " @click="addOrderList(goods)">
      <span>{{goods.goodsName}} </span>
      <span class="goodsprice">￥{{goods.price}}</span>
  </li>

在生命周期mounted中可以动态改变页面大小（框架的css不易修改）

   mounted(){
           document.querySelector('.lanmu1').style.height=document.body.clientHeight+'px';
           document.querySelector('.lanmu2').style.height=document.body.clientHeight+'px';
    },

使用filter可以过滤后获得需要的数组：

      delSingle(index){
        this.tableData= this.tableData.filter(p=>p.goodsId!==index.goodsId);
        this.getAllMoney()
      },


-------------------------------------------------------------------------------------        
   if(isHave){
         let arr=this.tableData.filter(
            p=>p.goodsId===goods.goodsId
         );
         arr[0].count++;
        }else{
            let newGoods={goodsId:goods.goodsId,goodsName:goods.goodsName,price:goods.price,count:1};
            this.tableData.push(newGoods)
        }

清除浮动：clear:both;

发布时在config文件夹的index.js的build中把绝对路径改为./相对路径