Merge branch 'master' of https://github.com/iview/iview into carousel

Conflicts:
	src/styles/components/index.less
	test/app.vue
	test/main.js

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iview",
-  "version": "0.9.15",
+  "version": "0.9.16",
   "title": "iView",
   "description": "A high quality  UI components Library with Vue.js",
   "homepage": "http://www.iviewui.com",

src/components/carousel/carousel-item.vue

@@ -21,7 +21,7 @@
                     width: `${this.width}px`,
                     height: `${this.height}`,
                     left: `${this.left}px`
-                }
+                };
             }
         },
         compiled () {

src/components/carousel/carousel.vue

@@ -24,12 +24,13 @@
 </template>
 <script>
     import Icon from '../icon/icon.vue';
-    import { oneOf, getStyle, deepCopy, getScrollBarSize } from '../../utils/assist';
+    import { getStyle } from '../../utils/assist';
 
     const prefixCls = 'ivu-carousel';
 
     export default {
         name: 'Carousel',
+        components: { Icon },
         props: {
             arrow: {
                 type: String,
@@ -74,7 +75,7 @@
                 slideInstances: [],
                 timer: null,
                 ready: false
-            }
+            };
         },
         computed: {
             classes () {
@@ -93,13 +94,13 @@
                 return [
                     `${prefixCls}-arrow`,
                     `${prefixCls}-arrow-${this.arrow}`
-                ]
+                ];
             },
             dotsClasses () {
                 return [
                     `${prefixCls}-dots`,
                     `${prefixCls}-dots-${this.dots}`
-                ]
+                ];
             }
         },
         methods: {
@@ -127,7 +128,7 @@
                     });
                 }
             },
-            updateSlides (init, slot = false) {
+            updateSlides (init ) {
                 let slides = [];
                 let index = 1;
 
@@ -173,12 +174,10 @@
                 index += offset;
                 while (index < 0) index += this.slides.length;
                 index = index % this.slides.length;
-                this.$emit('on-change', this.currentIndex, index);
                 this.currentIndex = index;
             },
             dotsEvent (event, n) {
                 if (event === this.trigger && this.currentIndex !== n) {
-                    this.$emit('on-change', this.currentIndex, n);
                     this.currentIndex = n;
                 }
             },
@@ -208,6 +207,7 @@
                 this.setAutoplay();
             },
             currentIndex (val, oldVal) {
+                this.$emit('on-change', oldVal, val);
                 this.updateOffset();
             },
             height () {

src/components/form/form-item.vue

@@ -3,7 +3,7 @@
         <label :class="[prefixCls + '-label']" :style="labelStyles" v-if="label">{{ label }}</label>
         <div :class="[prefixCls + '-content']" :style="contentStyles">
             <slot></slot>
-            <div transition="fade" :class="[prefixCls + '-error-tip']" v-if="validateState === 'error'">{{ validateMessage }}</div>
+            <div transition="fade" :class="[prefixCls + '-error-tip']" v-if="validateState === 'error' && showMessage && form.showMessage">{{ validateMessage }}</div>
         </div>
     </div>
 </template>
@@ -61,6 +61,10 @@
             },
             validateStatus: {
                 type: Boolean
+            },
+            showMessage: {
+                type: Boolean,
+                default: true
             }
         },
         data () {

src/components/form/form.vue

@@ -28,6 +28,10 @@
             inline: {
                 type: Boolean,
                 default: false
+            },
+            showMessage: {
+                type: Boolean,
+                default: true
             }
         },
         data () {

src/components/input-number/input-number.vue

@@ -144,32 +144,52 @@
             preventDefault (e) {
                 e.preventDefault();
             },
-            up () {
-                if (this.upDisabled) {
+            up (e) {
+                const targetVal = Number(e.target.value);
+                if (this.upDisabled && isNaN(targetVal)) {
                     return false;
                 }
-                this.changeStep('up');
+                this.changeStep('up', e);
             },
-            down () {
-                if (this.downDisabled) {
+            down (e) {
+                const targetVal = Number(e.target.value);
+                if (this.downDisabled && isNaN(targetVal)) {
                     return false;
                 }
-                this.changeStep('down');
+                this.changeStep('down', e);
             },
-            changeStep (type) {
+            changeStep (type, e) {
                 if (this.disabled) {
                     return false;
                 }
 
+                const targetVal = Number(e.target.value);
                 let val = Number(this.value);
                 const step = Number(this.step);
                 if (isNaN(val)) {
                     return false;
                 }
 
-                if (type == 'up') {
+                // input a number, and key up or down
+                if (!isNaN(targetVal)) {
+                    if (type === 'up') {
+                        if (addNum(targetVal, step) <= this.max) {
+                            val = targetVal;
+                        } else {
+                            return false;
+                        }
+                    } else if (type === 'down') {
+                        if (addNum(targetVal, -step) >= this.min) {
+                            val = targetVal;
+                        } else {
+                            return false;
+                        }
+                    }
+                }
+
+                if (type === 'up') {
                     val = addNum(val, step);
-                } else if (type == 'down') {
+                } else if (type === 'down') {
                     val = addNum(val, -step);
                 }
                 this.setValue(val);
@@ -190,10 +210,10 @@
             keyDown (e) {
                 if (e.keyCode === 38) {
                     e.preventDefault();
-                    this.up();
+                    this.up(e);
                 } else if (e.keyCode === 40) {
                     e.preventDefault();
-                    this.down();
+                    this.down(e);
                 }
             },
             change (event) {
@@ -230,7 +250,7 @@
                 }
             }
         },
-        ready () {
+        compiled () {
             this.changeVal(this.value);
         },
         watch: {

src/components/menu/submenu.vue

@@ -5,12 +5,20 @@
             <Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon>
         </div>
         <ul :class="[prefixCls]" v-if="mode === 'vertical'" v-show="opened"><slot></slot></ul>
-        <Drop v-else v-show="opened" placement="bottom" transition="slide-up" v-ref:drop><slot></slot></Drop>
+        <Drop
+            v-else
+            v-show="opened"
+            placement="bottom"
+            transition="slide-up"
+            v-ref:drop
+            :style="dropStyle"><slot></slot></Drop>
     </li>
 </template>
 <script>
     import Drop from '../select/dropdown.vue';
     import Icon from '../icon/icon.vue';
+    import { getStyle } from '../../utils/assist';
+
     const prefixCls = 'ivu-menu';
 
     export default {
@@ -30,7 +38,8 @@
             return {
                 prefixCls: prefixCls,
                 active: false,
-                opened: false
+                opened: false,
+                dropWidth: parseFloat(getStyle(this.$el, 'width'))
             };
         },
         computed: {
@@ -49,6 +58,12 @@
             },
             accordion () {
                 return this.$parent.accordion;
+            },
+            dropStyle () {
+                let style = {};
+
+                if (this.dropWidth) style.minWidth = `${this.dropWidth}px`;
+                return style;
             }
         },
         methods: {
@@ -94,6 +109,8 @@
             opened (val) {
                 if (this.mode === 'vertical') return;
                 if (val) {
+                    // set drop a width to fixed when menu has fixed position
+                    this.dropWidth = parseFloat(getStyle(this.$el, 'width'));
                     this.$refs.drop.update();
                 } else {
                     this.$refs.drop.destroy();

src/components/poptip/poptip.vue

@@ -8,8 +8,8 @@
             :class="[prefixCls + '-rel']"
             v-el:reference
             @click="handleClick"
-            @mousedown="handleFocus"
-            @mouseup="handleBlur">
+            @mousedown="handleFocus(false)"
+            @mouseup="handleBlur(false)">
             <slot></slot>
         </div>
         <div :class="[prefixCls + '-popper']" :style="styles" transition="fade" v-el:popper v-show="visible">
@@ -91,7 +91,8 @@
         data () {
             return {
                 prefixCls: prefixCls,
-                showTitle: true
+                showTitle: true,
+                isInput: false
             };
         },
         computed: {
@@ -133,14 +134,14 @@
                 }
                 this.visible = false;
             },
-            handleFocus () {
-                if (this.trigger !== 'focus' || this.confirm) {
+            handleFocus (fromInput = true) {
+                if (this.trigger !== 'focus' || this.confirm || (this.isInput && !fromInput)) {
                     return false;
                 }
                 this.visible = true;
             },
-            handleBlur () {
-                if (this.trigger !== 'focus' || this.confirm) {
+            handleBlur (fromInput = true) {
+                if (this.trigger !== 'focus' || this.confirm || (this.isInput && !fromInput)) {
                     return false;
                 }
                 this.visible = false;
@@ -164,12 +165,41 @@
             ok () {
                 this.visible = false;
                 this.$emit('on-ok');
+            },
+            getInputChildren () {
+                const $input = this.$els.reference.querySelectorAll('input');
+                const $textarea = this.$els.reference.querySelectorAll('textarea');
+                let $children = null;
+
+                if ($input.length) {
+                    $children = $input[0];
+                } else if ($textarea.length) {
+                    $children = $textarea[0];
+                }
+
+                return $children;
             }
         },
-        ready () {
+        compiled () {
             if (!this.confirm) {
                 this.showTitle = this.$els.title.innerHTML != `<div class="${prefixCls}-title-inner"></div>`;
             }
+            // if trigger and children is input or textarea,listen focus & blur event
+            if (this.trigger === 'focus') {
+                const $children = this.getInputChildren();
+                if ($children) {
+                    $children.addEventListener('focus', this.handleFocus, false);
+                    $children.addEventListener('blur', this.handleBlur, false);
+                    this.isInput = true;
+                }
+            }
+        },
+        beforeDestroy () {
+            const $children = this.getInputChildren();
+            if ($children) {
+                $children.removeEventListener('focus', this.handleFocus, false);
+                $children.removeEventListener('blur', this.handleBlur, false);
+            }
         }
     };
 </script>

src/components/rate/index.js

@@ -0,0 +1,2 @@
+import Rate from './rate.vue';
+export default Rate;

src/components/rate/rate.vue

@@ -0,0 +1,127 @@
+<template>
+    <div :class="classes" @mouseleave="handleMouseleave">
+        <div
+            v-for="item in count"
+            :class="starCls(item)"
+            @mousemove="handleMousemove(item, $event)"
+            @click="handleClick(item)">
+            <span :class="[prefixCls + '-star-content']" type="half"></span>
+        </div>
+        <div :class="[prefixCls + '-text']" v-if="showText" v-show="value > 0">
+            <slot>{{ value }} <template v-if="value <= 1">{{ t('i.rate.star') }}</template><template v-else>{{ t('i.rate.stars') }}</template></slot>
+        </div>
+    </div>
+</template>
+<script>
+    import Locale from '../../mixins/locale';
+
+    const prefixCls = 'ivu-rate';
+
+    export default {
+        mixins: [ Locale ],
+        props: {
+            count: {
+                type: Number,
+                default: 5
+            },
+            value: {
+                type: Number,
+                default: 0
+            },
+            allowHalf: {
+                type: Boolean,
+                default: false
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            },
+            showText: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data () {
+            return {
+                prefixCls: prefixCls,
+                hoverIndex: -1,
+                isHover: false,
+                isHalf: false
+            };
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-disabled`]: this.disabled
+                    }
+                ];
+            }
+        },
+        watch: {
+            value: {
+                immediate: true,
+                handler (val) {
+                    this.setHalf(val);
+                }
+            }
+        },
+        methods: {
+            starCls (value) {
+                const hoverIndex = this.hoverIndex;
+                const currentIndex = this.isHover ? hoverIndex : this.value;
+
+                let full = false;
+                let isLast = false;
+
+                if (currentIndex > value) full = true;
+
+                if (this.isHover) {
+                    isLast = currentIndex === value + 1;
+                } else {
+                    isLast = Math.ceil(this.value) === value + 1;
+                }
+
+                return [
+                    `${prefixCls}-star`,
+                    {
+                        [`${prefixCls}-star-full`]: (!isLast && full) || (isLast && !this.isHalf),
+                        [`${prefixCls}-star-half`]: isLast && this.isHalf,
+                        [`${prefixCls}-star-zero`]: !full
+                    }
+                ];
+            },
+            handleMousemove(value, event) {
+                if (this.disabled) return;
+
+                this.isHover = true;
+                if (this.allowHalf) {
+                    const type = event.target.getAttribute('type') || false;
+                    this.isHalf = type === 'half';
+                } else {
+                    this.isHalf = false;
+                }
+                this.hoverIndex = value + 1;
+            },
+            handleMouseleave () {
+                if (this.disabled) return;
+
+                this.isHover = false;
+                this.setHalf(this.value);
+                this.hoverIndex = -1;
+            },
+            setHalf (val) {
+                this.isHalf = val.toString().indexOf('.') >= 0;
+            },
+            handleClick (value) {
+                if (this.disabled) return;
+                value++;
+                if (this.isHalf) value -= 0.5;
+                this.value = value;
+                this.$emit('on-change', value);
+                this.$dispatch('on-form-change', value);
+            }
+        }
+    };
+</script>

src/components/select/option.vue

@@ -55,7 +55,8 @@
                 this.isFocus = false;
             },
             queryChange (val) {
-                this.hidden = !new RegExp(val, 'i').test(this.searchLabel);
+                const parsedQuery = val.replace(/(\^|\(|\)|\[|\]|\$|\*|\+|\.|\?|\\|\{|\}|\|)/g, '\\$1');
+                this.hidden = !new RegExp(parsedQuery, 'i').test(this.searchLabel);
             }
         },
         compiled () {

src/index.js

@@ -28,6 +28,7 @@ import Page from './components/page';
 import Poptip from './components/poptip';
 import Progress from './components/progress';
 import Radio from './components/radio';
+import Rate from './components/rate';
 import Slider from './components/slider';
 import Spin from './components/spin';
 import Steps from './components/steps';
@@ -86,6 +87,7 @@ const iview = {
     Progress,
     Radio,
     RadioGroup: Radio.Group,
+    Rate,
     Row,
     iSelect: Select,
     Slider,

src/locale/lang/en-US.js

@@ -83,6 +83,10 @@ export default {
             page: '/page',
             goto: 'Goto',
             p: ''
+        },
+        rate: {
+            star: 'Star',
+            stars: 'Stars'
         }
     }
 };

src/locale/lang/zh-CN.js

@@ -83,6 +83,10 @@ export default {
             page: '条/页',
             goto: '跳至',
             p: '页'
+        },
+        rate: {
+            star: '星',
+            stars: '星'
         }
     }
 };

src/locale/lang/zh-TW.js

@@ -83,6 +83,10 @@ export default {
             page: '條/頁',
             goto: '跳至',
             p: '頁'
+        },
+        rate: {
+            star: '星',
+            stars: '星'
         }
     }
 };

src/styles/components/index.less

@@ -36,3 +36,4 @@
 @import "time-picker";
 @import "form";
 @import "carousel";
+@import "rate";

src/styles/components/rate.less

@@ -0,0 +1,72 @@
+@rate-prefix-cls: ~"@{css-prefix}rate";
+
+.@{rate-prefix-cls} {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    font-size: 20px;
+    vertical-align: middle;
+    font-weight: normal;
+    font-style: normal;
+
+    &-disabled &-star {
+        &:before,
+        &-content:before {
+            cursor: default;
+        }
+        &:hover {
+            transform: scale(1);
+        }
+    }
+
+    &-star {
+        display: inline-block;
+        margin: 0;
+        padding: 0;
+        margin-right: 8px;
+        position: relative;
+        font-family: 'Ionicons';
+        transition: all 0.3s ease;
+
+        &:hover {
+            transform: scale(1.1);
+        }
+
+        &:before,
+        &-content:before {
+            color: #e9e9e9;
+            cursor: pointer;
+            content: "\F4B3";
+            transition: all @transition-time @ease-in-out;
+            display: block;
+        }
+
+        &-content {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 50%;
+            height: 100%;
+            overflow: hidden;
+            &:before {
+                color: transparent;
+            }
+        }
+
+        &-half &-content:before,
+        &-full:before {
+            color: @rate-star-color;
+        }
+
+        &-half:hover &-content:before,
+        &-full:hover:before {
+            color: tint(@rate-star-color, 20%);
+        }
+    }
+    &-text {
+        margin-left: 8px;
+        vertical-align: middle;
+        display: inline-block;
+        font-size: @font-size-small;
+    }
+}

src/styles/themes/default/custom.less

@@ -14,6 +14,7 @@
 @selected-color         : fade(@primary-color, 90%);
 @tooltip-color          : #fff;
 @subsidiary-color       : #9ea7b4;
+@rate-star-color        : #f5a623;
 
 // Base
 @body-background        : #fff;

test/app.vue

@@ -48,6 +48,7 @@ li + li {
                 <li><a v-link="'/date'">Date</a></li>
                 <li><a v-link="'/form'">Form</a></li>
                 <li><a v-link="'/carousel'">Carousel</a></li>
+                <li><a v-link="'/rate'">Rate</a></li>
             </ul>
         </nav>
         <router-view></router-view>

test/main.js

@@ -6,9 +6,10 @@ import VueRouter from 'vue-router';
 import App from './app.vue';
 import iView from '../src/index';
 // import locale from '../src/locale/lang/en-US';
+import locale from '../src/locale/lang/zh-CN';
 
 Vue.use(VueRouter);
-Vue.use(iView);
+Vue.use(iView, { locale });
 
 // 开启debug模式
 Vue.config.debug = true;
@@ -139,6 +140,11 @@ router.map({
             require(['./routers/carousel.vue'], resolve);
         }
     },
+    '/rate': {
+        component: function (resolve) {
+            require(['./routers/rate.vue'], resolve);
+        }
+    },
 });
 
 router.beforeEach(function () {

test/routers/form.vue

@@ -5,7 +5,7 @@
                 <Icon type="ios-person-outline" slot="prepend"></Icon>
             </i-input>
         </Form-item>
-        <Form-item prop="password">
+        <Form-item prop="password" :show-message="false">
             <i-input type="password" :value.sync="formInline.password" placeholder="Password">
                 <Icon type="ios-locked-outline" slot="prepend"></Icon>
             </i-input>

test/routers/input.vue

@@ -1,4 +1,6 @@
 <template>
+    <Input-number :max="10" :min="1" :value="1"></Input-number>
+    <br><br>
     <i-input type="textarea" :autosize="true" placeholder="请输入..."></i-input>
     <i-input type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></i-input>
     <i-input name="a" icon="ios-clock-outline" @on-focus="focus" @on-blur="blur" readonly style="width:200px;" :value.sync="v" @on-enter="enter" @on-click="iconclick" size="large" placeholder="请输入"></i-input>

test/routers/menu.vue

@@ -1,28 +1,51 @@
 <template>
-    <Menu mode="horizontal" theme="primary" active-key="1">
-        <Submenu key="1">
+    <div style="margin: 50px;position:relative;top: 0;left: 0;">
+        <Menu mode="horizontal" :theme="theme1" active-key="1">
+            <Menu-item key="1">
+                <Icon type="ios-paper"></Icon>
+                内容管理
+            </Menu-item>
+            <Menu-item key="2">
+                <Icon type="ios-people"></Icon>
+                用户管理
+            </Menu-item>
+            <Menu-item key="1">
+                <Icon type="ios-paper"></Icon>
+                内容管理
+            </Menu-item>
+            <Menu-item key="2">
+                <Icon type="ios-people"></Icon>
+                用户管理
+            </Menu-item>
+            <Menu-item key="1">
+                <Icon type="ios-paper"></Icon>
+                内容管理
+            </Menu-item>
+            <Menu-item key="2">
+                <Icon type="ios-people"></Icon>
+                用户管理
+            </Menu-item>
+            <Submenu key="3">
                 <template slot="title">
-                <Icon type="soup-can-outline"></Icon>
-                数据管理
+                    <Icon type="stats-bars"></Icon>
+                    统计分析
                 </template>
                 <Menu-group title="使用">
-                <Menu-item key="1-1">新增和启动新增和启动</Menu-item>
-                <Menu-item key="1-2">活跃分析</Menu-item>
-                <Menu-item key="1-3">时段分析</Menu-item>
+                    <Menu-item key="3-1">新增和新</Menu-item>
+                    <Menu-item key="3-2">活跃分析</Menu-item>
+                    <Menu-item key="3-3">时段分析</Menu-item>
                 </Menu-group>
                 <Menu-group title="留存">
-                <Menu-item key="1-4">用户留存</Menu-item>
-                <Menu-item key="1-5">流失用户</Menu-item>
+                    <Menu-item key="3-4">用户留存</Menu-item>
+                    <Menu-item key="3-5">流失用户</Menu-item>
                 </Menu-group>
             </Submenu>
+            <Menu-item key="4">
+                <Icon type="settings"></Icon>
+                综合设置
+            </Menu-item>
         </Menu>
-    <br>
-    <p>切换主题</p>
-    <Radio-group :model.sync="theme1">
-        <Radio value="light"></Radio>
-        <Radio value="dark"></Radio>
-        <Radio value="primary"></Radio>
-    </Radio-group>
+    </div>
 </template>
 <script>
     export default {

test/routers/poptip.vue

@@ -1,183 +1,22 @@
-<style>
-    .tooltip_out{
-        padding: 150px;
-    }
-    body{
-        height: 1000px;
-        padding: 10px;
-    }
-    .api table{
-        font-family: Consolas,Menlo,Courier,monospace;
-        font-size: 13px;
-        border-collapse: collapse;
-        border-spacing: 0;
-        empty-cells: show;
-        border: 1px solid #e9e9e9;
-        width: 100%;
-        margin-bottom: 24px;
-    }
-    .api table th{
-        background: #f7f7f7;
-        white-space: nowrap;
-        color: #5c6b77;
-        font-weight: 600;
-    }
-    .api table td, .api table th{
-        border: 1px solid #e9e9e9;
-        padding: 8px 16px;
-        text-align: left;
-    }
-    .tip{
-        width: 24px;
-        position: fixed;
-        top: 10px;
-        right: 10px;
-    }
-    .tip-inner{
-        width: 24px;
-        height: 24px;
-        line-height: 22px;
-        text-align: center;
-        background: #fff;
-        border: 1px solid #3399ff;
-        color: #3399ff;
-        border-radius: 50%;
-        cursor: pointer;
-    }
-    .tip-content{
-        width: 200px;
-        height: 100px;
-        white-space: normal;
-    }
-</style>
 <template>
-    <Tooltip content="这里是提示文字">
-        当鼠标经过这段文字时，会显示一个气泡框
-    </Tooltip>
-    <div class="tooltip_out">
-        <!--<Tooltip placement="top" content="Tooltip 文字提示">-->
-            <!--<strong>-->
-                <!--<a>Link</a>-->
-            <!--</strong>-->
-        <!--</Tooltip>-->
-        <!--<Poptip trigger="hover" title="提示标题" content="提示内容">-->
-            <!--<i-button>hover 激活</i-button>-->
-        <!--</Poptip>-->
-        <!--<Poptip content="提示内容" title="tip">-->
-            <!--<i-button>click 激活</i-button>-->
-        <!--</Poptip>-->
-        <!--<Poptip content="提示内容">-->
-            <!--<div slot="title"><i>自定义标题</i></div>-->
-            <!--<i-button>click 激活</i-button>-->
-        <!--</Poptip>-->
-        <!--<Tooltip class="tip" placement="left-start" trigger="hover">-->
-            <!--<div class="tip-inner">-->
-                <!--<Icon type="information"></Icon>-->
-            <!--</div>-->
-            <!--<div class="tip-content" slot="content">-->
-                <!--<p>iView 最新版本为 0.9.7，该版本对很多组件 UI 进行了调整</p>-->
-            <!--</div>-->
-        <!--</Tooltip>-->
-        <!--<Poptip>-->
-            <!--<a>click 激活</a>-->
-            <!--<div slot="title"><i>自定义标题</i></div>-->
-            <!--<div slot="content">-->
-                <!--<a>关闭提示框</a>-->
-            <!--</div>-->
-        <!--</Poptip>-->
-        <!--<Poptip placement="right" width="300">-->
-            <!--<i-button type="ghost">click 激活</i-button>-->
-            <!--<div class="api" slot="content">-->
-                <!--<table>-->
-                    <!--<thead>-->
-                    <!--<tr>-->
-                        <!--<th>属性</th>-->
-                        <!--<th>说明</th>-->
-                        <!--<th>类型</th>-->
-                        <!--<th>默认值</th>-->
-                    <!--</tr>-->
-                    <!--</thead>-->
-                    <!--<tbody>-->
-                    <!--<tr>-->
-                        <!--<td>content</td>-->
-                        <!--<td>显示的内容</td>-->
-                        <!--<td>String | Number</td>-->
-                        <!--<td>空</td>-->
-                    <!--</tr>-->
-                    <!--<tr>-->
-                        <!--<td>placement</td>-->
-                        <!--<td>提示框出现的位置，可选值为<code>top</code><code>top-start</code><code>top-end</code><code>bottom</code><code>bottom-start</code><code>bottom-end</code><code>left</code><code>left-start</code><code>left-end</code><code>right</code><code>right-start</code><code>right-end</code></td>-->
-                        <!--<td>String</td>-->
-                        <!--<td>bottom</td>-->
-                    <!--</tr>-->
-                    <!--<tr>-->
-                        <!--<td>disabled</td>-->
-                        <!--<td>是否禁用提示框</td>-->
-                        <!--<td>Boolean</td>-->
-                        <!--<td>false</td>-->
-                    <!--</tr>-->
-                    <!--<tr>-->
-                        <!--<td>delay</td>-->
-                        <!--<td>延迟显示，单位毫秒</td>-->
-                        <!--<td>Number</td>-->
-                        <!--<td>0</td>-->
-                    <!--</tr>-->
-                    <!--</tbody>-->
-                <!--</table>-->
-            <!--</div>-->
-        <!--</Poptip>-->
-        <!--<Poptip title="标题" content="内容">-->
-            <!--<Button>click 触发</Button>-->
-        <!--</Poptip>-->
-        <!--<Poptip title="标题" content="内容" trigger="hover">-->
-            <!--<Button>hover 触发</Button>-->
-        <!--</Poptip>-->
-        <Poptip title="确定删除这条信息吗？" confirm content="内容" trigger="focus" @on-ok="ok" @on-cancel="cancel" @on-popper-hide="hide">
-            <a><strong>Delete</strong></a>
+    <div style="margin: 100px">
+        <Poptip trigger="hover" placement="bottom" title="提示标题" content="提示内容">
+            <i-button>hover 激活</i-button>
+        </Poptip>
+        <Poptip title="提示标题" placement="bottom" content="提示内容">
+            <i-button>click 激活</i-button>
+        </Poptip>
+        <Poptip trigger="focus" title="提示标题" content="提示内容">
+            <i-input type="textarea"></i-input>
+            <!--<i-button>focus 激活</i-button>-->
+        </Poptip>
+        <Poptip trigger="focus" placement="bottom" title="提示标题" content="提示内容">
+            <i-input></i-input>
         </Poptip>
-        <!--<Poptip title="标题" content="内容" trigger="focus">-->
-            <!--<input type="text">-->
-        <!--</Poptip>-->
-        <!--<Poptip title="标题" content="内容" trigger="focus">-->
-            <!--<Button>focus 触发</Button>-->
-        <!--</Poptip>-->
-        <!--<Tooltip content="这里是提示文字">-->
-            <!--当鼠标经过这段文字时，会显示一个气泡框-->
-        <!--</Tooltip>-->
-        <!--<Poptip>-->
-            <!--<a>click 激活</a>-->
-            <!--<div slot="content">-->
-                <!--<a>关闭提示框</a>-->
-            <!--</div>-->
-        <!--</Poptip>-->
     </div>
 </template>
 <script>
-    import { Tooltip, iButton, Row, iCol, Poptip, iSelect, iOption, Message, Icon } from 'iview';
-
     export default {
-        components: { Tooltip, iButton, Row, iCol, Poptip, iSelect, iOption, Message, Icon },
-        props: {
 
-        },
-        data () {
-            return {
-
-            }
-        },
-        computed: {
-
-        },
-        methods: {
-            ok () {
-                Message.info('ok');
-            },
-            cancel () {
-                Message.info('cancel');
-            },
-            hide () {
-                Message.info('hide')
-            }
-        }
     }
 </script>

test/routers/rate.vue

@@ -0,0 +1,25 @@
+<template>
+    <Row>
+        <i-col span="12">
+            <Rate show-text :value.sync="valueText"></Rate>
+        </i-col>
+        <i-col span="12">
+            <Rate show-text :value.sync="valueCustomText">
+                <span style="color: #f5a623">{{ valueCustomText }}</span>
+            </Rate>
+        </i-col>
+    </Row>
+</template>
+<script>
+    export default {
+        props: {},
+        data () {
+            return {
+                valueText: 3,
+                valueCustomText: 3.8
+            };
+        },
+        computed: {},
+        methods: {}
+    };
+</script>

test/routers/select.vue

@@ -1,24 +1,49 @@
 <template>
-    <i-select :model.sync="model9" style="width:200px">
-        <i-option value="beijing" label="北京市">
-            <span>北京</span>
-            <span style="float:right;color:#ccc">Beiing</span>
-        </i-option>
-        <i-option value="shanghai" label="上海市">
-            <span>上海</span>
-            <span style="float:right;color:#ccc">ShangHai</span>
-        </i-option>
-        <i-option value="shenzhen" label="深圳市">
-            <span>深圳</span>
-            <span style="float:right;color:#ccc">ShenZhen</span>
-        </i-option>
+    <Row>
+        <i-col span="12" style="padding-right:10px">
+            <i-select :model.sync="model11" filterable>
+                <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
             </i-select>
+        </i-col>
+        <i-col span="12">
+            <i-select :model.sync="model12" filterable multiple>
+                <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
+            </i-select>
+        </i-col>
+    </Row>
 </template>
 <script>
     export default {
         data () {
             return {
-                model9: 'shanghai'
+                cityList: [
+                    {
+                        value: 'beijing',
+                        label: '北京市'
+                    },
+                    {
+                        value: 'shanghai',
+                        label: '上海市'
+                    },
+                    {
+                        value: 'shenzhen',
+                        label: '深圳市'
+                    },
+                    {
+                        value: 'hangzhou',
+                        label: '杭州市'
+                    },
+                    {
+                        value: 'nanjing',
+                        label: '南京市'
+                    },
+                    {
+                        value: 'chongqing',
+                        label: '重庆市'
+                    }
+                ],
+                model11: '',
+                model12: []
             }
         }
     }