Vue的相关基础知识的应用

$ on 和 $ emit

可以为同一个事件绑定多个处理函数
// 结合分页组件来看

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <div id="root">
        <button @click="boost">触发事件</button>
    </div>
</body>
new Vue({
    el: '#root',
    data() {
        return {
            message: 'hello vue'
        }
    },
    created() {
        // 事件调用 触发回调函数
        this.$on('my_events', this.handleEvent),
        this.$on('my_events', this.handleEvent1)
    },
    methods: {
        boost() {
            this.$emit('my_events', 'my params')
        },
        handleEvent(e) {
            console.log(e, this.message)
        },
        handleEvent1(e) {
            console.log(e, this.message)
        }
    }
})

Vue.directive

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="root" v-loading="isLoading">
        <div>{{data}}</div>
        <button @click="update">更新</button>
    </div>
    <script>
        
        Vue.directive('loading', {
            update(el, binding, vnode) {
                console.log(el, binding, vnode)
                if (binding.value) {
                    const div = document.createElement('div')
                    div.innerText = '加载中...'
                    div.setAttribute('id', 'loading')
                    div.style.position = 'fixed'
                    div.style.left = 0
                    div.style.top = 0
                    div.style.width = '100%'
                    div.style.height = '100%'
                    div.style.display = 'flex'
                    div.style.justifyContent = 'center'
                    div.style.alignItems = 'center'
                    div.style.color = 'white'
                    div.style.background = 'rgba(0,0,0,.7)'
                    document.body.append(div)
                } else {
                    document.body.removeChild(document.getElementById('loading'))
                }
            }
        })

        new Vue({
            el: '#root',
            data() {
                return {
                    isLoading: false,
                    data: ''
                }
            },
            methods: {
                update() {
                    this.isLoading = true
                    setTimeout(() => {
                        this.data = '用户数据'
                        this.isLoading = false
                    }, 3000)
                }
            }
        })
    </script>
</body>
</html>

Vue.extend

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        #loading-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .7);
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="root">
        <button @click='showLoading'>显示loading</button>
    </div>
    <script>
        // 创建vue构造器
        const LoadingComponent = Vue.extend({
            template: '<div id="loading-wrapper">{{msg}}</div>',
            props: {
                msg: {
                    type: String,
                    default: 'loading...'
                }
            }
        })

        function Loading(msg) {
            console.log(msg)
            const div = document.createElement('div')
            div.setAttribute('id', 'loading-wrapper')
            document.body.append(div)
            if (msg) {
                new LoadingComponent({
                    props: {
                        msg: {
                            type: String,
                            default: msg
                        }
                    }
                }).$mount('#loading-wrapper')
            } else {
                new LoadingComponent().$mount('#loading-wrapper')
            }
            // 返回一个闭包
            return () => {
                document.body.removeChild(document.getElementById('loading-wrapper'))
            }
        }

        Vue.prototype.$loading = Loading
        new Vue({
            el: '#root',
            methods: {
                showLoading() {
                    const hide = this.$loading()
                    setTimeout(() => {
                        hide()
                    }, 2000)
                }
            }

        })
    </script>
</body>

</html>

Vue.use

相当于把Vue.extend上述的例子做了进一步的封装

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        #loading-wrapper {
            position: fixed;
            left: 0;
            top: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(0, 0, 0, .7);
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="showLoading">显示loading</button>
    </div>
</body>
<script>
    const loadingPlugin = {
        install: function(vm) {
            const LoadingComponent = vm.extend({
                template: '<div id="loading-wrapper">{{msg}}</div>',
                props: {
                    msg: {
                        type: String,
                        default: 'loading...'
                    }
                }
            })
            function Loading(msg) {
                const div = document.createElement('div')
                div.setAttribute('id', 'loading-wrapper')
                document.body.append(div)
                new LoadingComponent({
                    props: {
                        msg: {
                            type: String,
                            default: '加载中...'
                        }
                    }
                }).$mount('#loading-wrapper')
                return () => {
                    document.body.removeChild(document.getElementById('loading-wrapper'))
                }
            }
            vm.prototype.$loading = Loading
        }
    }

    Vue.use(loadingPlugin)

    new Vue({
        el: '#app',
        methods: {
            showLoading() {
                const hide = this.$loading('正在加载，请稍候...')
                setTimeout(() => {
                    hide()
                }, 3000)
            }
        }
    })
</script>

</html>

分析一波分页组件

不行，要陪女朋友，这里稍后再总结。明天最好能够画个图出来

<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
    <el-pagination
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :layout="layout"
      :page-sizes="pageSizes"
      :total="total" 
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { scrollTo } from '@/utils/scroll-to'

export default {
  name: 'Pagination',
  props: {
    total: {
      required: true,
      type: Number
    },
    page: { // 起始页
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 20
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 40, 50]
      }
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: true
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    currentPage: {
      get() {
        console.log('get page: ', this.page)
        return this.page
      },
      set(val) {
        console.log('set page: ', val)
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        console.log('get limit: ', this.limit)
        return this.limit
      },
      set(val) {
        console.log('set limit: ', val)
        this.$emit('update:limit', val)
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('pagination', { page: this.currentPage, limit: val })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
    handleCurrentChange(val) {
      this.$emit('pagination', { page: val, limit: this.pageSize })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    }
  }
}
</script>

<style scoped>
.pagination-container {
  background: #fff;
  padding: 32px 16px;
}
.pagination-container.hidden {
  display: none;
}
</style>