1 vue实现分页组件

paginate组件

在父组件中进行引用

　　

angularjs实现分页指令

.directive('paginate', ['$http', function($http){            return {                scope: {                    query: '&',                    params: '=',                    result: '=',                    page: '=',                    loading: '='                },                restrict: 'E',                template: [                    '
     
      ',                        '
      首页',                        '
      <<',                        '
      {
    {code}}',                        '
      >>',                        '
      ',                        '
      Go',                        '
      共 {
    {pageCount}} 页， ',                        '
      共 {
    {result.total}} 条记录',                    '
     
'                ].join(''),                link: function($scope, iElm, iAttrs) {                    $scope.codeNum = 5                    $scope.codes = []                    $scope.$watch('result', function() {                        $scope.pageCount = getPageCount($scope.result.total, $scope.params.pageSize)                        $scope.codes = getCodes($scope.pageCount, parseInt($scope.params.pageNum) ,$scope.codeNum)                    })                    // 计算总页数                    function getPageCount(total, pageSize) {                        var a = total%pageSize                        if(a == 0) {                            return parseInt(total/pageSize)                        } else {                            return parseInt(total/pageSize) + 1                        }                    }                    // 计算页码显示                    function getCodes(pageCount, index, codeNum){                        if(pageCount <= codeNum) {                            return getArray(1, pageCount)                        } else {                            if(index <= (codeNum + 1)/2) {                                return getArray(1, codeNum)                            }                            if(index >= (pageCount- (codeNum - 1)/2)) {                                return getArray(pageCount-codeNum+1, pageCount)                            }                            return getArray(index-(codeNum - 1)/2, index+(codeNum - 1)/2)                        }                    }                    function getArray(start, end) {                        var arr = []                        for (var i = start; i <= end; i++) {                            arr.push(i)                        }                        return arr                    }                    $scope.go = function(goPage) {                        if(!goPage) {                            if($scope.goPage)                            goPage = $scope.goPage                        }                        if(goPage == $scope.params.pageNum) {                            return                        }                        if(goPage == '0' || !goPage || goPage > $scope.pageCount || goPage < 0) {                            return                        } else {                            $scope.page.index = goPage                        }                        $scope.query()                    }                    $scope.pre = function() {                        if($scope.params.pageNum < 2) {                            return                         } else {                            $scope.page.index = $scope.params.pageNum -1                        }                        $scope.query()                    }                    $scope.next = function() {                        if($scope.pageCount == 0){                            return                        }                        if($scope.params.pageNum == $scope.pageCount) {                            return                         } else {                            $scope.page.index = $scope.params.pageNum + 1                        }                        $scope.query()                    }                }            };        }])

　　引用时将对应的改指令文件引入，在html里面写入

　　对应的样式设置

.p-btn {    border: none;    cursor: pointer;    color: #333;    padding: 6px 14px;    font-size: 12px;    display: inline;    background: #fff;    border: solid 1px #30363e;    height:30px;}.p-btn:hover {    background-color: rgba(63, 74, 89, 0.5);}.p-btn-active {    background-color: #3f4a59;    color: #fff;}