Merge pull request #39 from jingsam/master

fixed #34
2016-10-28 17:51:09 +08:00 · 2016-10-28 17:51:09 +08:00 · 8a3bad748c
commit 8a3bad748c
parent 36febc3c56 d6342fe1c3
12 changed files with 144 additions and 128 deletions
--- a/src/components/base/notification/notice.vue
+++ b/src/components/base/notification/notice.vue
@ -1,7 +1,7 @@
 <template>
    <div :class="classes" :style="style" :transition="transitionName">
-        <div :class="[`${baseClass}-content`]" v-el:content>{{{ content }}}</div>
-        <a :class="[`${baseClass}-close`]" @click="close" v-if="closable">
+        <div :class="[baseClass + '-content']" v-el:content>{{{ content }}}</div>
+        <a :class="[baseClass + '-close]" @click="close" v-if="closable">
            <i class="ivu-icon ivu-icon-ios-close-empty"></i>
        </a>
    </div>
@ -90,4 +90,4 @@
            this.clearCloseTimer();
        }
    }
-</script>
+</script>
--- a/src/components/button/button.vue
+++ b/src/components/button/button.vue
@ -65,4 +65,4 @@
            }
        }
    }
-</script>
+</script>
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@ -2,15 +2,15 @@
    <div :class="wrapClasses">
        <div :class="maskClasses" v-show="visible" @click="mask" transition="fade"></div>
        <div :class="classes" :style="styles" v-show="visible" transition="ease">
-            <div :class="[`${prefixCls}-content`]">
-                <a :class="[`${prefixCls}-close`]" v-if="closable" @click="close">
+            <div :class="[prefixCls + '-content]">
+                <a :class="[prefixCls + '-close']" v-if="closable" @click="close">
                    <slot name="close">
                        <Icon type="ios-close-empty"></Icon>
                    </slot>
                </a>
-                <div :class="[`${prefixCls}-header`]" v-if="showHead" v-el:head><slot name="header"><p>{{ title }}</p></slot></div>
-                <div :class="[`${prefixCls}-body`]"><slot></slot></div>
-                <div :class="[`${prefixCls}-footer`]" v-if="!footerHide">
+                <div :class="[prefixCls + '-header']" v-if="showHead" v-el:head><slot name="header"><p>{{ title }}</p></slot></div>
+                <div :class="[prefixCls + '-body']"><slot></slot></div>
+                <div :class="[prefixCls + '-footer']" v-if="!footerHide">
                    <slot name="footer">
                        <Button type="ghost" size="large" @click="cancel">{{ cancelText }}</Button>
                        <Button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</Button>
@ -202,4 +202,4 @@
            }
        }
    }
-</script>
+</script>
--- a/src/components/page/page.vue
+++ b/src/components/page/page.vue
@ -24,7 +24,7 @@
        </li>
    </ul>
    <ul :class="wrapClasses" v-else>
-        <span :class="[`${prefixCls}-total`]" v-if="showTotal">
+        <span :class="[prefixCls + '-total']" v-if="showTotal">
            <slot>共 {{ total }} 条</slot>
        </span>
        <li
@ -33,15 +33,15 @@
            @click="prev">
            <a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a>
        </li>
-        <li title="第一页" :class="[`${prefixCls}-item`,{[`${prefixCls}-item-active`]: current == 1}]" @click="changePage(1)"><a>1</a></li>
-        <li title="向前 5 页" v-if="current - 3 > 1" :class="[`${prefixCls}-item-jump-prev`]" @click="fastPrev"><a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a></li>
-        <li :title="current - 2" v-if="current - 2 > 1" :class="[`${prefixCls}-item`]" @click="changePage(current - 2)"><a>{{ current - 2 }}</a></li>
-        <li :title="current - 1" v-if="current - 1 > 1" :class="[`${prefixCls}-item`]" @click="changePage(current - 1)"><a>{{ current - 1 }}</a></li>
-        <li :title="current" v-if="current != 1 && current != allPages" :class="[`${prefixCls}-item`,`${prefixCls}-item-active`]"><a>{{ current }}</a></li>
-        <li :title="current + 1" v-if="current + 1 < allPages" :class="[`${prefixCls}-item`]" @click="changePage(current + 1)"><a>{{ current + 1 }}</a></li>
-        <li :title="current + 2" v-if="current + 2 < allPages" :class="[`${prefixCls}-item`]" @click="changePage(current + 2)"><a>{{ current + 2 }}</a></li>
-        <li title="向后 5 页" v-if="current + 3 < allPages" :class="[`${prefixCls}-item-jump-next`]" @click="fastNext"><a><i class="ivu-icon ivu-icon-ios-arrow-right"></i></a></li>
-        <li :title="'最后一页:' + allPages" v-if="allPages > 1" :class="[`${prefixCls}-item`, {[`${prefixCls}-item-active`]: current == allPages}]" @click="changePage(allPages)"><a>{{ allPages }}</a></li>
+        <li title="第一页" :class="firstPageClasses" @click="changePage(1)"><a>1</a></li>
+        <li title="向前 5 页" v-if="current - 3 > 1" :class="[prefixCls + '-item-jump-prev']" @click="fastPrev"><a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a></li>
+        <li :title="current - 2" v-if="current - 2 > 1" :class="[prefixCls + '-item']" @click="changePage(current - 2)"><a>{{ current - 2 }}</a></li>
+        <li :title="current - 1" v-if="current - 1 > 1" :class="[prefixCls + '-item']" @click="changePage(current - 1)"><a>{{ current - 1 }}</a></li>
+        <li :title="current" v-if="current != 1 && current != allPages" :class="[prefixCls + '-item',prefixCls + '-item-active']"><a>{{ current }}</a></li>
+        <li :title="current + 1" v-if="current + 1 < allPages" :class="[prefixCls + '-item']" @click="changePage(current + 1)"><a>{{ current + 1 }}</a></li>
+        <li :title="current + 2" v-if="current + 2 < allPages" :class="[prefixCls + '-item']" @click="changePage(current + 2)"><a>{{ current + 2 }}</a></li>
+        <li title="向后 5 页" v-if="current + 3 < allPages" :class="[prefixCls + '-item-jump-next']" @click="fastNext"><a><i class="ivu-icon ivu-icon-ios-arrow-right"></i></a></li>
+        <li :title="'最后一页:' + allPages" v-if="allPages > 1" :class="lastPageClasses" @click="changePage(allPages)"><a>{{ allPages }}</a></li>
        <li
            title="下一页"
            :class="nextClasses"
@ -156,6 +156,22 @@
                        [`${prefixCls}-disabled`]: this.current == this.allPages
                    }
                ]
+            },
+            firstPageClasses () {
+                return [
+                    `${prefixCls}-item`,
+                    {
+                        [`${prefixCls}-item-active`]: this.current == 1
+                    }
+                ]
+            },
+            lastPageClasses () {
+                return [
+                    `${prefixCls}-item`,
+                    {
+                        [`${prefixCls}-item-active`]: this.current == this.allPages
+                    }
+                ]
            }
        },
        methods: {
@ -235,4 +251,4 @@
            }
        }
    }
-</script>
+</script>
--- a/src/components/poptip/poptip.vue
+++ b/src/components/poptip/poptip.vue
@ -5,30 +5,30 @@
        @mouseleave="handleMouseleave"
        v-clickoutside="handleClose">
        <div
-            :class="[`${prefixCls}-rel`]"
+            :class="[prefixCls + '-rel']"
            v-el:reference
            @click="handleClick"
            @mousedown="handleFocus"
            @mouseup="handleBlur">
            <slot></slot>
        </div>
-        <div :class="[`${prefixCls}-popper`]" :style="styles" transition="fade" v-el:popper v-show="visible">
-            <div :class="[`${prefixCls}-content`]">
-                <div :class="[`${prefixCls}-arrow`]"></div>
-                <div :class="[`${prefixCls}-inner`]" v-if="confirm">
-                    <div :class="[`${prefixCls}-body`]">
+        <div :class="[prefixCls + '-popper']" :style="styles" transition="fade" v-el:popper v-show="visible">
+            <div :class="[prefixCls + '-content']">
+                <div :class="[prefixCls + '-arrow']"></div>
+                <div :class="[prefixCls + '-inner']" v-if="confirm">
+                    <div :class="[prefixCls + '-body']">
                        <i class="ivu-icon ivu-icon-help-circled"></i>
-                        <div :class="[`${prefixCls}-body-message`]"><slot name="title">{{ title }}</slot></div>
+                        <div :class="[prefixCls + '-body-message']"><slot name="title">{{ title }}</slot></div>
                    </div>
-                    <div :class="[`${prefixCls}-footer`]">
-                        <Button type="ghost" size="small" @click="cancel">{{ cancelText }}</Button>
-                        <Button type="primary" size="small" @click="ok">{{ okText }}</Button>
+                    <div :class="[prefixCls + '-footer']">
+                        <i-button type="ghost" size="small" @click="cancel">{{ cancelText }}</i-button>
+                        <i-button type="primary" size="small" @click="ok">{{ okText }}</i-button>
                    </div>
                </div>
-                <div :class="[`${prefixCls}-inner`]" v-if="!confirm">
-                    <div :class="[`${prefixCls}-title`]" v-if="showTitle" v-el:title><slot name="title">{{ title }}</slot></div>
-                    <div :class="[`${prefixCls}-body`]">
-                        <div :class="[`${prefixCls}-body-content`]"><slot name="content">{{ content }}</slot></div>
+                <div :class="[prefixCls + '-inner']" v-if="!confirm">
+                    <div :class="[prefixCls + '-title']" v-if="showTitle" v-el:title><slot name="title">{{ title }}</slot></div>
+                    <div :class="[prefixCls + '-body']">
+                        <div :class="[prefixCls + '-body-content']"><slot name="content">{{ content }}</slot></div>
                    </div>
                </div>
            </div>
@ -46,7 +46,7 @@
    export default {
        mixins: [Popper],
        directives: { clickoutside },
-        components: { Button },
+        components: { iButton: Button },
        props: {
            trigger: {
                validator (value) {
@ -92,9 +92,9 @@
        computed: {
            classes () {
                return [
-                    `${prefixCls}`,
+                    prefixCls + '',
                    {
-                        [`${prefixCls}-confirm`]: this.confirm
+                        [prefixCls + '-confirm']: this.confirm
                    }
                ]
            },
@ -102,7 +102,7 @@
                let style = {};

                if (!!this.width) {
-                    style.width = `${this.width}px`;
+                    style.width = '${this.width}px';
                }
                return style;
            }
@ -167,4 +167,4 @@
            }
        }
    }
-</script>
+</script>
--- a/src/components/select/option-group.vue
+++ b/src/components/select/option-group.vue
@ -1,8 +1,8 @@
 <template>
-    <li :class="[`${prefixCls}-wrap`]">
-        <div :class="[`${prefixCls}-title`]">{{ label }}</div>
+    <li :class="[prefixCls + '-wrap']">
+        <div :class="[prefixCls + '-title']">{{ label }}</div>
        <ul>
-            <li :class="[`${prefixCls}`]"><slot></slot></li>
+            <li :class="[prefixCls]"><slot></slot></li>
        </ul>
    </li>
 </template>
@ -22,4 +22,4 @@
            }
        }
    }
-</script>
+</script>
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@ -1,32 +1,32 @@
 <template>
    <div :class="classes" v-clickoutside="handleClose">
        <div
-            :class="[`${prefixCls}-selection`]"
+            :class="[prefixCls + '-selection']"
            v-el:reference
            @click="toggleMenu">
            <div class="ivu-tag" v-for="item in selectedMultiple">
                <span class="ivu-tag-text">{{ item.label }}</span>
                <Icon type="ios-close-empty" @click.stop="removeTag($index)"></Icon>
            </div>
-            <span :class="[`${prefixCls}-placeholder`]" v-show="showPlaceholder && !filterable">{{ placeholder }}</span>
-            <span :class="[`${prefixCls}-selected-value`]" v-show="!showPlaceholder && !multiple && !filterable">{{ selectedSingle }}</span>
+            <span :class="[prefixCls + '-placeholder']" v-show="showPlaceholder && !filterable">{{ placeholder }}</span>
+            <span :class="[prefixCls + '-selected-value']" v-show="!showPlaceholder && !multiple && !filterable">{{ selectedSingle }}</span>
            <input
                type="text"
                v-if="filterable"
                v-model="query"
-                :class="[`${prefixCls}-input`]"
+                :class="[prefixCls + '-input']"
                :placeholder="showPlaceholder ? placeholder : ''"
                :style="inputStyle"
                @blur="handleBlur"
                @keydown="resetInputState"
                @keydown.delete="handleInputDelete"
                v-el:input>
-            <Icon type="ios-close" :class="[`${prefixCls}-arrow`]" v-show="showCloseIcon" @click.stop="clearSingleSelect"></Icon>
-            <Icon type="arrow-down-b" :class="[`${prefixCls}-arrow`]"></Icon>
+            <Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.stop="clearSingleSelect"></Icon>
+            <Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon>
        </div>
        <Dropdown v-show="visible" transition="slide-up" v-ref:dropdown>
-            <ul v-show="notFound" :class="[`${prefixCls}-not-found`]"><li>{{ notFoundText }}</li></ul>
-            <ul v-else :class="[`${prefixCls}-dropdown-list`]"><slot></slot></ul>
+            <ul v-show="notFound" :class="[prefixCls + '-not-found']"><li>{{ notFoundText }}</li></ul>
+            <ul v-else :class="[prefixCls + '-dropdown-list']"><slot></slot></ul>
        </Dropdown>
    </div>
 </template>
@ -100,14 +100,14 @@
        computed: {
            classes () {
                return [
-                    `${prefixCls}`,
+                    prefixCls + '',
                    {
-                        [`${prefixCls}-visible`]: this.visible,
-                        [`${prefixCls}-disabled`]: this.disabled,
-                        [`${prefixCls}-multiple`]: this.multiple,
-                        [`${prefixCls}-single`]: !this.multiple,
-                        [`${prefixCls}-show-clear`]: this.showCloseIcon,
-                        [`${prefixCls}-${this.size}`]: !!this.size
+                        [prefixCls + '-visible']: this.visible,
+                        [prefixCls + '-disabled']: this.disabled,
+                        [prefixCls + '-multiple']: this.multiple,
+                        [prefixCls + '-single']: !this.multiple,
+                        [prefixCls + '-show-clear']: this.showCloseIcon,
+                        [prefixCls + '-${this.size}']: !!this.size
                    }
                ]
            },
@ -136,7 +136,7 @@
                    if (this.showPlaceholder) {
                        style.width = '100%';
                    } else {
-                        style.width = `${this.inputLength}px`;
+                        style.width = '${this.inputLength}px';
                    }
                }

@ -508,4 +508,4 @@
            }
        }
    }
-</script>
+</script>
--- a/src/components/steps/step.vue
+++ b/src/components/steps/step.vue
@ -1,15 +1,15 @@
 <template>
    <div :class="wrapClasses" :style="styles">
-        <div :class="[`${prefixCls}-tail`]"><i></i></div>
-        <div :class="[`${prefixCls}-head`]">
-            <div :class="[`${prefixCls}-head-inner`]">
+        <div :class="[prefixCls + '-tail']"><i></i></div>
+        <div :class="[prefixCls + '-head']">
+            <div :class="[prefixCls + '-head-inner']">
                <span v-if="!icon && status != 'finish' && status != 'error'">{{ stepNumber }}</span>
                <span v-else :class="iconClasses"></span>
            </div>
        </div>
-        <div :class="[`${prefixCls}-main`]">
-            <div :class="[`${prefixCls}-title`]">{{ title }}</div>
-            <div v-if="content" :class="[`${prefixCls}-content`]">{{ content }}</div>
+        <div :class="[prefixCls + '-main']">
+            <div :class="[prefixCls + '-title']">{{ title }}</div>
+            <div v-if="content" :class="[prefixCls + '-content']">{{ content }}</div>
        </div>
    </div>
 </template>
@ -91,4 +91,4 @@
            }
        }
    }
-</script>
+</script>
--- a/src/components/tooltip/tooltip.vue
+++ b/src/components/tooltip/tooltip.vue
@ -1,12 +1,12 @@
 <template>
-    <div :class="[`${prefixCls}`]" @mouseenter="handleShowPopper" @mouseleave="handleClosePopper">
-        <div :class="[`${prefixCls}-rel`]" v-el:reference>
+    <div :class="[prefix]" @mouseenter="handleShowPopper" @mouseleave="handleClosePopper">
+        <div :class="[prefix + '-rel']" v-el:reference>
            <slot></slot>
        </div>
-        <div :class="[`${prefixCls}-popper`]" transition="fade" v-el:popper v-show="!disabled && visible">
-            <div :class="[`${prefixCls}-content`]">
-                <div :class="[`${prefixCls}-arrow`]"></div>
-                <div :class="[`${prefixCls}-inner`]"><slot name="content">{{ content }}</slot></div>
+        <div :class="[prefix + '-popper']" transition="fade" v-el:popper v-show="!disabled && visible">
+            <div :class="[prefix + '-content']">
+                <div :class="[prefix + '-arrow']"></div>
+                <div :class="[prefix + '-inner']"><slot name="content">{{ content }}</slot></div>
            </div>
        </div>
    </div>
@ -56,4 +56,4 @@
            }
        }
    }
-</script>
+</script>
--- a/test/routers/button.vue
+++ b/test/routers/button.vue
@ -1,73 +1,73 @@
 <template>
-    <Button>Default</Button>
-    <Button type="primary">Primary</Button>
-    <Button type="ghost">Ghost</Button>
+    <i-button>Default</i-button>
+    <i-button type="primary">Primary</i-button>
+    <i-button type="ghost">Ghost</i-button>
    <br><br>
-    <Button type="primary" size="large">Large</Button>
-    <Button type="primary">Default</Button>
-    <Button type="primary" size="small">Small</Button>
+    <i-button type="primary" size="large">Large</i-button>
+    <i-button type="primary">Default</i-button>
+    <i-button type="primary" size="small">Small</i-button>
    <br><br>
-    <Button>Default</Button>
-    <Button disabled>Default(Disabled)</Button>
+    <i-button>Default</i-button>
+    <i-button disabled>Default(Disabled)</i-button>
    <br><br>
-    <Button type="primary">Primary</Button>
-    <Button type="primary" disabled>Primary(Disabled)</Button>
+    <i-button type="primary">Primary</i-button>
+    <i-button type="primary" disabled>Primary(Disabled)</i-button>
    <br><br>
-    <Button type="ghost">Ghost</Button>
-    <Button type="ghost" disabled>Ghost(Disabled)</Button>
+    <i-button type="ghost">Ghost</i-button>
+    <i-button type="ghost" disabled>Ghost(Disabled)</i-button>
    <br><br>
-    <Button type="primary" shape="circle" icon="ios-search"></Button>
-    <Button type="primary" icon="ios-search">搜索</Button>
+    <i-button type="primary" shape="circle" icon="ios-search"></i-button>
+    <i-button type="primary" icon="ios-search">搜索</i-button>
    <br><br>
-    <Button type="ghost" shape="circle">
+    <i-button type="ghost" shape="circle">
        <Icon type="search"></Icon>
-    </Button>
-    <Button type="ghost">
+    </i-button>
+    <i-button type="ghost">
        <Icon type="search"></Icon>
        搜索
-    </Button>
-    <Button type="ghost" shape="circle" size="large">
+    </i-button>
+    <i-button type="ghost" shape="circle" size="large">
        <Icon type="search"></Icon>
-    </Button>
-    <Button type="ghost" shape="circle" size="small">
+    </i-button>
+    <i-button type="ghost" shape="circle" size="small">
        <Icon type="search"></Icon>
-    </Button>
+    </i-button>
    <br><br><br>
-    <Button type="primary" loading>Loading...</Button>
-    <Button type="primary" loading size="large">Loading...</Button>
-    <Button type="primary" loading size="small">Loading...</Button>
-    <Button type="primary" :loading="loading" @click="toLoading">
+    <i-button type="primary" loading>Loading...</i-button>
+    <i-button type="primary" loading size="large">Loading...</i-button>
+    <i-button type="primary" loading size="small">Loading...</i-button>
+    <i-button type="primary" :loading="loading" @click="toLoading">
        <span v-if="!loading">Click me!</span>
        <span v-else>Loading...</span>
-    </Button>
-    <Button type="primary" :loading="loading2" icon="checkmark-round" @click="toLoading2">
+    </i-button>
+    <i-button type="primary" :loading="loading2" icon="checkmark-round" @click="toLoading2">
        <span v-if="!loading2">Click me!</span>
        <span v-else>Loading...</span>
-    </Button>
+    </i-button>
    <h4>基本</h4>
    <Button-group size="large">
-        <Button>取消</Button>
-        <Button type="primary">确定</Button>
+        <i-button>取消</i-button>
+        <i-button type="primary">确定</i-button>
    </Button-group>
    <Button-group>
-        <Button type="primary">L</Button>
-        <Button>M</Button>
-        <Button type="ghost">R</Button>
+        <i-button type="primary">L</i-button>
+        <i-button>M</i-button>
+        <i-button type="ghost">R</i-button>
    </Button-group>
    <h4>配合图标</h4>
    <Button-group>
-        <Button type="primary">
+        <i-button type="primary">
            <Icon type="chevron-left"></Icon>
            前进
-        </Button>
-        <Button type="primary">
+        </i-button>
+        <i-button type="primary">
            后退
            <Icon type="chevron-right"></Icon>
-        </Button>
+        </i-button>
    </Button-group>
    <Button-group>
-        <Button type="primary" icon="cloud"></Button>
-        <Button type="primary" icon="upload"></Button>
+        <i-button type="primary" icon="cloud"></i-button>
+        <i-button type="primary" icon="upload"></i-button>
    </Button-group>
 </template>
 <script>
@ -78,7 +78,7 @@

    export default {
        components: {
-            Button,
+            iButton: Button,
            ButtonGroup,
            Icon,
            iInput: Input,
@ -93,13 +93,13 @@
            Page
        },
        props: {
-        
+
        },
        data () {
            return {
                loading: false,
                loading2: false
-            }        
+            }
        },
        methods: {
            toLoading () {
--- a/test/routers/notice.vue
+++ b/test/routers/notice.vue
@ -38,7 +38,7 @@
            </div>
        </Poptip>
        <Poptip placement="right" width="300">
-            <Button type="ghost">click 激活</Button>
+            <i-button type="ghost">click 激活</i-button>
            <div class="api" slot="content">
                <table>
                    <thead>
@ -108,9 +108,9 @@
    import { Tooltip, Button, Row, iCol, Poptip, iSelect, iOption, Message } from 'iview';

    export default {
-        components: { Tooltip, Button, Row, iCol, Poptip, iSelect, iOption, Message },
+        components: { Tooltip, iButton: Button, Row, iCol, Poptip, iSelect, iOption, Message },
        props: {
-        
+
        },
        data () {
            return {
@ -118,7 +118,7 @@
            }
        },
        computed: {
-        
+
        },
        methods: {
            ok () {
@ -129,4 +129,4 @@
            }
        }
    }
-</script>
+</script>
--- a/test/routers/page.vue
+++ b/test/routers/page.vue
@ -41,7 +41,7 @@
        <Step title="步骤3"></Step>
        <Step title="步骤4"></Step>
    </Steps>
-    <Button type="primary" @click="next">下一步</Button>
+    <i-button type="primary" @click="next">下一步</i-button>
    <br><br>
    <Steps :current="1" direction="vertical" size="small">
        <Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
@ -67,10 +67,10 @@
            Page,
            Steps,
            Step,
-            Button
+            iButton: Button
        },
        props: {
-        
+
        },
        data () {
            return {
@ -79,7 +79,7 @@
            }
        },
        computed: {
-        
+
        },
        methods: {
            setPage (page) {
@ -94,4 +94,4 @@
            }
        }
    }
-</script>
+</script>