fix demo

components/avatar/Avatar.vue

@@ -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})`,
+          msTransform: `scale(${scale})`,
-          WebkitTransform: `scale(${this.scale})`,
+          WebkitTransform: `scale(${scale})`,
-          transform: `scale(${this.scale})`,
+          transform: `scale(${scale})`,
           position: 'absolute',
-          // display: 'inline-block',
+          display: 'inline-block',
-          left: `calc(50% - ${Math.round(children.offsetWidth / 2)}px)`,
+          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) {
+        if (avatarWidth - 8 < this.childrenWidth) {
-          this.scale = (avatarWidth - 8) / childrenWidth
+          this.scale = (avatarWidth - 8) / this.childrenWidth
         } else {
           this.scale = 1
         }

components/avatar/demo/index.vue

@@ -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: {

components/pagination/Options.vue

@@ -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>

components/pagination/Pager.vue

@@ -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>

components/pagination/demo/index.vue

@@ -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: {

components/pagination/pagination.vue

@@ -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>
     )
   },

components/pagination/style/index.less

@@ -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;
+        }
+      }
+    }
+  }
+}
+

components/rate/Rate.vue

@@ -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 {

components/rate/util.js

@@ -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
-}