zoukankan      html  css  js  c++  java
  • Vue(三十)公共组件

    以 分页 组件为例:(根据自己具体业务编写)

    1.pagination.vue

    <template>
      <!-- 分页 -->
      <div class="table-pagination" v-if="flag">
        <template>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 30]"
              :page-size="pageSize"
              :total="totalCount"
              layout="total, sizes, prev, pager, next">
            </el-pagination>
          </div>
        </template>
      </div>
    </template>
    
    <script>
    export default {
      name: 'my-pagination',
      props: {
        flag: Boolean,
        page: Number,
        pageSize: Number,
        totalCount: Number
      },
      methods: {
        handleSizeChange (val) {
          this.$emit('handleSizeChange', val)
        },
        handleCurrentChange (val) {
          this.$emit('handleCurrentChange', val)
        }
      }
    }
    </script>

    2.新建一个utils文件夹,然后新建一个global.js

    /*
    ** 公共组件
    */
    
    import Pagination from '../components/common/pagination/Pagination.vue'
    
    const global = (Vue) => {
      if (global.installed) return
      Vue.component('my-pagination', Pagination) // 注册全局分页组件
    }
    
    export default global

    3.在main.js中引入js

    import Global from './utils/global'
    
    Vue.use(Global) // 注册全局组件

    4.直接在页面中引入

    <my-pagination
              @handleSizeChange='handleSizeChange'
              @handleCurrentChange='handleCurrentChange'
              :flag='flag'
              :page='page'
              :pageSize='pageSize'
              :totalCount='totalCount'>
            </my-pagination>
  • 相关阅读:
    Java从静态代理到动态代理
    Redis持久化
    Linux top命令详解
    从Java线程到线程池
    NodeJs的学习
    使用<金蝶云星空集成开发平台>创建单据的操作步骤
    Maven项目的创建
    XCX_豆瓣电影
    小程序,新手上路
    更改Apache虚拟目录并授予权限 及 { 修改索引页 }
  • 原文地址:https://www.cnblogs.com/yulingjia/p/9789691.html
Copyright © 2011-2022 走看看