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 1 <template>
2 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 15 <Dropdown v-show="visible" transition="slide-up">
13 16 <div>
14 17 <Caspanel
... ... @@ -125,6 +128,13 @@
125 128 handleClose () {
126 129 this.visible = false;
127 130 },
  131 + toggleOpen () {
  132 + if (this.visible) {
  133 + this.handleClose();
  134 + } else {
  135 + this.onFocus();
  136 + }
  137 + },
128 138 onFocus () {
129 139 this.visible = true;
130 140 if (!this.value.length) {
... ...
src/components/select/option.vue
  Show/Hide comments   View file @538b964
... ... @@ -58,7 +58,7 @@
58 58 this.hidden = !new RegExp(val, 'i').test(this.searchLabel);
59 59 }
60 60 },
61   - ready () {
  61 + compiled () {
62 62 this.searchLabel = this.$el.innerHTML;
63 63 },
64 64 events: {
... ...
src/styles/components/cascader.less
  Show/Hide comments   View file @538b964
... ... @@ -2,9 +2,13 @@
2 2 @cascader-item-prefix-cls: ~"@{css-prefix}cascader-menu-item";
3 3  
4 4 .@{cascader-prefix-cls} {
5   - position: relative;
  5 + //position: relative;
6 6 line-height: normal;
7 7  
  8 + &-rel{
  9 + position: relative;
  10 + }
  11 +
8 12 .@{css-prefix}input{
9 13 display: block;
10 14 cursor: pointer;
... ...
test/routers/cascader.vue
  Show/Hide comments   View file @538b964
1 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 6 </template>
4 7 <script>
5 8 export default {
6 9 data () {
7 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 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 67 </script>
... ...
test/routers/select.vue
  Show/Hide comments   View file @538b964
1 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 16 </template>
21 17 <script>
22 18 export default {
23 19 data () {
24 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 }
... ...