{"id":8408,"date":"2021-02-02T13:25:17","date_gmt":"2021-02-02T05:25:17","guid":{"rendered":"https:\/\/sdeno.com\/?p=8408"},"modified":"2021-02-02T13:25:17","modified_gmt":"2021-02-02T05:25:17","slug":"vue-js%e5%88%86%e9%a1%b5","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=8408","title":{"rendered":"vue.js\u5206\u9875"},"content":{"rendered":"<figure class=\"mdx-lazyload-container\" style=\"max-width:346px\"><div style=\"padding-top:23.699421965318%\"><\/div><div class=\"mdx-img-loading-sp mdui-valign\"><div><div class=\"mdui-spinner\"><\/div><\/div><\/div><img width=\"346\" height=\"82\" class=\"alignnone size-full wp-image-8409 lazyload\" title=\"vue.js\u5206\u9875\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/sdeno.com\/wp-content\/uploads\/2021\/02\/vuepage.png\" alt=\"https:\/\/sdeno.com\/wp-content\/uploads\/2021\/02\/vuepage.png\" data-srcset=\"https:\/\/sdeno.com\/wp-content\/uploads\/2021\/02\/vuepage.png 346w, https:\/\/sdeno.com\/wp-content\/uploads\/2021\/02\/vuepage-300x71.png 300w\" sizes=\"auto, (max-width: 346px) 100vw, 346px\"><\/figure>\n<pre>&lt;script type=\"text\/javascript\" src=\"https:\/\/cdn.bootcdn.net\/ajax\/libs\/vue\/2.6.0\/vue.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;style&gt;\r\n        .mo-paging {\r\n            display: inline-block;\r\n            padding: 0;\r\n            margin: 1rem 0;\r\n            font-size: 0;\r\n            list-style: none;\r\n            user-select: none;\r\n        }\r\n        .mo-paging &gt; .paging-item {\r\n            display: inline;\r\n            font-size: 14px;\r\n            position: relative;\r\n            padding: 6px 12px;\r\n            line-height: 1.42857143;\r\n            text-decoration: none;\r\n            border: 1px solid #ccc;\r\n            background-color: #fff;\r\n            margin-left: -1px;\r\n            cursor: pointer;\r\n            color: #0275d8;\r\n        }\r\n        .mo-paging &gt; .paging-item:first-child {\r\n            margin-left: 0;\r\n        }\r\n        .mo-paging &gt; .paging-item:hover {\r\n            background-color: #f0f0f0;\r\n            color: #0275d8;\r\n        }\r\n        .mo-paging &gt; .paging-item.paging-item--disabled, .mo-paging &gt; .paging-item.paging-item--more {\r\n            background-color: #fff;\r\n            color: #505050;\r\n        }\r\n        .mo-paging &gt; .paging-item.paging-item--disabled {\r\n            cursor: not-allowed;\r\n            opacity: 0.75;\r\n        }\r\n        .mo-paging &gt; .paging-item.paging-item--more, .mo-paging &gt; .paging-item.paging-item--current {\r\n            cursor: default;\r\n        }\r\n        .mo-paging &gt; .paging-item.paging-item--current {\r\n            background-color: #0275d8;\r\n            color: #fff;\r\n            position: relative;\r\n            z-index: 1;\r\n            border-color: #0275d8;\r\n        }\r\n    &lt;\/style&gt;\r\n\r\n\r\n\r\n&lt;template v-if=\"count\"&gt;\r\n        &lt;ul&gt;\r\n            &lt;li v-for=\"item in items\"&gt;...&lt;\/li&gt;\r\n        &lt;\/ul&gt;\r\n        &lt;my-component\r\n                :page-index=\"currentPage\"\r\n                :total=\"count\"\r\n                :page-size=\"pageSize\"\r\n                @change=\"pageChange\"&gt;\r\n        &lt;\/my-component&gt;\r\n&lt;\/template&gt;\r\n\r\n\r\n\r\n\r\n<\/pre>\n<pre>&lt;script type=\"text\/javascript\"&gt;\r\n\r\n    new Vue({\r\n        el:'#xx',\r\n        components: {\r\n            'my-component' : {\r\n                template:'&lt;ul class=\"mo-paging\"&gt;\\n' +\r\n                    '        &lt;!-- prev --&gt;\\n' +\r\n                    '        &lt;li\\n' +\r\n                    '        :class=\"[\\'paging-item\\', \\'paging-item--prev\\', {\\'paging-item--disabled\\' : index === 1}]\"\\n' +\r\n                    '        @click=\"prev\"&gt;prev&lt;\/li&gt;\\n' +\r\n                    '        \\n' +\r\n                    '        &lt;!-- first --&gt;\\n' +\r\n                    '        &lt;li\\n' +\r\n                    '        :class=\"[\\'paging-item\\', \\'paging-item--first\\', {\\'paging-item--disabled\\' : index === 1}]\"\\n' +\r\n                    '        @click=\"first\"&gt;first&lt;\/li&gt;\\n' +\r\n                    '        \\n' +\r\n                    '        &lt;li\\n' +\r\n                    '        :class=\"[\\'paging-item\\', \\'paging-item--more\\']\"\\n' +\r\n                    '        v-if=\"showPrevMore\"&gt;...&lt;\/li&gt;\\n' +\r\n                    '\\n' +\r\n                    '        &lt;li\\n' +\r\n                    '        :class=\"[\\'paging-item\\', {\\'paging-item--current\\' : index === pager}]\"\\n' +\r\n                    '        v-for=\"pager in pagers\"\\n' +\r\n                    '        @click=\"go(pager)\"&gt;{{ pager }}&lt;\/li&gt;\\n' +\r\n                    '\\n' +\r\n                    '        &lt;li\\n' +\r\n                    '        :class=\"[\\'paging-item\\', \\'paging-item--more\\']\"\\n' +\r\n                    '        v-if=\"showNextMore\"&gt;...&lt;\/li&gt;\\n' +\r\n                    '        \\n' +\r\n                    '        &lt;!-- last --&gt;\\n' +\r\n                    '        &lt;li\\n' +\r\n                    '        :class=\"[\\'paging-item\\', \\'paging-item--last\\', {\\'paging-item--disabled\\' : index === pages}]\"\\n' +\r\n                    '        @click=\"last\"&gt;last&lt;\/li&gt;\\n' +\r\n                    '\\n' +\r\n                    '        &lt;!-- next --&gt;\\n' +\r\n                    '        &lt;li\\n' +\r\n                    '        :class=\"[\\'paging-item\\', \\'paging-item--next\\', {\\'paging-item--disabled\\' : index === pages}]\"\\n' +\r\n                    '        @click=\"next\"&gt;next&lt;\/li&gt;\\n' +\r\n                    '    &lt;\/ul&gt;',\r\n                props : {\r\n\r\n                    \/\/\u9875\u9762\u4e2d\u7684\u53ef\u89c1\u9875\u7801\uff0c\u5176\u4ed6\u7684\u4ee5...\u66ff\u4ee3, \u5fc5\u987b\u662f\u5947\u6570\r\n                    perPages : {\r\n                        type : Number,\r\n                        default : 5\r\n                    },\r\n\r\n                    \/\/\u5f53\u524d\u9875\u7801\r\n                    pageIndex : {\r\n                        type : Number,\r\n                        default : 1\r\n                    },\r\n\r\n                    \/\/\u6bcf\u9875\u663e\u793a\u6761\u6570\r\n                    pageSize : {\r\n                        type : Number,\r\n                        default : 10\r\n                    },\r\n\r\n                    \/\/\u603b\u8bb0\u5f55\u6570\r\n                    total : {\r\n                        type : Number,\r\n                        default : 1\r\n                    },\r\n\r\n                },\r\n                methods : {\r\n                    prev(){\r\n                        if (this.index &gt; 1) {\r\n                            this.go(this.index - 1)\r\n                        }\r\n                    },\r\n                    next(){\r\n                        if (this.index &lt; this.pages) {\r\n                            this.go(this.index + 1)\r\n                        }\r\n                    },\r\n                    first(){\r\n                        if (this.index !== 1) {\r\n                            this.go(1)\r\n                        }\r\n                    },\r\n                    last(){\r\n                        if (this.index != this.pages) {\r\n                            this.go(this.pages)\r\n                        }\r\n                    },\r\n                    go (page) {\r\n                        if (this.index !== page) {\r\n                            this.index = page\r\n                            \/\/\u7236\u7ec4\u4ef6\u901a\u8fc7change\u65b9\u6cd5\u6765\u63a5\u53d7\u5f53\u524d\u7684\u9875\u7801\r\n                            this.$emit('change', this.index)\r\n                        }\r\n                    }\r\n                },\r\n                computed : {\r\n\r\n                    \/\/\u8ba1\u7b97\u603b\u9875\u7801\r\n                    pages(){\r\n                        return Math.ceil(this.size \/ this.limit)\r\n                    },\r\n\r\n                    \/\/\u8ba1\u7b97\u9875\u7801\uff0c\u5f53count\u7b49\u53d8\u5316\u65f6\u81ea\u52a8\u8ba1\u7b97\r\n                    pagers () {\r\n                        const array = []\r\n                        const perPages = this.perPages\r\n                        const pageCount = this.pages\r\n                        let current = this.index\r\n                        const _offset = (perPages - 1) \/ 2\r\n\r\n\r\n                        const offset = {\r\n                            start : current - _offset,\r\n                            end   : current + _offset\r\n                        }\r\n\r\n                        \/\/-1, 3\r\n                        if (offset.start &lt; 1) {\r\n                            offset.end = offset.end + (1 - offset.start)\r\n                            offset.start = 1\r\n                        }\r\n                        if (offset.end &gt; pageCount) {\r\n                            offset.start = offset.start - (offset.end - pageCount)\r\n                            offset.end = pageCount\r\n                        }\r\n                        if (offset.start &lt; 1) offset.start = 1\r\n\r\n                        this.showPrevMore = (offset.start &gt; 1)\r\n                        this.showNextMore = (offset.end &lt; pageCount)\r\n\r\n                        for (let i = offset.start; i &lt;= offset.end; i++) {\r\n                            array.push(i)\r\n                        }\r\n\r\n                        return array\r\n                    }\r\n                },\r\n                data () {\r\n                    return {\r\n                        index : this.pageIndex, \/\/\u5f53\u524d\u9875\u7801\r\n                        limit : this.pageSize, \/\/\u6bcf\u9875\u663e\u793a\u6761\u6570\r\n                        size : this.total || 1, \/\/\u603b\u8bb0\u5f55\u6570\r\n                        showPrevMore : false,\r\n                        showNextMore : false\r\n                    }\r\n                },\r\n                watch : {\r\n                    pageIndex(val) {\r\n                        this.index = val || 1\r\n                    },\r\n                    pageSize(val) {\r\n                        this.limit = val || 10\r\n                    },\r\n                    total(val) {\r\n                        this.size = val || 1\r\n                    }\r\n                }\r\n            }\r\n        },\r\n        data:{\r\n            pageSize : 10 , \/\/\u6bcf\u9875\u663e\u793a20\u6761\u6570\u636e\r\n            currentPage : 1, \/\/\u5f53\u524d\u9875\u7801\r\n            count : 30, \/\/\u603b\u8bb0\u5f55\u6570\r\n            items : []\r\n        },\r\n        mounted() {\r\n            $.ajax({\r\n                type:'post',\r\n                url:'\/api\/admin\/info',\r\n                success:function (data){\r\n                    console.log(data)\r\n                }\r\n            })\r\n        },\r\n        methods: {\r\n            \/\/\u4ecepage\u7ec4\u4ef6\u4f20\u9012\u8fc7\u6765\u7684\u5f53\u524dpage\r\n            pageChange (page) {\r\n                \/\/ this.currentPage = page\r\n                \/\/ this.getList()\r\n            }\r\n        }\r\n    })\r\n\r\n&lt;\/script&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&lt;script type=&#8221;text\/javascript&#8221; src=&#8221;https:\/\/cdn.boot [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-8408","post","type-post","status-publish","format-standard","hentry","category-11"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/8408","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8408"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/8408\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8408"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=8408"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=8408"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}