pull/9/head
wangxueliang 2017-12-20 10:56:21 +08:00
parent 693b033b46
commit 4337af9308
9 changed files with 319 additions and 67 deletions

View File

@ -40,6 +40,7 @@ export default {
return {
isExistSlot: false,
scale: 1,
childrenWidth: 0,
}
},
computed: {
@ -55,16 +56,16 @@ export default {
}
},
childrenStyle () {
const children = this.$refs.avatorChildren
let style = {}
if (this.isExistSlot) {
const { scale, isExistSlot, childrenWidth } = this
if (isExistSlot) {
style = {
msTransform: `scale(${this.scale})`,
WebkitTransform: `scale(${this.scale})`,
transform: `scale(${this.scale})`,
msTransform: `scale(${scale})`,
WebkitTransform: `scale(${scale})`,
transform: `scale(${scale})`,
position: 'absolute',
// display: 'inline-block',
left: `calc(50% - ${Math.round(children.offsetWidth / 2)}px)`,
display: 'inline-block',
left: `calc(50% - ${Math.round(childrenWidth / 2)}px)`,
}
}
return style
@ -76,10 +77,10 @@ export default {
const children = $refs.avatorChildren
this.isExistSlot = !src && !icon
if (children) {
const childrenWidth = children.offsetWidth
this.childrenWidth = children.offsetWidth
const avatarWidth = $el.getBoundingClientRect().width
if (avatarWidth - 8 < childrenWidth) {
this.scale = (avatarWidth - 8) / childrenWidth
if (avatarWidth - 8 < this.childrenWidth) {
this.scale = (avatarWidth - 8) / this.childrenWidth
} else {
this.scale = 1
}

View File

@ -22,7 +22,7 @@
</div>
<br/>
<div>
<avatar shape="square" size="large">{{avatarValue}}</avatar>
<avatar shape="square" size="large" :styles="{'backgroundColor': color}">{{avatarValue}}</avatar>
<AntButton @click="changeValue"></AntButton>
</div>
<br/>
@ -36,15 +36,21 @@
<script>
import '../style'
import { Avatar, Button, Badge } from 'antd/index'
const UserList = ['U', 'Lucy', 'Tom', 'Edward']
const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae']
export default {
data () {
return {
avatarValue: 'current',
avatarValue: UserList[0],
color: colorList[0],
}
},
methods: {
changeValue () {
this.avatarValue = 'changed'
const index = UserList.indexOf(this.avatarValue)
this.avatarValue = index < UserList.length - 1 ? UserList[index + 1] : UserList[0]
this.color = index < colorList.length - 1 ? colorList[index + 1] : colorList[0]
},
},
components: {

View File

@ -0,0 +1,124 @@
<script>
import PropTypes from 'vue-types'
import KEYCODE from './KeyCode'
function noop () {
}
export default {
props: {
rootPrefixCls: PropTypes.String,
changeSize: PropTypes.func.def(noop),
quickGo: PropTypes.func.def(noop),
selectComponentClass: PropTypes.func.def(noop),
current: PropTypes.number,
pageSizeOptions: PropTypes.array.def(['10', '20', '30', '40']),
pageSize: PropTypes.number,
locale: PropTypes.object,
},
data () {
return {
goInputText: '',
stateCurrent: this.current,
}
},
methods: {
buildOptionText (value) {
return `${value} ${this.locale.items_per_page}`
},
changeValue (e) {
this.goInputText = e.target.value
},
go (e) {
let val = this.goInputText
if (val === '') {
return
}
val = Number(val)
if (isNaN(val)) {
val = this.stateCurrent
}
if (e.keyCode === KEYCODE.ENTER || e.type === 'click') {
this.goInputText = ''
this.stateCurrent = this.quickGo(val)
}
},
},
render () {
const locale = this.locale
const prefixCls = `${this.rootPrefixCls}-options`
const changeSize = this.changeSize
const quickGo = this.quickGo
const goButton = this.goButton
const buildOptionText = this.buildOptionText
const Select = this.selectComponentClass
let changeSelect = null
let goInput = null
let gotoButton = null
if (!(changeSize || quickGo)) {
return null
}
if (changeSize && Select) {
const Option = Select.Option
const pageSize = this.pageSize || this.pageSizeOptions[0]
const options = this.pageSizeOptions.map((opt, i) => (
<Option key={i} value={opt}>{buildOptionText(opt)}</Option>
))
changeSelect = (
<Select
prefixCls={this.selectPrefixCls}
showSearch={false}
class={`${prefixCls}-size-changer`}
optionLabelProp='children'
dropdownMatchSelectWidth={false}
value={pageSize.toString()}
onChange={this.changeSize}
getPopupContainer={triggerNode => triggerNode.parentNode}
>
{options}
</Select>
)
}
if (quickGo) {
if (goButton) {
if (typeof goButton === 'boolean') {
gotoButton = (
<button
type='button'
onClick={this.go}
onKeyup={this.go}
>
{locale.jump_to_confirm}
</button>
)
} else {
gotoButton = goButton
}
}
goInput = (
<div class={`${prefixCls}-quick-jumper`}>
{locale.jump_to}
<input
type='text'
value={this.goInputText}
onInput={this.changeValue}
onKeyup={this.go}
/>
{locale.page}
{gotoButton}
</div>
)
}
return (
<li class={`${prefixCls}`}>
{changeSelect}
{goInput}
</li>
)
},
}
</script>

View File

@ -1,12 +1,3 @@
<template>
<li
:class="classes"
@click="handleClick"
@keyPress="handleKeyPress"
:title="showTitle ? 'page' : null">
<a>{{page}}</a>
</li>
</template>
<script>
export default {
name: 'Page',
@ -15,6 +6,10 @@ export default {
page: Number,
active: Boolean,
showTitle: Boolean,
itemRender: {
type: Function,
default: () => {},
},
},
computed: {
classes () {
@ -37,5 +32,16 @@ export default {
this.$emit('keyPress', event, this.handleClick, this.page)
},
},
render () {
return (
<li
class={this.classes}
onClick={this.handleClick}
onKeypress={this.handleKeyPress}
title={this.showTitle ? this.page : null}>
{this.itemRender(this.page, 'page', <a>{this.page}</a>)}
</li>
)
},
}
</script>

View File

@ -1,17 +1,42 @@
<template>
<div>
基本
<Pagination current=1 total=50 />
</br>
更多
<Pagination :current="6" total=500 />
</br>
简洁
<div style="margin-bottom:10px">
<pagination :simple="simple" :current="current" :total="total"></pagination>
<pagination :simple="simple" :current="5" :total="total"></pagination>
</div>
</br>
改值操作
<div style="margin-bottom:10px">
<pagination :current="current" :total="total" @change="onchange"></pagination>
<vc-button @click="changeValue"></vc-button>
</div>
</br>
双向绑定
<div>
<pagination v-model="current" :total="total" :showTotal="showTotal"></pagination>
<vc-button @click="changeValue"></vc-button>
<vc-button @click="getValue"></vc-button>
</div>
</br>
迷你
<Pagination :current="1" total=50 size="small"/>
<Pagination :current="1" total=50 :showTotal="showTotal" size="small"/>
</br>
总数
<Pagination :current="1" total=50 :showTotal="showTotal"/>
<Pagination :current="1" total=50 :showTotal="showTotal1"/>
</br>
跳转
<Pagination v-model="current" total=50 :showQuickJumper="showQuickJumper"/>
<vc-button @click="getValue"></vc-button>
</br>
上一步下一步
<Pagination total=500 :itemRender="itemRender" />
</div>
</template>
<script>
@ -23,6 +48,7 @@ export default {
simple: true,
current: 1,
total: 483,
showQuickJumper: true,
}
},
methods: {
@ -30,13 +56,24 @@ export default {
this.current = 4
},
getValue () {
alert(this.current)
console.log(this.current)
},
showTotal (total) {
return `${total}`
return `Total ${total} items`
},
showTotal1 (total, range) {
return `${range[0]}-${range[1]} of ${total} items`
},
onchange (page) {
alert(page)
console.log(page)
},
itemRender (current, type, originalElement) {
if (type === 'prev') {
return <a>Previous</a>
} else if (type === 'next') {
return <a>Next</a>
}
return originalElement
},
},
components: {

View File

@ -1,9 +1,21 @@
<script>
import Button from '../button/index'
import Pager from './Pager'
import Options from './Options'
import locale from './locale/zh_CN'
import KEYCODE from './KeyCode'
//
function isInteger (value) {
return typeof value === 'number' &&
isFinite(value) &&
Math.floor(value) === value
}
function defaultItemRender (page, type, element) {
return element
}
export default {
name: 'Pagination',
props: {
@ -12,15 +24,15 @@ export default {
default: 'ant-pagination',
},
current: {
type: Number,
type: [Number, String],
default: 1,
},
total: {
type: Number,
type: [Number, String],
default: 0,
},
pageSize: {
type: Number,
type: [Number, String],
default: 10,
},
showSizeChanger: {
@ -45,6 +57,10 @@ export default {
default: true,
},
showTotal: Function,
itemRender: {
type: Function,
default: defaultItemRender,
},
},
model: {
prop: 'current',
@ -52,17 +68,12 @@ export default {
data () {
const { current } = this
return {
stateCurrent: current,
stateCurrent: +current,
}
},
methods: {
isInteger (value) {
return typeof value === 'number' &&
isFinite(value) &&
Math.floor(value) === value
},
isValid (page) {
return this.isInteger(page) && page >= 1 && page !== this.stateCurrent
return isInteger(page) && page >= 1 && page !== this.stateCurrent
},
calculatePage (p) {
let pageSize = p
@ -165,7 +176,7 @@ export default {
},
watch: {
current (val) {
this.stateCurrent = val
this.stateCurrent = +val
},
},
components: {
@ -185,6 +196,9 @@ export default {
const goButton = this.showQuickJumper
const pageBufferSize = this.showLessItems ? 1 : 2
const { stateCurrent, pageSize } = this
const smallClass = this.size === 'small' ? 'mini' : ''
const prevPage = stateCurrent - 1 > 0 ? stateCurrent - 1 : 0
const nextPage = stateCurrent + 1 < allPages ? stateCurrent + 1 : allPages
if (this.simple) {
if (goButton) {
@ -207,7 +221,7 @@ export default {
}
}
return (
<ul class={`${prefixCls} ${prefixCls}-simple`}>
<ul class={`${prefixCls} ${prefixCls}-simple ${smallClass}`}>
<li
title={this.showTitle ? locale.prev_page : null}
onClick={this.prev}
@ -216,7 +230,7 @@ export default {
class={`${this.hasPrev() ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
aria-disabled={!this.hasPrev()}
>
<a class={`${prefixCls}-item-link`} />
{this.itemRender(prevPage, 'prev', <a class={`${prefixCls}-item-link`} />)}
</li>
<li
title={this.showTitle ? `${stateCurrent}/${allPages}` : null}
@ -241,7 +255,7 @@ export default {
class={`${this.hasNext() ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
aria-disabled={!this.hasNext()}
>
<a class={`${prefixCls}-item-link`} />
{this.itemRender(nextPage, 'next', <a class={`${prefixCls}-item-link`} />)}
</li>
{gotoButton}
</ul>
@ -260,6 +274,7 @@ export default {
page={i}
active={active}
showTitle={this.showTitle}
itemRender={this.itemRender}
/>
)
}
@ -275,7 +290,9 @@ export default {
onKeypress={this.runIfEnterJumpPrev}
class={`${prefixCls}-jump-prev`}
>
<a class={`${prefixCls}-item-link`} />
{this.itemRender(
this.getJumpPrevPage(), 'jump-prev', <a class={`${prefixCls}-item-link`} />
)}
</li>
)
jumpNext = (
@ -287,7 +304,9 @@ export default {
onKeypress={this.runIfEnterJumpNext}
class={`${prefixCls}-jump-next`}
>
<a class={`${prefixCls}-item-link`} />
{this.itemRender(
this.getJumpNextPage(), 'jump-next', <a class={`${prefixCls}-item-link`} />
)}
</li>
)
lastPager = (
@ -299,6 +318,7 @@ export default {
page={allPages}
active={false}
showTitle={this.showTitle}
itemRender={this.itemRender}
/>
)
firstPager = (
@ -310,6 +330,7 @@ export default {
page={1}
active={false}
showTitle={this.showTitle}
itemRender={this.itemRender}
/>
)
@ -335,6 +356,7 @@ export default {
page={i}
active={active}
showTitle={this.showTitle}
itemRender={this.itemRender}
/>
)
}
@ -350,6 +372,7 @@ export default {
className={`${prefixCls}-item-after-jump-prev`}
active={false}
showTitle={this.showTitle}
itemRender={this.itemRender}
/>
)
pagerList.unshift(jumpPrev)
@ -365,6 +388,7 @@ export default {
className={`${prefixCls}-item-before-jump-next`}
active={false}
showTitle={this.showTitle}
itemRender={this.itemRender}
/>
)
pagerList.push(jumpNext)
@ -397,7 +421,7 @@ export default {
const nextDisabled = !this.hasNext()
return (
<ul
class={`${prefixCls} ${this.className}`}
class={`${prefixCls} ${smallClass}`}
unselectable='unselectable'
>
{totalText}
@ -409,7 +433,7 @@ export default {
class={`${!prevDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
aria-disabled={prevDisabled}
>
<a class={`${prefixCls}-item-link`} />
{this.itemRender(prevPage, 'prev', <a class={`${prefixCls}-item-link`} />)}
</li>
{pagerList}
<li
@ -420,8 +444,20 @@ export default {
class={`${!nextDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
aria-disabled={nextDisabled}
>
<a class={`${prefixCls}-item-link`} />
{this.itemRender(nextPage, 'next', <a class={`${prefixCls}-item-link`} />)}
</li>
<Options
locale={locale}
rootPrefixCls={prefixCls}
selectComponentClass={this.selectComponentClass}
selectPrefixCls={this.selectPrefixCls}
changeSize={this.showSizeChanger ? this.changePageSize : null}
current={stateCurrent}
pageSize={pageSize}
pageSizeOptions={this.pageSizeOptions}
quickGo={this.showQuickJumper ? this.handleChange : null}
goButton={goButton}
/>
</ul>
)
},

View File

@ -326,3 +326,65 @@
}
}
}
.@{pagination-prefix-cls} {
&-options {
margin-left: 15px;
&-size-changer {
float: left;
width: 80px;
}
&-quick-jumper {
float: left;
margin-left: 16px;
height: 28px;
line-height: 28px;
input {
margin: 0 8px;
box-sizing: border-box;
background-color: #fff;
border-radius: 6px;
border: 1px solid #d9d9d9;
outline: none;
padding: 3px 12px;
width: 50px;
height: 28px;
&:hover {
border-color: #2db7f5;
}
}
button {
display: inline-block;
margin: 0 8px;
font-weight: 500;
text-align: center;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 0 15px;
font-size: 12px;
border-radius: 6px;
height: 28px;
user-select: none;
transition: all .3s cubic-bezier(.645,.045,.355,1);
position: relative;
color: rgba(0,0,0,.65);
background-color: #fff;
border-color: #d9d9d9;
&:hover, &:active, &:focus {
color: #2db7f5;
background-color: #fff;
border-color: #2db7f5;
}
}
}
}
}

View File

@ -1,7 +1,7 @@
<script>
import Star from './Star.vue'
import Icon from '../icon'
import { getOffsetLeft, deepClone } from './util'
import { getOffsetLeft } from './util'
import { cloneVNodes } from '../_util/vnode'
export default {

View File

@ -37,23 +37,3 @@ export function getOffsetLeft (el) {
pos.left += getScroll(w)
return pos.left
}
export function deepClone (vnodes, createElement) {
function cloneVNode (vnode) {
const clonedChildren = vnode.children && vnode.children.map(vnode => cloneVNode(vnode))
const cloned = createElement(vnode.tag, vnode.data, clonedChildren)
cloned.text = vnode.text
cloned.isComment = vnode.isComment
cloned.componentOptions = vnode.componentOptions
cloned.elm = vnode.elm
cloned.context = vnode.context
cloned.ns = vnode.ns
cloned.isStatic = vnode.isStatic
cloned.key = vnode.key
return cloned
}
const clonedVNodes = vnodes.map(vnode => cloneVNode(vnode))
return clonedVNodes
}