other / mew-iview

Commit 538b964bf957998f0a66d158e6cf5fb4aa418e1c

Authored by Rijn
2 parents bfc11079 75e5c6a5

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

Showing 5 changed files with 94 additions and 128 deletions   Show diff stats
Inline Side-by-side
src/components/cascader/cascader.vue
  Show/Hide comments   View file @538b964
1 <template> 1 <template>
2 <div :class="classes" v-clickoutside="handleClose"> 2 <div :class="classes" v-clickoutside="handleClose">
3 - <i-input  
4 - readonly  
5 - :disabled="disabled"  
6 - :value.sync="displayRender"  
7 - :size="size"  
8 - :placeholder="placeholder"  
9 - @on-focus="onFocus"></i-input>  
10 - <Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.stop="clearSelect"></Icon>  
11 - <Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon> 3 + <div :class="[prefixCls + '-rel']" @click="toggleOpen">
  4 + <slot>
  5 + <i-input
  6 + readonly
  7 + :disabled="disabled"
  8 + :value.sync="displayRender"
  9 + :size="size"
  10 + :placeholder="placeholder"></i-input>
  11 + <Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.stop="clearSelect"></Icon>
  12 + <Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon>
  13 + </slot>
  14 + </div>
12 <Dropdown v-show="visible" transition="slide-up"> 15 <Dropdown v-show="visible" transition="slide-up">
13 <div> 16 <div>
14 <Caspanel 17 <Caspanel
@@ -125,6 +128,13 @@ @@ -125,6 +128,13 @@
125 handleClose () { 128 handleClose () {
126 this.visible = false; 129 this.visible = false;
127 }, 130 },
  131 + toggleOpen () {
  132 + if (this.visible) {
  133 + this.handleClose();
  134 + } else {
  135 + this.onFocus();
  136 + }
  137 + },
128 onFocus () { 138 onFocus () {
129 this.visible = true; 139 this.visible = true;
130 if (!this.value.length) { 140 if (!this.value.length) {
src/components/select/option.vue
  Show/Hide comments   View file @538b964
@@ -58,7 +58,7 @@ @@ -58,7 +58,7 @@
58 this.hidden = !new RegExp(val, 'i').test(this.searchLabel); 58 this.hidden = !new RegExp(val, 'i').test(this.searchLabel);
59 } 59 }
60 }, 60 },
61 - ready () { 61 + compiled () {
62 this.searchLabel = this.$el.innerHTML; 62 this.searchLabel = this.$el.innerHTML;
63 }, 63 },
64 events: { 64 events: {
src/styles/components/cascader.less
  Show/Hide comments   View file @538b964
@@ -2,9 +2,13 @@ @@ -2,9 +2,13 @@
2 @cascader-item-prefix-cls: ~"@{css-prefix}cascader-menu-item"; 2 @cascader-item-prefix-cls: ~"@{css-prefix}cascader-menu-item";
3 3
4 .@{cascader-prefix-cls} { 4 .@{cascader-prefix-cls} {
5 - position: relative; 5 + //position: relative;
6 line-height: normal; 6 line-height: normal;
7 7
  8 + &-rel{
  9 + position: relative;
  10 + }
  11 +
8 .@{css-prefix}input{ 12 .@{css-prefix}input{
9 display: block; 13 display: block;
10 cursor: pointer; 14 cursor: pointer;
test/routers/cascader.vue
  Show/Hide comments   View file @538b964
1 <template> 1 <template>
2 - <Cascader :data="data" :value.sync="value" change-on-select></Cascader> 2 + {{ text }}
  3 + <Cascader :data="data" @on-change="handleChange">
  4 + <a href="javascript:void(0)">选择</a>
  5 + </Cascader>
3 </template> 6 </template>
4 <script> 7 <script>
5 export default { 8 export default {
6 data () { 9 data () {
7 return { 10 return {
8 - value: [],  
9 - data: [] 11 + text: '未选择',
  12 + data: [{
  13 + value: 'beijing',
  14 + label: '北京',
  15 + children: [
  16 + {
  17 + value: 'gugong',
  18 + label: '故宫'
  19 + },
  20 + {
  21 + value: 'tiantan',
  22 + label: '天坛'
  23 + },
  24 + {
  25 + value: 'wangfujing',
  26 + label: '王府井'
  27 + }
  28 + ]
  29 + }, {
  30 + value: 'jiangsu',
  31 + label: '江苏',
  32 + children: [
  33 + {
  34 + value: 'nanjing',
  35 + label: '南京',
  36 + children: [
  37 + {
  38 + value: 'fuzimiao',
  39 + label: '夫子庙',
  40 + }
  41 + ]
  42 + },
  43 + {
  44 + value: 'suzhou',
  45 + label: '苏州',
  46 + children: [
  47 + {
  48 + value: 'zhuozhengyuan',
  49 + label: '拙政园',
  50 + },
  51 + {
  52 + value: 'shizilin',
  53 + label: '狮子林',
  54 + }
  55 + ]
  56 + }
  57 + ],
  58 + }]
10 } 59 }
11 }, 60 },
12 methods: { 61 methods: {
13 - updateData () {  
14 - setTimeout(() => {  
15 - this.data = [{  
16 - value: 'beijing',  
17 - label: '北京',  
18 - children: [  
19 - {  
20 - value: 'gugong',  
21 - label: '故宫'  
22 - },  
23 - {  
24 - value: 'tiantan',  
25 - label: '天坛'  
26 - },  
27 - {  
28 - value: 'wangfujing',  
29 - label: '王府井'  
30 - }  
31 - ]  
32 - }, {  
33 - value: 'jiangsu',  
34 - label: '江苏',  
35 - children: [  
36 - {  
37 - value: 'nanjing',  
38 - label: '南京',  
39 - children: [  
40 - {  
41 - value: 'fuzimiao',  
42 - label: '夫子庙'  
43 - }  
44 - ]  
45 - },  
46 - {  
47 - value: 'suzhou',  
48 - label: '苏州',  
49 - children: [  
50 - {  
51 - value: 'zhuozhengyuan',  
52 - label: '拙政园'  
53 - },  
54 - {  
55 - value: 'shizilin',  
56 - label: '狮子林'  
57 - }  
58 - ]  
59 - }  
60 - ]  
61 - }];  
62 - setTimeout(() => {  
63 - this.value = ['beijing', 'tiantan'];  
64 - }, 1000);  
65 - }, 1000); 62 + handleChange (value, selectedData) {
  63 + this.text = selectedData.map(o => o.label).join(', ');
66 } 64 }
67 - },  
68 - ready () {  
69 - this.updateData();  
70 } 65 }
71 } 66 }
72 </script> 67 </script>
test/routers/select.vue
  Show/Hide comments   View file @538b964
1 <template> 1 <template>
2 - <i-button type="primary" @click="modal1 = true">i-selelct加入width样式</i-button>  
3 - <i-button type="primary" @click="modal2 = true">i-selelct没有加入width样式</i-button>  
4 -  
5 - <Modal  
6 - :visible.sync="modal1"  
7 - title="普通的Modal对话框标题">  
8 - <i-select :model.sync="model1" :style="modalStyle">  
9 - <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>  
10 - </i-select>  
11 - </Modal>  
12 -  
13 - <Modal  
14 - :visible.sync="modal2"  
15 - title="普通的Modal对话框标题">  
16 - <i-select :model.sync="model1" :style="modalStyle">  
17 - <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>  
18 - </i-select>  
19 - </Modal> 2 + <i-select :model.sync="model9" style="width:200px">
  3 + <i-option value="beijing" label="北京市">
  4 + <span>北京</span>
  5 + <span style="float:right;color:#ccc">Beiing</span>
  6 + </i-option>
  7 + <i-option value="shanghai" label="上海市">
  8 + <span>上海</span>
  9 + <span style="float:right;color:#ccc">ShangHai</span>
  10 + </i-option>
  11 + <i-option value="shenzhen" label="深圳市">
  12 + <span>深圳</span>
  13 + <span style="float:right;color:#ccc">ShenZhen</span>
  14 + </i-option>
  15 + </i-select>
20 </template> 16 </template>
21 <script> 17 <script>
22 export default { 18 export default {
23 data () { 19 data () {
24 return { 20 return {
25 - modal1: false,  
26 - modal2: false,  
27 - modalStyle: '',  
28 - cityList: [  
29 - {  
30 - value: 'beijing',  
31 - label: '北京市'  
32 - },  
33 - {  
34 - value: 'shanghai',  
35 - label: '上海市'  
36 - },  
37 - {  
38 - value: 'shenzhen',  
39 - label: '深圳市'  
40 - },  
41 - {  
42 - value: 'hangzhou',  
43 - label: '杭州市'  
44 - },  
45 - {  
46 - value: 'nanjing',  
47 - label: '南京市'  
48 - },  
49 - {  
50 - value: 'chongqing',  
51 - label: '重庆市'  
52 - }  
53 - ],  
54 - model1: ''  
55 - }  
56 - },  
57 - computed: {  
58 - modalStyle: function(){  
59 - let s = ""  
60 - if (this.modal1)  
61 - s = "width: 200px"  
62 - if (this.modal2)  
63 - s = ""  
64 - return s 21 + model9: 'shanghai'
65 } 22 }
66 } 23 }
67 } 24 }