从无到有构建vue实战项目

Posted 2022-09-13 ktddcn

十六、vue-lazyload的使用

1. 首先，我们需要下载vue-lazyload包：

   npm i vue-lazyload -S

2. 下载好之后，我们将它引入到自己的项目：

   //main.js
   //引入图片懒加载
   import VueLazyload from 'vue-lazyload'
   //vue-lazyload配置
   Vue.use(VueLazyload, 
     preLoad: 1.3,
     //发生错误时显示的图片
     error: require("./assets/error.gif"),
     //加载过程中用到的图片
     loading: require("./assets/loading.gif"),
     attempt: 1
   )

   1. 需要注意的一点是，由于webpack打包机制，和js编译原因，在动态引入图片时，要选择require方式，require 是 AMD规范引入方式,如果不用require引入，代码运行到此处时，只会将图片路径识别为普通字符串，而用require方式，则代码运行到此处时则会解析该字符串，并将解析值赋给该对象或者变量

3. 然后在需要用到懒加载的img标签上，将:src替换为v-lazy，然后加上:key,其中v-lazy和:key的参数一样，然后就可以看到效果了

十七、对element-ui日历的修改以及实现签到功能

1. 创建一个组件，calendar.vue，该组件为子组件，然后将其引入父组件forum.vue

2. calendar.vue代码如下：

   <template>
     <div id="calendar">
       <div class="calendar-wrapper">
         <el-dialog title="签到" @closed="closeDialog" width="30%" :visible.sync="isDialog">
           <el-calendar v-model="checkInDate">
             <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
             <template class="selectCalendar" slot="dateCell" slot-scope="date, data">
               <p
                 class="calendarContent"
                 @click="checkIn(date,data)"
                 :class="data.isSelected ? 'is-selected' : ''"
               > data.day.split('-').slice(1).join('-')  (data.isSelected) ? '??' : ''</p>
             </template>
           </el-calendar>
         </el-dialog>
       </div>
     </div>
   </template>
   <script>
   import  Message  from "element-ui";
   export default 
     name: "calendar",
     data: function() 
       return 
         isDialog: this.dialogCalendar,
         checkInDate: new Date(),
         activeDate: [
           "2019-08-19",
           "2019-08-20",
           "2019-08-21",
           "2019-08-22",
           "2019-08-23"
         ],
         selectDate: ""
       ;
     ,
     props: 
       dialogCalendar: 
         type: Boolean,
         default: false
       
     ,
     //监听从父组件传递给子组件的dialogCalendar的值，以便更新isDialog,解决props单向数据流报错的问题
     watch: 
       dialogCalendar: function(newVal) 
         this.isDialog = newVal;
       
     ,
     methods: 
       closeDialog: function() 
         //通过调用内建的$emit方法，传入事件名称和数据来改变父组件数据
         this.$emit("listenDialog", false);
       ,
       checkIn: function(date, data) 
         let day1 = new Date();
         console.log(day1.getDate(), date.getDate(), data);
         if (date.getDate() == day1.getDate()) 
           Message.success( message: "签到成功！", offset: 90 );
          else 
           Message.warning( message: "签到失败！", offset: 90 );
         
       ,
     
   ;
   </script>
   <style lang="scss">
   .is-selected 
     color: #1989fa;
   
   #calendar 
     .el-calendar__body 
       padding: 12px 20px 10px;
     
     .el-dialog__body 
       padding: 0px 20px;
       color: #606266;
       font-size: 14px;
       word-break: break-all;
     
     .el-calendar-day 
       height: 50px;
     
   
   </style>

3. forum.vue代码如下：

   ...
   <el-button type="success" plain @click="checkIn">每日签到</el-button>
   <calendar :dialogCalendar="post.dialogCalendar" @listenDialog="changeDialog"></calendar>
   ...
   post: 
           dialogCalendar: false,
         
   ...
   methods: 
   //签到
       checkIn: function() 
         this.post.dialogCalendar = !this.post.dialogCalendar;
         console.log(this.post.dialogCalendar)
       ,
       //通过接收子组件传值来改变父组件数据
       changeDialog: function(data) 
         this.post.dialogCalendar = data;
         console.log(data)
       
   

4. 需要注意的一点是，因为父传子是单向数据流，那么当父子共用的值在子组件里发生变化时，会产生一个错误,所以在子组件值发生变化时，也要更新父组件值