Vue学习笔记-5

影院组件

//动态结算高度
this.height=document.documentElement.clientHeight

this.height=document.documentElement.clientHeight-document.querySelector('footer')

ElementUL

类似于BS
https://element.eleme.cn/#/zh-CN/component/changelog

<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

vant引入

//全局导入所有组件
import Vue from 'vue'; 
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

数据懒加载

<template>
    <div class="list">
        <h3>列表的懒加载--滚动</h3>
        <div>
            <div v-for="(item, index) in list" :key="index">
                <div>{{ item.id }}</div>
            </div>
        </div>
        <div>
            <div v-if="moreShowBoolen">tips：滚动加载更多</div>
            <div v-else>已无更多</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [],
            moreShowBoolen: false,
            nowPage: 1,
            scrollHeight: 0
        }
    },
    mounted() {
        this.init()
        // screen.availHeight表示屏幕高度
        // document.documentElement.scrollTop表示当前页面滚动条的位置,documentElement对应的是html标签,body对应的是body标签
        // document.compatMode用来判断当前浏览器采用的渲染方式,CSS1Compat表示标准兼容模式开启
        window.addEventListener('scroll', () => {
            const scrollY = document.documentElement.scrollTop || document.body.scrollTop // 滚动条在Y轴上的滚动距离
            const vh = document.compatMode === 'CSS1Compat' ? document.documentElement.clientHeight : document.body.clientHeight // 页面的可视高度（能看见的）
            const allHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) // 页面的总高度（所有的）
            if (scrollY + vh >= allHeight) { // 当滚动条滑到页面底部
                this.scrollMore()
            }
        })
    },
    methods: {
        init() {
            this.axios.get('http://jsonplaceholder.typicode.com/posts').then(res => {
                if (res.data.length <= 10) { // 10条数据一页
                    this.list = res.data
                    this.moreShowBoolen = false
                } else {
                    this.list = res.data.slice(0, 10)
                    this.moreShowBoolen = true
                }
            })
        },
        scrollMore() { // 点击查询更多
            this.axios.get('http://jsonplaceholder.typicode.com/posts').then(res => {
                this.list = this.list.concat(res.data.slice(this.nowPage * 10, (this.nowPage + 1) * 10))
                this.nowPage++
                if (res.data.length >= this.nowPage * 10) {
                    this.moreShowBoolen = true
                } else {
                    this.moreShowBoolen = false
                }
            })
        }
    }
}
</script>

loading加载

可分为:页面加载的loading,数据加载的loading,用户操作等待响应的loading

页面加载的loading:从发送浏览器加载页面请求前,站是一个loading请求载页面最顶层
一般是旋转的loading图标,gif动图效果1,或者采用css动画,旋转一个图片
等浏览器响应请求,ajax成功回调,把loading层隐藏不显示,即结束了loading

数据加载的loading:在发起第一个请求前开始loading效果,在最后一个成功返回时结束loading效果

用户操作等待响应的loading:用户调教表单信息,等待服务器处理数据后返回处理结果,在提交前发起loading效果,服务器返回后结束loading效果

axios拦截

//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password
 
this.$axios.post("/api/request", this.$qs.stringify(httpRequest)).then(data => {
    //特殊错误处理，状态为10时为登录超时
    if(data.data.code === 10){
        this.$Message.error("登录已超时，请重新登录")
        this.$router.push("/login")
    //其余错误状态处理    
    }else if(data.data.code != 0){
        this.$Message.error(data.data.msg)
    //请求成功
    }else if(data.data.code === 0){
        //进行成功业务逻辑
    }
    //.......
});

city数据组件

 var cityDatas = require('./cityDatas')
    export default {
        name: "chooseCity",
        data() {
          return {
            model1: '',
            model2: '',
            model3: '',
            firstFloorDatas: [],
            secondFloorDatas: [],
            thirdFloorDatas: [],
            showSecond: false,
            showThird: false,
          }
        },
      props: {
          cityData: {//反显的时候传递进来的参数，是这个城市的id
              default: ''
          }
      },
      methods: {
          handleFirstDatas() {
            console.log(cityDatas)
            this.firstFloorDatas = cityDatas.default.filter((item,index) => {
              return item.level == "1";
            })
 
          },
        handleSecondDatas() {
            let str = this.model1.toString()
            let strPreThree = str.substring(0,3);
 
            let re = new RegExp("^(" + strPreThree + ")\\d{2}(00)$")
 
          this.secondFloorDatas = cityDatas.default.filter((item,index) => {
            let str1 = item.id.toString()
 
            return (re.test(str1) && str1 !== str)
          })
          if(this.secondFloorDatas.length != 0) {
              this.showSecond = true;
          }
 
        },
        handleThridDatas() {
            if(this.model2) {
              let str = this.model2.toString();
              let strPreFive = str.substring(0,5)
              let re = new RegExp("^(" + strPreFive + ")\\d{2}$");
              this.thirdFloorDatas = cityDatas.default.filter((item,index) => {
                let str1 = item.id.toString()
                return (re.test(str1) && str1 !== str)
            })
              if(this.thirdFloorDatas.length != 0 && this.model2) {
                this.showThird = true;
              }
            }
 
        },
        //根据数据进行选择的城市的显示
        showData() {
          let items = cityDatas.default.filter((item,index) => {
            return item.id == this.cityData
          })
          if(items.length!=0) {
            let level = items[0].level;
            let id = items[0].id.toString();
            switch(level) {
              case 1:
                this.model1 = parseInt(this.cityData);
                break;
              case 2:
                this.model1 = parseInt(id.substring(0,3) + "0000");
                this.model2 = parseInt(this.cityData);
                break;
              case 3:
                this.model1 = parseInt(id.substring(0,3) + "0000");
                this.model2 = parseInt(id.substring(0,5) + "00");
                this.model3 = parseInt(this.cityData);
            }
          }
 
          // alert(this.model1,this.model2.this.model3)
        },
        // 在外部获取的当前的选择城市的对应的id
        getChoosedCity() {
            if(this.model3) {
              return this.model3
            }else if(this.model2) {
              return this.model2
            }else if(this.model1) {
              return this.model1
            }else {
              return ''
            }
        },
        deleteModel(id) {
            if(id===1) {
              this.model2 = '';
              this.model3 = '';
              this.showThird = false;
            }else if(id ===2) {
              this.model3 = '';
            }
        },
      },
      created() {
          this.handleFirstDatas()
          if(this.cityData) {
            this.showData();
          }
      },
      watch: {
        model1: {
          handler: function(newVal) {
            // alert(newVal)
            this.handleSecondDatas()
          }
        },
        model2: {
          handler: function(newVal) {
 
            this.handleThridDatas()
          }
        },
        cityData: {
          handler: function(newVal) {
            this.model2 = '';
            this.model3 = '';
            this.model1 = '';
            this.showSecond = false;
            this.showThird = false;
            this.showData();
            console.log(newVal)
          }
        }
      }
    }

vuex

//main.js
import store from './store'
const app = createApp(App)
app.use(store)

import {useStore} from 'vuex'

export default {
    name: "XXXX",
    setup(props, context){
        const store = useStore()
        // ....
        return {
        //...
        }
    }
}

vue持久化

在开发的过程中，像用户信息（名字，头像，token）需要vuex中存储且需要本地存储。

//使用vuex-persistedstate插件来进行持久化
import { createStore } from 'vuex'
+import createPersistedstate from 'vuex-persistedstate'

import user from './modules/user'
import cart from './modules/cart'
import cate from './modules/cate'

export default createStore({
  modules: {
    user,
    cart,
    cate
  },
+  plugins: [
+    createPersistedstate({
+      key: 'erabbit-client-pc-store',
+      paths: ['user', 'cart']
+    })
+  ]
})