fix demo
parent
693b033b46
commit
4337af9308
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
},
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue