zoukankan      html  css  js  c++  java
  • 记一次基于vant 组件的二次开发

    简介

    在开发手机端的H5 项目时,选择了vue + vant生态,在使用PullRefresh 下拉刷新 组件时,需要进行自定义显示。但是首页Tab 下有3 个页面都需要进行定制,为了方便将其封装为一个组件。

    源码

    下面是pullRefresh.vue 以及parent.vue 的相关源码

    1.子组件pullRefresh.vue

    <template>
      <van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
        <!-- 下拉提示,通过 scale 实现一个缩放效果 -->
        <template #pulling="props">
          <img
            class="doge"
            src="https://img.yzcdn.cn/vant/doge.png"
            :style="{ transform: `scale(${props.distance / 80})` }"
          />
        </template>
    
        <!-- 释放提示 -->
        <template #loosing>
          <img class="doge" src="https://img.yzcdn.cn/vant/doge.png" />
        </template>
    
        <!-- 加载提示 -->
        <template #loading>
          <img class="doge" src="https://img.yzcdn.cn/vant/doge-fire.jpg" />
        </template>
        <slot></slot>
      </van-pull-refresh>
    </template>
    <script>
    export default {
      name: 'pull-refresh',
      props: {
        value: {
          type: Boolean,
          default: false,
        }
      },
      data () {
        return {
          isLoading: false,
        }
      },
      watch: {
        value(val) {
          // 3.1 侦听到value 值改为true, 这时的val 为 true
          // 7. 侦听到父组件isLoading 值的改变,这是的val 为false
          if (val == false) {
            // 8. 由于val == false,此时子组件的isLoading 赋值为 false,完成下拉刷新过程
            this.isLoading = false
          }
        }
      },
      methods: {
        // 1. 子组件首次触发onRefresh 事件
        onRefresh () {
          // 2. 更新父组件的value 的值,这里的value 在父组件中是isLoading
          this.$emit('input', true)
          // 4. 触发父组件的refresh 事件,也就是父组件中的onRefresh 事件
          this.$emit('refresh')
        },
      }
    }
    </script>
    <style>
      .doge {
         140px;
        height: 72px;
        margin-top: 8px;
        border-radius: 4px;
      }
    </style>
    

    2.父组件parent.vue

    <tempalte>
      <pull-refresh v-model="isLoading" @refresh="onRefresh">
      父组件信息
      </pull-refresh>
    </template>
    <script>
    import pullRefresh from './pullRefresh.vue'
    export default {
      components: {
        'pull-refresh': pullRefresh
      },
      data () {
        return {
          // 3.2 由于子组件中产生了input 事件,导致isLoading = true
          isLoading: false,
        }
      },
      methods: {
        // 5. 子组件触发了父组件中的onRefresh 方法
        onRefresh () {
          setTimeout(()=>{
    
            // 6. 下拉刷新完成时,更新父组件的isLoading 为false,此时触发了子组件中的value 的值改变
            this.isLoading: false
          }, 2000)
        }
      }
    }
    </script>
    

    源码解析

    使用到的相关知识点:

    1. 插槽
    2. 计算属性和侦听属性
    3. 自定义事件
    4. 自定义组件的v-model

    过程分析

    在页面上模拟一次下拉刷新

    1. 子组件首次触发onRefresh 事件
    2. 更新父组件的value 的值,这里的value 在父组件中是isLoading
    3. 此时会触发两次改变
      3.1 侦听到value 值改为true, 这时的val 为 true
      3.2 由于子组件中产生了input 事件,导致isLoading = true
    4. 触发父组件的refresh 事件,也就是父组件中的onRefresh 事件
    5. 子组件触发了父组件中的onRefresh 方法
    6. 下拉刷新完成时,更新父组件的isLoading 为false,此时触发了子组件中的value 的值改变
    7. 侦听到父组件isLoading 值的改变,这是的val 为false
    8. 由于val == false,此时子组件的isLoading 赋值为 false,完成下拉刷新过程

    总结

    项目中还是需要多看多写多总结,这样才能更好的理解Vue

  • 相关阅读:
    sharepoint部署
    继承实体类出现传值时值不能保留
    面试经历
    sharepoint更换数据库链接
    asp.net c# 打开新页面或页面跳转
    sharepoint中配置工作流
    AD添加组织单位
    常用正则表达式
    删除多级非空目录
    C#实现对Word文件读写
  • 原文地址:https://www.cnblogs.com/JobbyM/p/13409012.html
Copyright © 2011-2022 走看看