Commit 67c9b1c8b99c1ac4df8009fc191a82c1f39723c6
1 parent
b164f7c0
fixed #591
Showing
6 changed files
with
87 additions
and
44 deletions
Show diff stats
examples/routers/table.vue
| 1 | <template> | 1 | <template> |
| 2 | - <Table :columns="columns1" :data="data1"> | ||
| 3 | - <div slot="header">头部</div> | ||
| 4 | - <div slot="footer">底部</div> | ||
| 5 | - </Table> | 2 | + <div> |
| 3 | + <Table :height="height" border :columns="columns1" :data="data2"></Table> | ||
| 4 | + <Button @click="height=800">change height</Button> | ||
| 5 | + </div> | ||
| 6 | </template> | 6 | </template> |
| 7 | <script> | 7 | <script> |
| 8 | export default { | 8 | export default { |
| 9 | data () { | 9 | data () { |
| 10 | return { | 10 | return { |
| 11 | + height: 200, | ||
| 11 | columns1: [ | 12 | columns1: [ |
| 12 | { | 13 | { |
| 13 | title: '姓名', | 14 | title: '姓名', |
| @@ -22,7 +23,27 @@ | @@ -22,7 +23,27 @@ | ||
| 22 | key: 'address' | 23 | key: 'address' |
| 23 | } | 24 | } |
| 24 | ], | 25 | ], |
| 25 | - data1: [ | 26 | + data2: [ |
| 27 | + { | ||
| 28 | + name: '王小明', | ||
| 29 | + age: 18, | ||
| 30 | + address: '北京市朝阳区芍药居' | ||
| 31 | + }, | ||
| 32 | + { | ||
| 33 | + name: '张小刚', | ||
| 34 | + age: 25, | ||
| 35 | + address: '北京市海淀区西二旗' | ||
| 36 | + }, | ||
| 37 | + { | ||
| 38 | + name: '李小红', | ||
| 39 | + age: 30, | ||
| 40 | + address: '上海市浦东新区世纪大道' | ||
| 41 | + }, | ||
| 42 | + { | ||
| 43 | + name: '周小伟', | ||
| 44 | + age: 26, | ||
| 45 | + address: '深圳市南山区深南大道' | ||
| 46 | + }, | ||
| 26 | { | 47 | { |
| 27 | name: '王小明', | 48 | name: '王小明', |
| 28 | age: 18, | 49 | age: 18, |
examples/routers/tabs.vue
| 1 | <template> | 1 | <template> |
| 2 | - <Row> | ||
| 3 | - <Col :span="12"> | ||
| 4 | - <Tabs type="card" closable @on-tab-remove="handleTagRemove"> | ||
| 5 | - <Tab-pane label="标签一" v-if="tab0">标签一的内容</Tab-pane> | ||
| 6 | - <Tab-pane label="标签二" v-if="tab1">标签二的内容</Tab-pane> | ||
| 7 | - <Tab-pane label="标签三" v-if="tab2">标签三的内容</Tab-pane> | ||
| 8 | - </Tabs> | ||
| 9 | - </Col> | ||
| 10 | - <Col :span="12"> | ||
| 11 | - <Tabs type="card" closable @on-tab-remove="handleTagRemove"> | ||
| 12 | - <Tab-pane :label="tab.label" v-for="tab of tabs" :key="tab">{{tab.content}}</Tab-pane> | ||
| 13 | - <Button size="small" slot="extra" @click="addTab">添加</Button> | ||
| 14 | - </Tabs> | ||
| 15 | - </Col> | ||
| 16 | - </Row> | 2 | + <Tabs value="name1" :animated="false"> |
| 3 | + <Tab-pane label="标签一" name="name1"> | ||
| 4 | + <Table :columns="columns1" :data="data1"></Table> | ||
| 5 | + </Tab-pane> | ||
| 6 | + <Tab-pane label="标签二" name="name2"> | ||
| 7 | + <Table :columns="columns1" :data="data1"></Table> | ||
| 8 | + </Tab-pane> | ||
| 9 | + <Tab-pane label="标签三" name="name3"> | ||
| 10 | + <Table :columns="columns1" :data="data1"></Table> | ||
| 11 | + </Tab-pane> | ||
| 12 | + </Tabs> | ||
| 17 | </template> | 13 | </template> |
| 18 | - | ||
| 19 | - | ||
| 20 | <script> | 14 | <script> |
| 21 | export default { | 15 | export default { |
| 22 | data () { | 16 | data () { |
| 23 | return { | 17 | return { |
| 24 | - tabs:[ | ||
| 25 | - {label:'标签0',content:'标签内容0'}, | ||
| 26 | - {label:'标签1',content:'标签内容1'}, | ||
| 27 | - {label:'标签2',content:'标签内容2'}, | 18 | + columns1: [ |
| 19 | + { | ||
| 20 | + title: '姓名', | ||
| 21 | + key: 'name' | ||
| 22 | + }, | ||
| 23 | + { | ||
| 24 | + title: '年龄', | ||
| 25 | + key: 'age' | ||
| 26 | + }, | ||
| 27 | + { | ||
| 28 | + title: '地址', | ||
| 29 | + key: 'address' | ||
| 30 | + } | ||
| 28 | ], | 31 | ], |
| 29 | - tab0: true, | ||
| 30 | - tab1: true, | ||
| 31 | - tab2: true | ||
| 32 | - } | ||
| 33 | - }, | ||
| 34 | - methods: { | ||
| 35 | - handleTagRemove (name) { | ||
| 36 | - this['tab' + name] = false; | ||
| 37 | - }, | ||
| 38 | - addTab(){ | ||
| 39 | - this.tabs.push({label:'标签'+this.tabs.length,content:'标签内容'+this.tabs.length}); | 32 | + data1: [ |
| 33 | + { | ||
| 34 | + name: '王小明', | ||
| 35 | + age: 18, | ||
| 36 | + address: '北京市朝阳区芍药居' | ||
| 37 | + }, | ||
| 38 | + { | ||
| 39 | + name: '张小刚', | ||
| 40 | + age: 25, | ||
| 41 | + address: '北京市海淀区西二旗' | ||
| 42 | + }, | ||
| 43 | + { | ||
| 44 | + name: '李小红', | ||
| 45 | + age: 30, | ||
| 46 | + address: '上海市浦东新区世纪大道' | ||
| 47 | + }, | ||
| 48 | + { | ||
| 49 | + name: '周小伟', | ||
| 50 | + age: 26, | ||
| 51 | + address: '深圳市南山区深南大道' | ||
| 52 | + } | ||
| 53 | + ] | ||
| 40 | } | 54 | } |
| 41 | } | 55 | } |
| 42 | } | 56 | } |
src/components/modal/modal.vue
| @@ -32,12 +32,13 @@ | @@ -32,12 +32,13 @@ | ||
| 32 | import TransferDom from '../../directives/transfer-dom'; | 32 | import TransferDom from '../../directives/transfer-dom'; |
| 33 | import { getScrollBarSize } from '../../utils/assist'; | 33 | import { getScrollBarSize } from '../../utils/assist'; |
| 34 | import Locale from '../../mixins/locale'; | 34 | import Locale from '../../mixins/locale'; |
| 35 | + import Emitter from '../../mixins/emitter'; | ||
| 35 | 36 | ||
| 36 | const prefixCls = 'ivu-modal'; | 37 | const prefixCls = 'ivu-modal'; |
| 37 | 38 | ||
| 38 | export default { | 39 | export default { |
| 39 | name: 'Modal', | 40 | name: 'Modal', |
| 40 | - mixins: [ Locale ], | 41 | + mixins: [ Locale, Emitter ], |
| 41 | components: { Icon, iButton }, | 42 | components: { Icon, iButton }, |
| 42 | directives: { TransferDom }, | 43 | directives: { TransferDom }, |
| 43 | props: { | 44 | props: { |
| @@ -247,6 +248,7 @@ | @@ -247,6 +248,7 @@ | ||
| 247 | this.addScrollEffect(); | 248 | this.addScrollEffect(); |
| 248 | } | 249 | } |
| 249 | } | 250 | } |
| 251 | + this.broadcast('Table', 'on-visible-change', val); | ||
| 250 | }, | 252 | }, |
| 251 | loading (val) { | 253 | loading (val) { |
| 252 | if (!val) { | 254 | if (!val) { |
src/components/table/table.vue
| @@ -664,6 +664,9 @@ | @@ -664,6 +664,9 @@ | ||
| 664 | this.fixedHeader(); | 664 | this.fixedHeader(); |
| 665 | this.$nextTick(() => this.ready = true); | 665 | this.$nextTick(() => this.ready = true); |
| 666 | window.addEventListener('resize', this.handleResize, false); | 666 | window.addEventListener('resize', this.handleResize, false); |
| 667 | + this.$on('on-visible-change', (val) => { | ||
| 668 | + if (val) this.handleResize(); | ||
| 669 | + }); | ||
| 667 | }, | 670 | }, |
| 668 | beforeDestroy () { | 671 | beforeDestroy () { |
| 669 | window.removeEventListener('resize', this.handleResize, false); | 672 | window.removeEventListener('resize', this.handleResize, false); |
src/components/tabs/tabs.vue
| @@ -23,11 +23,13 @@ | @@ -23,11 +23,13 @@ | ||
| 23 | <script> | 23 | <script> |
| 24 | import Icon from '../icon/icon.vue'; | 24 | import Icon from '../icon/icon.vue'; |
| 25 | import { oneOf, getStyle } from '../../utils/assist'; | 25 | import { oneOf, getStyle } from '../../utils/assist'; |
| 26 | + import Emitter from '../../mixins/emitter'; | ||
| 26 | 27 | ||
| 27 | const prefixCls = 'ivu-tabs'; | 28 | const prefixCls = 'ivu-tabs'; |
| 28 | 29 | ||
| 29 | export default { | 30 | export default { |
| 30 | name: 'Tabs', | 31 | name: 'Tabs', |
| 32 | + mixins: [ Emitter ], | ||
| 31 | components: { Icon }, | 33 | components: { Icon }, |
| 32 | props: { | 34 | props: { |
| 33 | value: { | 35 | value: { |
| @@ -226,6 +228,7 @@ | @@ -226,6 +228,7 @@ | ||
| 226 | activeKey () { | 228 | activeKey () { |
| 227 | this.updateBar(); | 229 | this.updateBar(); |
| 228 | this.updateStatus(); | 230 | this.updateStatus(); |
| 231 | + this.broadcast('Table', 'on-visible-change', true); | ||
| 229 | } | 232 | } |
| 230 | }, | 233 | }, |
| 231 | mounted () { | 234 | mounted () { |
src/utils/assist.js
| @@ -168,14 +168,14 @@ export function scrollTop(el, from = 0, to, duration = 500) { | @@ -168,14 +168,14 @@ export function scrollTop(el, from = 0, to, duration = 500) { | ||
| 168 | } | 168 | } |
| 169 | 169 | ||
| 170 | // Find components upward | 170 | // Find components upward |
| 171 | -function findComponentUpward (content, componentName, componentNames) { | 171 | +function findComponentUpward (context, componentName, componentNames) { |
| 172 | if (typeof componentName === 'string') { | 172 | if (typeof componentName === 'string') { |
| 173 | componentNames = [componentName]; | 173 | componentNames = [componentName]; |
| 174 | } else { | 174 | } else { |
| 175 | componentNames = componentName; | 175 | componentNames = componentName; |
| 176 | } | 176 | } |
| 177 | 177 | ||
| 178 | - let parent = content.$parent; | 178 | + let parent = context.$parent; |
| 179 | let name = parent.$options.name; | 179 | let name = parent.$options.name; |
| 180 | while (parent && (!name || componentNames.indexOf(name) < 0)) { | 180 | while (parent && (!name || componentNames.indexOf(name) < 0)) { |
| 181 | parent = parent.$parent; | 181 | parent = parent.$parent; |
| @@ -186,8 +186,8 @@ function findComponentUpward (content, componentName, componentNames) { | @@ -186,8 +186,8 @@ function findComponentUpward (content, componentName, componentNames) { | ||
| 186 | export {findComponentUpward}; | 186 | export {findComponentUpward}; |
| 187 | 187 | ||
| 188 | // Find component downward | 188 | // Find component downward |
| 189 | -function findComponentDownward (content, componentName) { | ||
| 190 | - const childrens = content.$children; | 189 | +function findComponentDownward (context, componentName) { |
| 190 | + const childrens = context.$children; | ||
| 191 | let children = null; | 191 | let children = null; |
| 192 | 192 | ||
| 193 | if (childrens.length) { | 193 | if (childrens.length) { |
| @@ -215,8 +215,8 @@ function findComponentDownward (content, componentName) { | @@ -215,8 +215,8 @@ function findComponentDownward (content, componentName) { | ||
| 215 | export {findComponentDownward}; | 215 | export {findComponentDownward}; |
| 216 | 216 | ||
| 217 | // Find components downward | 217 | // Find components downward |
| 218 | -function findComponentsDownward (content, componentName, components = []) { | ||
| 219 | - const childrens = content.$children; | 218 | +function findComponentsDownward (context, componentName, components = []) { |
| 219 | + const childrens = context.$children; | ||
| 220 | 220 | ||
| 221 | if (childrens.length) { | 221 | if (childrens.length) { |
| 222 | childrens.forEach(child => { | 222 | childrens.forEach(child => { |