chenhaodong / mew-iview

Commit a9cd43b39c12722b526ab3face7427e432ab3ff3

Authored by 梁灏
1 parent ecaf8d51

Cascader add transfer prop

Showing 5 changed files with 99 additions and 13 deletions   Show diff stats
Inline Side-by-side
examples/routers/cascader.vue
  Show/Hide comments   View file @a9cd43b
1 1 <template>
2   - <Cascader v-model="value3" :data="data" filterable></Cascader>
  2 + <div style="width: 400px;">
  3 + <Row>
  4 + <i-col span="12">
  5 + <Cascader transfer v-model="value3" :data="data" filterable></Cascader>
  6 + </i-col>
  7 + <i-col span="12">
  8 + <Cascader v-model="value3" :data="data" filterable></Cascader>
  9 + </i-col>
  10 + </Row>
  11 + </div>
3 12 </template>
4 13 <script>
5 14 export default {
... ...
examples/routers/modal.vue
  Show/Hide comments   View file @a9cd43b
... ... @@ -5,10 +5,11 @@
5 5 <Modal v-model="showModal" title="弹窗">
6 6 <Tabs>
7 7 <Tab-pane label="演示" style="height: 80px;">
8   - <Date-picker transfer type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>
9   - <i-select transfer multiple v-model="m1">
10   - <i-option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</i-option>
11   - </i-select>
  8 + <!--<Date-picker transfer type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>-->
  9 + <!--<i-select transfer multiple v-model="m1">-->
  10 + <!--<i-option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</i-option>-->
  11 + <!--</i-select>-->
  12 + <Cascader transfer :data="data4" :load-data="loadData"></Cascader>
12 13 </Tab-pane>
13 14 </Tabs>
14 15 </Modal>
... ... @@ -51,6 +52,20 @@
51 52 value: 'chongqing',
52 53 label: '重庆市'
53 54 }
  55 + ],
  56 + data4: [
  57 + {
  58 + value: 'beijing',
  59 + label: '北京',
  60 + children: [],
  61 + loading: false
  62 + },
  63 + {
  64 + value: 'hangzhou',
  65 + label: '杭州',
  66 + children: [],
  67 + loading:false
  68 + }
54 69 ]
55 70 }
56 71 },
... ... @@ -74,6 +89,40 @@
74 89 this.$refs["formSelect"].clearSingleSelect();
75 90 this.options = [];
76 91 // }, 300)
  92 + },
  93 + loadData (item, callback) {
  94 + item.loading = true;
  95 + setTimeout(() => {
  96 + if (item.value === 'beijing') {
  97 + item.children = [
  98 + {
  99 + value: 'talkingdata',
  100 + label: 'TalkingData'
  101 + },
  102 + {
  103 + value: 'baidu',
  104 + label: '百度'
  105 + },
  106 + {
  107 + value: 'sina',
  108 + label: '新浪'
  109 + }
  110 + ];
  111 + } else if (item.value === 'hangzhou') {
  112 + item.children = [
  113 + {
  114 + value: 'ali',
  115 + label: '阿里巴巴'
  116 + },
  117 + {
  118 + value: '163',
  119 + label: '网易'
  120 + }
  121 + ];
  122 + }
  123 + item.loading = false;
  124 + callback();
  125 + }, 1000);
77 126 }
78 127 }
79 128 }
... ...
examples/routers/poptip.vue
  Show/Hide comments   View file @a9cd43b
... ... @@ -3,7 +3,7 @@
3 3 <Poptip trigger="hover" title="提示标题" content="提示内容">
4 4 <Button>hover 激活</Button>
5 5 </Poptip>
6   - <Poptip title="提示标题" content="提示内容">
  6 + <Poptip transfer title="提示标题" content="提示内容">
7 7 <Button>click 激活</Button>
8 8 </Poptip>
9 9 <Poptip trigger="focus" title="提示标题" content="提示内容">
... ...
src/components/cascader/cascader.vue
  Show/Hide comments   View file @a9cd43b
1 1 <template>
2 2 <div :class="classes" v-clickoutside="handleClose">
3   - <div :class="[prefixCls + '-rel']" @click="toggleOpen">
  3 + <div :class="[prefixCls + '-rel']" @click="toggleOpen" ref="reference">
4 4 <slot>
5 5 <i-input
6 6 ref="input"
... ... @@ -19,7 +19,12 @@
19 19 </slot>
20 20 </div>
21 21 <transition name="slide-up">
22   - <Drop v-show="visible">
  22 + <Drop
  23 + v-show="visible"
  24 + :class="{ [prefixCls + '-transfer']: transfer }"
  25 + ref="drop"
  26 + :data-transfer="transfer"
  27 + v-transfer-dom>
23 28 <div>
24 29 <Caspanel
25 30 v-show="!filterable || (filterable && query === '')"
... ... @@ -51,6 +56,7 @@
51 56 import Icon from '../icon/icon.vue';
52 57 import Caspanel from './caspanel.vue';
53 58 import clickoutside from '../../directives/clickoutside';
  59 + import TransferDom from '../../directives/transfer-dom';
54 60 import { oneOf } from '../../utils/assist';
55 61 import Emitter from '../../mixins/emitter';
56 62 import Locale from '../../mixins/locale';
... ... @@ -62,7 +68,7 @@
62 68 name: 'Cascader',
63 69 mixins: [ Emitter, Locale ],
64 70 components: { iInput, Drop, Icon, Caspanel },
65   - directives: { clickoutside },
  71 + directives: { clickoutside, TransferDom },
66 72 props: {
67 73 data: {
68 74 type: Array,
... ... @@ -117,6 +123,10 @@
117 123 },
118 124 notFoundText: {
119 125 type: String
  126 + },
  127 + transfer: {
  128 + type: Boolean,
  129 + default: false
120 130 }
121 131 },
122 132 data () {
... ... @@ -333,11 +343,17 @@
333 343 if (this.currentValue.length) {
334 344 this.updateSelected();
335 345 }
  346 + if (this.transfer) {
  347 + this.$refs.drop.update();
  348 + }
336 349 } else {
337 350 if (this.filterable) {
338 351 this.query = '';
339 352 this.$refs.input.currentValue = '';
340 353 }
  354 + if (this.transfer) {
  355 + this.$refs.drop.destroy();
  356 + }
341 357 }
342 358 this.$emit('on-visible-change', val);
343 359 },
... ...
src/styles/components/cascader.less
  Show/Hide comments   View file @a9cd43b
1 1 @cascader-prefix-cls: ~"@{css-prefix}cascader";
2 2 @cascader-item-prefix-cls: ~"@{css-prefix}cascader-menu-item";
3 3  
  4 +.selectDropDown{
  5 + width: auto;
  6 + padding: 0;
  7 + white-space: nowrap;
  8 + overflow: visible;
  9 +}
  10 +
4 11 .@{cascader-prefix-cls} {
5 12 //position: relative;
6 13 line-height: normal;
... ... @@ -64,10 +71,7 @@
64 71 }
65 72  
66 73 .@{select-dropdown-prefix-cls} {
67   - width: auto;
68   - padding: 0;
69   - white-space: nowrap;
70   - overflow: visible;
  74 + .selectDropDown();
71 75 }
72 76  
73 77 .select-item(@cascader-prefix-cls, @cascader-item-prefix-cls);
... ... @@ -138,6 +142,14 @@
138 142 }
139 143 }
140 144 }
  145 +.@{cascader-prefix-cls}-transfer{
  146 + z-index: @zindex-transfer;
  147 + .selectDropDown();
  148 + .select-item(@cascader-prefix-cls, @cascader-item-prefix-cls);
  149 + .ivu-select-item span{
  150 + color: @error-color;
  151 + }
  152 +}
141 153  
142 154 .@{form-item-prefix-cls}-error{
143 155 .@{cascader-prefix-cls} {
... ...