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>
  • 相关阅读:
    搭建jenkins jmeter持续集成
    Jenkins windows环境搭建
    Appium环境搭建(二)
    Qt webkitwidgets模块和webenginewidgets模块
    Qt程序无法输入中文的问题
    在Qt中使用SQLite数据库
    Ubuntu下搜狗拼音输入法打不出汉字的解决方法
    drupal7创始人root忘记密码的解决办法
    javascript块级作用域
    javascript闭包
  • 原文地址:https://www.cnblogs.com/yulingjia/p/9789691.html
Copyright © 2011-2022 走看看