fixed ie bug

jingsam
1 parent 64bd05f7
Showing 12 changed files with 144 additions and 128 deletions Show diff stats
src/components/base/notification/notice.vue
src/components/button/button.vue
src/components/modal/modal.vue
src/components/page/page.vue
src/components/poptip/poptip.vue
src/components/select/option-group.vue
src/components/select/select.vue
src/components/steps/step.vue
src/components/tooltip/tooltip.vue
test/routers/button.vue
test/routers/notice.vue
test/routers/page.vue
 <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>
 \ No newline at end of file
+</script>
@@ -65,4 +65,4 @@
             }
         }
     }
-</script>
 \ No newline at end of file
+</script>
@@ -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>
 \ No newline at end of file
+</script>
@@ -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>
 \ No newline at end of file
+</script>
@@ -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>
 \ No newline at end of file
+</script>
 <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>
 \ No newline at end of file
+</script>
 <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>
 \ No newline at end of file
+</script>
 <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>
 \ No newline at end of file
+</script>
 <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>
 \ No newline at end of file
+</script>
 <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 () {
@@ -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>
 \ No newline at end of file
+</script>
@@ -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>
 \ No newline at end of file
+</script>