基于vue的select分页

• 最近有个需求就是写一个带分页的列表，由于想学习VUE所以就拿VUE写了一个简单的插件。
  多的不说
• 多的不说直接上代码了，代码中有什么问题还望大神指点下

1.css

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.hide-select {
  display: none;
}
.page-select {
  display: inline-block;
  font-family: Microsoft YaHei;
  color: #333;
  width: 360px;
  height: 30px;
  box-sizing: border-box;
  padding-left: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 2px;
  position: relative;
}
.page-select .page-select-text {
  width: 100%;
  line-height: 28px;
}
.page-select .page-select-content {
  display: none;
  position: absolute;
  box-sizing: border-box;
  width: 360px;
  left: -1px;
  top: 30px;
  border: solid 1px #349bfc;
}
.page-select .page-select-content.show-select {
  display: block;
}
.page-select .page-select-list {
  width: 100%;
}
.page-select .page-select-list li {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding-left: 10px;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
  color: #333333;
  font-size: 14px;
}
.page-select .page-select-list li:hover {
  background-color: #239bfc;
  color: #FFFFFF;
}
.page-select .page-select-list li.active {
  background-color: #239bfc;
  color: #FFFFFF;
}
.page-select .page-select-page {
  box-sizing: border-box;
  height: 38px;
  background-color: #f0f0f0;
  color: #666666;
  font-size: 14px;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
}
.page-select .page-select-page img {
  cursor: pointer;
}
.page-select .page-select-page .first-btn {
  float: left;
  margin-left: 10px;
}
.page-select .page-select-page .left-btn {
  float: left;
  margin-left: 24px;
}
.page-select .page-select-page .left-btn-text {
  float: left;
}
.page-select .page-select-page .page-select-mun {
  float: left;
  width: 36px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  margin-left: 10px;
  border: solid 1px #cfcfcf;
  margin-top: -5px;
}
.page-select .page-select-page .right-text {
  float: left;
  margin-left: 10px;
}
.page-select .page-select-page .right-btn {
  float: left;
  margin-right: 24px;
}
.page-select .page-select-page .last-btn {
  float: left;
  margin-right: 10px;
}
/*# sourceMappingURL=selectPage.css.map */

2.html

<div class="page-select-div" id="pageSelect"  @click.stop >
        <page-select
            :is-show="isShow"
            :now-select="nowSelect"
            :select-id="selectId"
            :select-text="selectText"
            :send-ajax-data="sendAjaxData"
            @selected="selected"
            @show="show"
        ></page-select>
    </div>

3.组件的代码

Vue.component(
    'page-select',
    {
        props: [ 'select-id','select-text','is-show', 'now-select','send-ajax-data'],
        data: function () {
            return {
                nowPage: 0,
                totalNum: 100,
                selectList: [
                    {selectId1: '1', selectText1: 'edqweqwe'},
                    {selectId1: '2', selectText1: 'qweqweqw'},
                    {selectId1: '3', selectText1: 'qweqweqwe'}
                ],
                searchText:''
            }
        },
        methods: {
            show: function () {
                this.$emit('show')
            },
            selected: function (item) {
                this.searchText = item[this.selectText]
                this.$emit('selected', item);
            },
            firstPage: function () {
                this.nowPage = 0;
            },
            prePage: function () {
                if (this.nowPage > 0) {
                    this.nowPage--;
                }
            },
            nextPage: function () {
                if ((this.nowPage + 1) < this.totalPage) {
                    this.nowPage++;
                }
            },
            lastPage: function () {
                this.nowPage = this.totalPage - 1;
            },
            sendAjax:function () {
                console.log(this.sendAjaxData)
            },
            searchAjax:function () {
                this.nowPage = 0;
                this.sendAjax();
            }
        },
        template: '<div class="page-select" @click="show">' +
        '            <input v-model="searchText" class="page-select-text" @keydown="searchAjax">' +
        '            <div class="page-select-content" :class="{\'show-select\':isShow}">' +
        '                <ul class="page-select-list">' +
        '                    <li v-for="(item,index) in selectList" :class="{active:item[selectId]==nowSelect.id}" @click="selected(item)">{{item[selectText]}}</li>' +
        '                </ul>' +
        '                <div class="page-select-page" @click.stop>' +
        '                    <div><img src="pullPage/img/first.png" class="first-btn" @click="firstPage">' +
        '                    <img src="pullPage/img/left.png" class="left-btn" @click="prePage"></div>' +
        '                    <div style="height: 14px;line-height: 14px"><span class="left-btn-text">第</span>' +
        '                    <div class="page-select-mun">{{nowPage+1}}</div>' +
        '                    <span class="right-text">页（共{{totalNum}}条）</span></div>' +
        '                    <div><img src="pullPage/img/right.png" class="right-btn" @click="nextPage">' +
        '                    <img src="pullPage/img/last.png" class="last-btn" @click="lastPage"></div>' +
        '                </div>' +
        '            </div>' +
        '        </div>',
        computed: {
            totalPage: function () {
                var totalPage = Math.ceil(this.totalNum / 10);
                return totalPage;
            }
        }
    }
);

4.调用时代码

 var sendAjaxData = {
        a:1,
        b:2
    }
    var pageSelect = new Vue({
        el: '#pageSelect',
        data: {
            isShow: false,
            nowSelect: {
                val: '',
                id: ''
            },
            selectId:'selectId1',//需要传的key，及后台传回来的id
            selectText:'selectText1',//需要传的text，及后台传回来的所需显示的text
            sendAjaxData:sendAjaxData //后台需要的值
        },
        methods: {
            show: function () {
                this.isShow = !this.isShow;
            },
            selected: function (item) {
                this.nowSelect.id = item[this.selectId];
                this.nowSelect.val = item[this.selectText];
            }
        }
    });
    //点击空白下拉选消失
    $(document).click(function () {
        pageSelect.isShow = false;
    });

因为后台说吧AJAX也写在组件中 所以我的思路是在父组件中把值传入子组件中。
哈哈，就写这么多吧，第一次写，不喜勿喷。