修改iview-design库

修改iview-design库

由于项目需求，对iview源码进行了修改，并重新上传至npm了iview-by-ldy

已修改组件：

1.<page>添加了跳转按钮

components/page/options.vue:

第15行添加按钮：

<Button style="vertical-align: top;margin-left: 8px;line-height: 30px;" type="primary"  @click="tabPage"
>跳转</Button>

第10行 input 标签增加 ref="pageInput"属性，并将type="text"改为type="number"
            <input
              type="number"
              :value="_current"
              autocomplete="off"
              spellcheck="false"
              :disabled="disabled"
              ref="pageInput"
              @keyup.enter="changePage"
            >

methods中增加方法：

tabPage() {
		let page = 0
                if (this.$refs.pageInput.value != this.current) {
                    const allPages = this.allPages;
                    if (this.$refs.pageInput.value > allPages) {
                        page = allPages;
                    } else {
			page = this.$refs.pageInput.value;
                    }
                }
		if (page) {
                     this.$emit('on-page', Number(page));
                }
        }

2. <input> : 修改了clearable展示逻辑，使其不与后缀图标冲突

components/input/input.vue:

第五行增加属性：：

:style="{right:search||showSuffix||password?$refs.searchIco.offsetWidth-5+'px':0}"
变为
<i class="ivu-icon" :class="['ivu-icon-ios-close-circle', prefixCls + '-icon', prefixCls + '-icon-clear' , prefixCls + '-icon-normal']" v-if="clearable && currentValue && !itemDisabled" @click="handleClear" :style="{right:search||showSuffix||password?$refs.searchIco.offsetWidth-5+'px':0}"></i>

第七行；v-else-if改为v-if,并添加ref="searchIco"

<i class="ivu-icon ivu-icon-ios-search" :class="[prefixCls + '-icon', prefixCls + '-icon-normal', prefixCls + '-search-icon']" v-if="search && enterButton === false" @click="handleSearch" ref="searchIco"></i>

3. 修改了 dropdown的背景色，从#fff转化为了@component-background，方便项目内调整

select-dropdown.less:

background-color: #fff;改为
background-color: @component-background;

4. <select> : 增加vue-scroll，美化滚动条：

首先安装vuescroll,可以全局使用也可以局部引入

components/select/dropdown.vue:

第二行：
<slot></slot>
改为
<div style="max-height:200px" v-if="vueScrollEnable">
    <vuescroll :style="{ height: dropHeight }">
        <slot></slot>
    </vuescroll>
</div>
<slot v-else></slot>

prop内添加vueScrollEnable属性：
vueScrollEnable: {
    type: Boolean,
    efault: false
}

computed内增加dropHeight属性：
dropHeight() {
    if (this.$parent && this.$parent.selectOptions &&this.$parent.selectOptions.length > 6) {
        return '200px'
    } else {
        return 'auto'
    }
}

component/select/select.vue：

第58行Drop组件中增加 :vueScrollEnable="true" 属性	

styles/select-dropdown.less:
注释掉了第7行，overflow:auto

第6行max-height:200px改为了max-height：210px