chenhaodong / mew-iview

Commit 1212d3da35af01ee522e44aa648b5e9251c950ad

Authored by jingsam
2 parents 16a87cde 257f80f1

Merge remote-tracking branch 'upstream/2.0' into 2.0

Showing 22 changed files with 317 additions and 122 deletions   Show diff stats
Inline Side-by-side
CHANGE.md
  Show/Hide comments   View file @1212d3d
1 1 ### Button
2 2 可以考虑是否支持 @click，而不用 @click.native
3 3 ### Input
4   -使用 v-model
  4 +使用 v-model，增加 on-input-change // todo 考虑更名
5 5 ### RadioGroup
6 6 使用 v-model
7 7 ### Radio
... ... @@ -44,4 +44,5 @@ Caspanel 的 sublist 从 prop -> data
44 44 ### Select
45 45 model 改为 value，支持 v-model
46 46 ### Page
47   -class 改为 className
48 47 \ No newline at end of file
  48 +class 改为 className
  49 +### DatePicker
... ...
README.md
  Show/Hide comments   View file @1212d3d
... ... @@ -27,14 +27,14 @@
27 27 - [ ] Table
28 28 - [x] Select
29 29 - [x] Slider
30   -- [ ] DatePicker
31   -- [ ] TimePicker
  30 +- [x] DatePicker
  31 +- [x] TimePicker
32 32 - [x] Cascader
33   -- [ ] Transfer
  33 +- [x] Transfer
34 34 - [x] InputNumber
35 35 - [x] Rate
36 36 - [x] Upload
37   -- [ ] Form
  37 +- [x] Form
38 38 - [x] Alert
39 39 - [x] Card
40 40 - [ ] Message
... ...
examples/app.vue
  Show/Hide comments   View file @1212d3d
... ... @@ -47,6 +47,8 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
47 47 <li><router-link to="/backtop">Backtop</router-link></li>
48 48 <li><router-link to="/page">Page</router-link></li>
49 49 <li><router-link to="/transfer">Transfer</router-link></li>
  50 + <li><router-link to="/date">Date</router-link></li>
  51 + <li><router-link to="/form">Form</router-link></li>
50 52 </ul>
51 53 </nav>
52 54 <router-view></router-view>
... ...
examples/main.js
  Show/Hide comments   View file @1212d3d
... ... @@ -42,12 +42,12 @@ const router = new VueRouter({
42 42 component: require('./routers/checkbox.vue')
43 43 },
44 44 {
45   - path: '/steps',
46   - component: require('./routers/steps.vue')
  45 + path: '/steps',
  46 + component: require('./routers/steps.vue')
47 47 },
48 48 {
49   - path: '/timeline',
50   - component: require('./routers/timeline.vue')
  49 + path: '/timeline',
  50 + component: require('./routers/timeline.vue')
51 51 },
52 52 {
53 53 path: '/switch',
... ... @@ -152,7 +152,15 @@ const router = new VueRouter({
152 152 {
153 153 path: '/transfer',
154 154 component: require('./routers/transfer.vue')
155   - }
  155 + },
  156 + {
  157 + path: '/date',
  158 + component: require('./routers/date.vue')
  159 + },
  160 + {
  161 + path: '/form',
  162 + component: require('./routers/form.vue')
  163 + },
156 164 ]
157 165 });
158 166  
... ...
examples/routers/date.vue
  Show/Hide comments   View file @1212d3d
1 1 <template>
2   - <Date-picker type="datetime" placeholder="选择日期和时间" style="width: 200px"></Date-picker>
3   - <br>
4   - <Date-picker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker>
5   - <br>
6   - <Date-picker type="datetimerange" placeholder="选择日期和时间" style="width: 300px"></Date-picker>
7   - <br>
8   - <Date-picker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 300px"></Date-picker>
  2 + <div>
  3 + {{ val1 }}
  4 + <Date-picker v-model="val1" type="daterange" placeholder="选择日期" style="width: 200px"></Date-picker>
  5 + <div @click="val1 = '2017-03-02'">change</div>
  6 + </div>
9 7 </template>
10 8 <script>
11 9 export default {
  10 + data () {
  11 + return {
  12 + val1: ''
  13 + }
  14 + },
  15 + computed: {
  16 + ddd () {
  17 + const date = new Date(this.val1);
  18 + const year = date.getFullYear();
  19 + const month = date.getMonth() + 1;
  20 + const day = date.getDate();
12 21  
  22 + return `${year}-${month}-${day}`;
  23 +
  24 + }
  25 + }
13 26 }
14 27 </script>
  28 +
  29 +
  30 +<!--<template>-->
  31 + <!--<row>-->
  32 + <!--<i-col span="12">-->
  33 + <!--<Date-picker type="date" :options="options1" placeholder="选择日期" style="width: 200px"></Date-picker>-->
  34 + <!--</i-col>-->
  35 + <!--<i-col span="12">-->
  36 + <!--<Date-picker type="daterange" :options="options2" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>-->
  37 + <!--</i-col>-->
  38 + <!--</row>-->
  39 +<!--</template>-->
  40 +<!--<script>-->
  41 + <!--export default {-->
  42 + <!--data () {-->
  43 + <!--return {-->
  44 + <!--options1: {-->
  45 + <!--shortcuts: [-->
  46 + <!--{-->
  47 + <!--text: '今天',-->
  48 + <!--value () {-->
  49 + <!--return new Date();-->
  50 + <!--},-->
  51 + <!--onClick: (picker) => {-->
  52 + <!--this.$Message.info('点击了今天');-->
  53 + <!--}-->
  54 + <!--},-->
  55 + <!--{-->
  56 + <!--text: '昨天',-->
  57 + <!--value () {-->
  58 + <!--const date = new Date();-->
  59 + <!--date.setTime(date.getTime() - 3600 * 1000 * 24);-->
  60 + <!--return date;-->
  61 + <!--},-->
  62 + <!--onClick: (picker) => {-->
  63 + <!--this.$Message.info('点击了昨天');-->
  64 + <!--}-->
  65 + <!--},-->
  66 + <!--{-->
  67 + <!--text: '一周前',-->
  68 + <!--value () {-->
  69 + <!--const date = new Date();-->
  70 + <!--date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);-->
  71 + <!--return date;-->
  72 + <!--},-->
  73 + <!--onClick: (picker) => {-->
  74 + <!--this.$Message.info('点击了一周前');-->
  75 + <!--}-->
  76 + <!--}-->
  77 + <!--]-->
  78 + <!--},-->
  79 + <!--options2: {-->
  80 + <!--shortcuts: [-->
  81 + <!--{-->
  82 + <!--text: '最近一周',-->
  83 + <!--value () {-->
  84 + <!--const end = new Date();-->
  85 + <!--const start = new Date();-->
  86 + <!--start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);-->
  87 + <!--return [start, end];-->
  88 + <!--}-->
  89 + <!--},-->
  90 + <!--{-->
  91 + <!--text: '最近一个月',-->
  92 + <!--value () {-->
  93 + <!--const end = new Date();-->
  94 + <!--const start = new Date();-->
  95 + <!--start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);-->
  96 + <!--return [start, end];-->
  97 + <!--}-->
  98 + <!--},-->
  99 + <!--{-->
  100 + <!--text: '最近三个月',-->
  101 + <!--value () {-->
  102 + <!--const end = new Date();-->
  103 + <!--const start = new Date();-->
  104 + <!--start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);-->
  105 + <!--return [start, end];-->
  106 + <!--}-->
  107 + <!--}-->
  108 + <!--]-->
  109 + <!--}-->
  110 + <!--}-->
  111 + <!--}-->
  112 + <!--}-->
  113 +<!--</script>-->
  114 +
  115 +
  116 +<!--<template>-->
  117 + <!--<row>-->
  118 + <!--<i-col span="12">-->
  119 + <!--<Date-picker :value="value1" format="yyyy年MM月dd日" type="date" placeholder="选择日期" style="width: 200px"></Date-picker>-->
  120 + <!--</i-col>-->
  121 + <!--<i-col span="12">-->
  122 + <!--<Date-picker :value="value2" format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>-->
  123 + <!--</i-col>-->
  124 + <!--</row>-->
  125 +<!--</template>-->
  126 +<!--<script>-->
  127 + <!--export default {-->
  128 + <!--data () {-->
  129 + <!--return {-->
  130 + <!--value1: '2016-01-01',-->
  131 + <!--value2: ['2016-01-01', '2016-02-15']-->
  132 + <!--}-->
  133 + <!--}-->
  134 + <!--}-->
  135 +<!--</script>-->
  136 +
  137 +
  138 +<!--<template>-->
  139 + <!--<div>-->
  140 + <!--<Date-picker type="datetime" placeholder="选择日期和时间" style="width: 200px"></Date-picker>-->
  141 + <!--<br>-->
  142 + <!--<Date-picker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker>-->
  143 + <!--<br>-->
  144 + <!--<Date-picker type="datetimerange" placeholder="选择日期和时间" style="width: 300px"></Date-picker>-->
  145 + <!--<br>-->
  146 + <!--<Date-picker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 300px"></Date-picker>-->
  147 + <!--</div>-->
  148 +<!--</template>-->
  149 +<!--<script>-->
  150 + <!--export default {-->
  151 +
  152 + <!--}-->
  153 +<!--</script>-->
  154 +
  155 +
  156 +<!--<template>-->
  157 + <!--<row>-->
  158 + <!--<i-col span="12">-->
  159 + <!--<Time-picker type="time" placeholder="选择时间" style="width: 168px"></Time-picker>-->
  160 + <!--</i-col>-->
  161 + <!--<i-col span="12">-->
  162 + <!--<Time-picker type="timerange" placement="bottom-end" placeholder="选择时间" style="width: 168px"></Time-picker>-->
  163 + <!--</i-col>-->
  164 + <!--</row>-->
  165 +<!--</template>-->
  166 +<!--<script>-->
  167 + <!--export default {-->
  168 + <!--data () {-->
  169 + <!--return {-->
  170 + <!--t1: ''-->
  171 + <!--}-->
  172 + <!--}-->
  173 + <!--}-->
  174 +<!--</script>-->
  175 +
  176 +
  177 +
  178 +
... ...
examples/routers/form.vue
  Show/Hide comments   View file @1212d3d
1 1 <template>
2   - <i-form v-ref:form-validate :model="formValidate" :rules="ruleValidate" :label-width="100">
3   - <Form-item label="输入框" prop="input">
4   - <i-input :value.sync="formValidate.input" placeholder="请输入"></i-input>
  2 + <i-form ref="formInline" :model="formInline" :rules="ruleInline" inline>
  3 + <Form-item prop="user">
  4 + <Input type="text" v-model="formInline.user" placeholder="Username">
  5 + <Icon type="ios-person-outline" slot="prepend"></Icon>
  6 + </Input>
5 7 </Form-item>
6   - <Form-item label="Ajax：" prop="ajax">
7   - <div slot="label">
8   - <span>Ajax</span>
9   - <Tooltip content="基于 axios">
10   - <Icon type="ios-help" size="14" color="#3399ff"></Icon>
11   - </Tooltip>
12   - <span>：</span>
13   - </div>
14   - <Switch :checked.sync="formValidate.ajax"></Switch>
  8 + <Form-item prop="password">
  9 + <Input type="password" v-model="formInline.password" placeholder="Password">
  10 + <Icon type="ios-locked-outline" slot="prepend"></Icon>
  11 + </Input>
15 12 </Form-item>
16 13 <Form-item>
17   - <i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
18   - <i-button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</i-button>
  14 + <Button type="primary" @click.native="handleSubmit('formInline')">登录</Button>
19 15 </Form-item>
20 16 </i-form>
21 17 </template>
... ... @@ -23,27 +19,30 @@
23 19 export default {
24 20 data () {
25 21 return {
26   - formValidate: {
27   - input: '123',
28   - ajax: true
  22 + formInline: {
  23 + user: '',
  24 + password: ''
29 25 },
30   - ruleValidate: {
31   -
  26 + ruleInline: {
  27 + user: [
  28 + { required: true, message: '请填写用户名', trigger: 'blur' }
  29 + ],
  30 + password: [
  31 + { required: true, message: '请填写密码', trigger: 'blur' },
  32 + { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
  33 + ]
32 34 }
33 35 }
34 36 },
35 37 methods: {
36   - handleSubmit (name) {
  38 + handleSubmit(name) {
37 39 this.$refs[name].validate((valid) => {
38 40 if (valid) {
39   - this.$Message.success('提交成功!');
  41 + console.log('success');
40 42 } else {
41   - this.$Message.error('表单验证失败!');
  43 + console.log('fail')
42 44 }
43 45 })
44   - },
45   - handleReset (name) {
46   - this.$refs[name].resetFields();
47 46 }
48 47 }
49 48 }
... ...
src/components/date-picker/base/confirm.vue
  Show/Hide comments   View file @1212d3d
... ... @@ -4,8 +4,8 @@
4 4 <template v-if="isTime">{{ t('i.datepicker.selectDate') }}</template>
5 5 <template v-else>{{ t('i.datepicker.selectTime') }}</template>
6 6 </span>
7   - <i-button size="small" type="text" @click="handleClear">{{ t('i.datepicker.clear') }}</i-button>
8   - <i-button size="small" type="primary" @click="handleSuccess">{{ t('i.datepicker.ok') }}</i-button>
  7 + <i-button size="small" type="text" @click.native="handleClear">{{ t('i.datepicker.clear') }}</i-button>
  8 + <i-button size="small" type="primary" @click.native="handleSuccess">{{ t('i.datepicker.ok') }}</i-button>
9 9 </div>
10 10 </template>
11 11 <script>
... ...
src/components/date-picker/base/date-table.vue
  Show/Hide comments   View file @1212d3d
... ... @@ -6,7 +6,7 @@
6 6 <div :class="[prefixCls + '-header']">
7 7 <span>{{ t('i.datepicker.weeks.sun') }}</span><span>{{ t('i.datepicker.weeks.mon') }}</span><span>{{ t('i.datepicker.weeks.tue') }}</span><span>{{ t('i.datepicker.weeks.wed') }}</span><span>{{ t('i.datepicker.weeks.thu') }}</span><span>{{ t('i.datepicker.weeks.fri') }}</span><span>{{ t('i.datepicker.weeks.sat') }}</span>
8 8 </div>
9   - <span :class="getCellCls(cell)" v-for="cell in readCells"><em :index="$index">{{ cell.text }}</em></span>
  9 + <span :class="getCellCls(cell)" v-for="(cell, index) in readCells"><em :index="index">{{ cell.text }}</em></span>
10 10 </div>
11 11 </template>
12 12 <script>
... ...
src/components/date-picker/base/month-table.vue
  Show/Hide comments   View file @1212d3d
1 1 <template>
2 2 <div :class="classes" @click="handleClick">
3   - <span :class="getCellCls(cell)" v-for="cell in cells"><em :index="$index">{{ tCell(cell.text) }}</em></span>
  3 + <span :class="getCellCls(cell)" v-for="(cell, index) in cells"><em :index="index">{{ tCell(cell.text) }}</em></span>
4 4 </div>
5 5 </template>
6 6 <script>
... ...
src/components/date-picker/base/time-spinner.vue
  Show/Hide comments   View file @1212d3d
1 1 <template>
2 2 <div :class="classes">
3   - <div :class="[prefixCls+ '-list']" v-el:hours>
  3 + <div :class="[prefixCls+ '-list']" ref="hours">
4 4 <ul :class="[prefixCls + '-ul']" @click="handleClickHours">
5   - <li :class="getCellCls(item)" v-for="item in hoursList" v-show="!item.hide" :index="$index">{{ formatTime(item.text) }}</li>
  5 + <li :class="getCellCls(item)" v-for="(item, index) in hoursList" v-show="!item.hide" :index="index">{{ formatTime(item.text) }}</li>
6 6 </ul>
7 7 </div>
8   - <div :class="[prefixCls+ '-list']" v-el:minutes>
  8 + <div :class="[prefixCls+ '-list']" ref="minutes">
9 9 <ul :class="[prefixCls + '-ul']" @click="handleClickMinutes">
10   - <li :class="getCellCls(item)" v-for="item in minutesList" v-show="!item.hide" :index="$index">{{ formatTime(item.text) }}</li>
  10 + <li :class="getCellCls(item)" v-for="(item, index) in minutesList" v-show="!item.hide" :index="index">{{ formatTime(item.text) }}</li>
11 11 </ul>
12 12 </div>
13   - <div :class="[prefixCls+ '-list']" v-show="showSeconds" v-el:seconds>
  13 + <div :class="[prefixCls+ '-list']" v-show="showSeconds" ref="seconds">
14 14 <ul :class="[prefixCls + '-ul']" @click="handleClickSeconds">
15   - <li :class="getCellCls(item)" v-for="item in secondsList" v-show="!item.hide" :index="$index">{{ formatTime(item.text) }}</li>
  15 + <li :class="getCellCls(item)" v-for="(item, index) in secondsList" v-show="!item.hide" :index="index">{{ formatTime(item.text) }}</li>
16 16 </ul>
17 17 </div>
18 18 </div>
... ... @@ -159,9 +159,9 @@
159 159 this.$emit('on-pick-click');
160 160 },
161 161 scroll (type, index) {
162   - const from = this.$els[type].scrollTop;
  162 + const from = this.$refs[type].scrollTop;
163 163 const to = 24 * this.getScrollIndex(type, index);
164   - scrollTop(this.$els[type], from, to, 500);
  164 + scrollTop(this.$refs[type], from, to, 500);
165 165 },
166 166 getScrollIndex (type, index) {
167 167 const Type = firstUpperCase(type);
... ... @@ -177,7 +177,7 @@
177 177 const times = ['hours', 'minutes', 'seconds'];
178 178 this.$nextTick(() => {
179 179 times.forEach(type => {
180   - this.$els[type].scrollTop = 24 * this.getScrollIndex(type, this[type]);
  180 + this.$refs[type].scrollTop = 24 * this.getScrollIndex(type, this[type]);
181 181 });
182 182 });
183 183 },
... ... @@ -199,7 +199,7 @@
199 199 this.scroll('seconds', val);
200 200 }
201 201 },
202   - compiled () {
  202 + mounted () {
203 203 this.updateScroll();
204 204 this.$nextTick(() => this.compiled = true);
205 205 }
... ...
src/components/date-picker/base/year-table.vue
  Show/Hide comments   View file @1212d3d
1 1 <template>
2 2 <div :class="classes" @click="handleClick">
3   - <span :class="getCellCls(cell)" v-for="cell in cells"><em :index="$index">{{ cell.text }}</em></span>
  3 + <span :class="getCellCls(cell)" v-for="(cell, index) in cells"><em :index="index">{{ cell.text }}</em></span>
4 4 </div>
5 5 </template>
6 6 <script>
... ...
src/components/date-picker/panel/date-range.vue
  Show/Hide comments   View file @1212d3d
... ... @@ -42,7 +42,7 @@
42 42 @on-pick="handleRangePick"
43 43 @on-pick-click="handlePickClick"></date-table>
44 44 <year-table
45   - v-ref:left-year-table
  45 + ref="leftYearTable"
46 46 v-show="leftCurrentView === 'year'"
47 47 :year="leftTableYear"
48 48 :date="leftTableDate"
... ... @@ -51,7 +51,7 @@
51 51 @on-pick="handleLeftYearPick"
52 52 @on-pick-click="handlePickClick"></year-table>
53 53 <month-table
54   - v-ref:left-month-table
  54 + ref="leftMonthTable"
55 55 v-show="leftCurrentView === 'month'"
56 56 :month="leftMonth"
57 57 :date="leftTableDate"
... ... @@ -95,7 +95,7 @@
95 95 @on-pick="handleRangePick"
96 96 @on-pick-click="handlePickClick"></date-table>
97 97 <year-table
98   - v-ref:right-year-table
  98 + ref="rightYearTable"
99 99 v-show="rightCurrentView === 'year'"
100 100 :year="rightTableYear"
101 101 :date="rightTableDate"
... ... @@ -104,7 +104,7 @@
104 104 @on-pick="handleRightYearPick"
105 105 @on-pick-click="handlePickClick"></year-table>
106 106 <month-table
107   - v-ref:right-month-table
  107 + ref="rightMonthTable"
108 108 v-show="rightCurrentView === 'month'"
109 109 :month="rightMonth"
110 110 :date="rightTableDate"
... ... @@ -115,7 +115,7 @@
115 115 </div>
116 116 <div :class="[prefixCls + '-content']" v-show="isTime">
117 117 <time-picker
118   - v-ref:time-picker
  118 + ref="timePicker"
119 119 v-show="isTime"
120 120 @on-pick="handleTimePick"
121 121 @on-pick-click="handlePickClick"></time-picker>
... ... @@ -407,7 +407,7 @@
407 407 this.handleConfirm(false);
408 408 }
409 409 },
410   - compiled () {
  410 + mounted () {
411 411 if (this.showTime) {
412 412 // todo 这里也到不了
413 413 this.$refs.timePicker.date = this.minDate;
... ...
src/components/date-picker/panel/date.vue
  Show/Hide comments   View file @1212d3d
... ... @@ -42,7 +42,7 @@
42 42 @on-pick="handleDatePick"
43 43 @on-pick-click="handlePickClick"></date-table>
44 44 <year-table
45   - v-ref:year-table
  45 + ref="yearTable"
46 46 v-show="currentView === 'year'"
47 47 :year="year"
48 48 :date="date"
... ... @@ -51,7 +51,7 @@
51 51 @on-pick="handleYearPick"
52 52 @on-pick-click="handlePickClick"></year-table>
53 53 <month-table
54   - v-ref:month-table
  54 + ref="monthTable"
55 55 v-show="currentView === 'month'"
56 56 :month="month"
57 57 :date="date"
... ... @@ -60,7 +60,7 @@
60 60 @on-pick="handleMonthPick"
61 61 @on-pick-click="handlePickClick"></month-table>
62 62 <time-picker
63   - v-ref:time-picker
  63 + ref="timePicker"
64 64 show-date
65 65 v-show="currentView === 'time'"
66 66 @on-pick="handleTimePick"
... ... @@ -272,7 +272,7 @@
272 272 this.handleDatePick(date);
273 273 }
274 274 },
275   - compiled () {
  275 + mounted () {
276 276 if (this.selectionMode === 'month') {
277 277 this.currentView = 'month';
278 278 }
... ...
src/components/date-picker/panel/time-range.vue
  Show/Hide comments   View file @1212d3d
... ... @@ -7,7 +7,7 @@
7 7 <template v-else>{{ t('i.datepicker.startTime') }}</template>
8 8 </div>
9 9 <time-spinner
10   - v-ref:time-spinner
  10 + ref="timeSpinner"
11 11 :show-seconds="showSeconds"
12 12 :hours="hours"
13 13 :minutes="minutes"
... ... @@ -25,7 +25,7 @@
25 25 <template v-else>{{ t('i.datepicker.endTime') }}</template>
26 26 </div>
27 27 <time-spinner
28   - v-ref:time-spinner-end
  28 + ref="timeSpinnerEnd"
29 29 :show-seconds="showSeconds"
30 30 :hours="hoursEnd"
31 31 :minutes="minutesEnd"
... ... @@ -200,7 +200,7 @@
200 200 this.$refs.timeSpinnerEnd.updateScroll();
201 201 }
202 202 },
203   - compiled () {
  203 + mounted () {
204 204 if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
205 205 }
206 206 };
... ...
src/components/date-picker/panel/time.vue
  Show/Hide comments   View file @1212d3d
... ... @@ -4,7 +4,7 @@
4 4 <div :class="[timePrefixCls + '-header']" v-if="showDate">{{ visibleDate }}</div>
5 5 <div :class="[prefixCls + '-content']">
6 6 <time-spinner
7   - v-ref:time-spinner
  7 + ref="timeSpinner"
8 8 :show-seconds="showSeconds"
9 9 :hours="hours"
10 10 :minutes="minutes"
... ... @@ -108,7 +108,7 @@
108 108 this.$refs.timeSpinner.updateScroll();
109 109 }
110 110 },
111   - compiled () {
  111 + mounted () {
112 112 if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
113 113 }
114 114 };
... ...
src/components/date-picker/picker.vue
  Show/Hide comments   View file @1212d3d
... ... @@ -2,7 +2,7 @@
2 2 <div
3 3 :class="[prefixCls]"
4 4 v-clickoutside="handleClose">
5   - <div v-el:reference :class="[prefixCls + '-rel']">
  5 + <div ref="reference" :class="[prefixCls + '-rel']">
6 6 <slot>
7 7 <i-input
8 8 :class="[prefixCls + '-editor']"
... ... @@ -11,17 +11,19 @@
11 11 :size="size"
12 12 :placeholder="placeholder"
13 13 :value="visualValue"
14   - @on-change="handleInputChange"
  14 + @on-input-change="handleInputChange"
15 15 @on-focus="handleFocus"
16 16 @on-click="handleIconClick"
17   - @mouseenter="handleInputMouseenter"
18   - @mouseleave="handleInputMouseleave"
  17 + @mouseenter.native="handleInputMouseenter"
  18 + @mouseleave.native="handleInputMouseleave"
19 19 :icon="iconType"></i-input>
20 20 </slot>
21 21 </div>
22   - <Drop v-show="opened" :placement="placement" :transition="transition" v-ref:drop>
23   - <div v-el:picker></div>
24   - </Drop>
  22 + <transition :name="transition">
  23 + <Drop v-show="opened" :placement="placement" ref="drop">
  24 + <div ref="picker"></div>
  25 + </Drop>
  26 + </transition>
25 27 </div>
26 28 </template>
27 29 <script>
... ... @@ -192,7 +194,8 @@
192 194 visible: false,
193 195 picker: null,
194 196 internalValue: '',
195   - disableClickOutSide: false // fixed when click a date,trigger clickoutside to close picker
  197 + disableClickOutSide: false, // fixed when click a date,trigger clickoutside to close picker
  198 + currentValue: this.value
196 199 };
197 200 },
198 201 computed: {
... ... @@ -358,21 +361,23 @@
358 361 handleClear () {
359 362 this.visible = false;
360 363 this.internalValue = '';
361   - this.value = '';
  364 + this.currentValue = '';
362 365 this.$emit('on-clear');
363   - this.$dispatch('on-form-change', '');
  366 + // todo 事件
  367 +// this.$dispatch('on-form-change', '');
364 368 },
365 369 showPicker () {
366 370 if (!this.picker) {
  371 + let isConfirm = this.confirm;
367 372 const type = this.type;
368 373  
369   - this.picker = new Vue(this.panel).$mount(this.$els.picker);
  374 + this.picker = new Vue(this.panel).$mount(this.$refs.picker);
370 375 if (type === 'datetime' || type === 'datetimerange') {
371   - this.confirm = true;
  376 + isConfirm = true;
372 377 this.picker.showTime = true;
373 378 }
374 379 this.picker.value = this.internalValue;
375   - this.picker.confirm = this.confirm;
  380 + this.picker.confirm = isConfirm;
376 381 this.picker.selectionMode = this.selectionMode;
377 382 if (this.format) this.picker.format = this.format;
378 383  
... ... @@ -388,8 +393,8 @@
388 393 }
389 394  
390 395 this.picker.$on('on-pick', (date, visible = false) => {
391   - if (!this.confirm) this.visible = visible;
392   - this.value = date;
  396 + if (!isConfirm) this.visible = visible;
  397 + this.currentValue = date;
393 398 this.picker.value = date;
394 399 this.picker.resetView && this.picker.resetView();
395 400 this.emitChange(date);
... ... @@ -425,7 +430,8 @@
425 430 }
426 431  
427 432 this.$emit('on-change', newDate);
428   - this.$dispatch('on-form-change', newDate);
  433 + // todo 事件
  434 +// this.$dispatch('on-form-change', newDate);
429 435 }
430 436 },
431 437 watch: {
... ... @@ -444,8 +450,12 @@
444 450 if (!val && this.picker && typeof this.picker.handleClear === 'function') {
445 451 this.picker.handleClear();
446 452 }
  453 + this.$emit('input', val);
447 454 },
448   - value: {
  455 + value (val) {
  456 + this.currentValue = val;
  457 + },
  458 + currentValue: {
449 459 immediate: true,
450 460 handler (val) {
451 461 const type = this.type;
... ... @@ -462,6 +472,7 @@
462 472 }
463 473  
464 474 this.internalValue = val;
  475 + this.$emit('input', val);
465 476 }
466 477 },
467 478 open (val) {
... ... @@ -478,16 +489,17 @@
478 489 this.picker.$destroy();
479 490 }
480 491 },
481   - ready () {
  492 + mounted () {
482 493 if (this.open !== null) this.visible = this.open;
483   - },
484   - events: {
485   - 'on-form-blur' () {
486   - return false;
487   - },
488   - 'on-form-change' () {
489   - return false;
490   - }
491 494 }
  495 + // todo 事件
  496 +// events: {
  497 +// 'on-form-blur' () {
  498 +// return false;
  499 +// },
  500 +// 'on-form-change' () {
  501 +// return false;
  502 +// }
  503 +// }
492 504 };
493 505 </script>
... ...
src/components/date-picker/picker/date-picker.js
  Show/Hide comments   View file @1212d3d
... ... @@ -23,11 +23,11 @@ export default {
23 23 value: {}
24 24 },
25 25 created () {
26   - if (!this.value) {
  26 + if (!this.currentValue) {
27 27 if (this.type === 'daterange' || this.type === 'datetimerange') {
28   - this.value = ['',''];
  28 + this.currentValue = ['',''];
29 29 } else {
30   - this.value = '';
  30 + this.currentValue = '';
31 31 }
32 32 }
33 33  
... ...
src/components/date-picker/picker/time-picker.js
  Show/Hide comments   View file @1212d3d
... ... @@ -24,11 +24,11 @@ export default {
24 24 value: {}
25 25 },
26 26 created () {
27   - if (!this.value) {
  27 + if (!this.currentValue) {
28 28 if (this.type === 'timerange') {
29   - this.value = ['',''];
  29 + this.currentValue = ['',''];
30 30 } else {
31   - this.value = '';
  31 + this.currentValue = '';
32 32 }
33 33 }
34 34 this.panel = getPanel(this.type);
... ...
src/components/form/form-item.vue
  Show/Hide comments   View file @1212d3d
... ... @@ -3,7 +3,9 @@
3 3 <label :class="[prefixCls + '-label']" :style="labelStyles" v-if="label"><slot name="label">{{ label }}</slot></label>
4 4 <div :class="[prefixCls + '-content']" :style="contentStyles">
5 5 <slot></slot>
6   - <div transition="fade" :class="[prefixCls + '-error-tip']" v-if="validateState === 'error' && showMessage && form.showMessage">{{ validateMessage }}</div>
  6 + <transition name="fade">
  7 + <div :class="[prefixCls + '-error-tip']" v-if="validateState === 'error' && showMessage && form.showMessage">{{ validateMessage }}</div>
  8 + </transition>
7 9 </div>
8 10 </div>
9 11 </template>
... ... @@ -11,6 +13,7 @@
11 13 // https://github.com/ElemeFE/element/blob/dev/packages/form/src/form-item.vue
12 14  
13 15 import AsyncValidator from 'async-validator';
  16 + import Emitter from '../../mixins/emitter';
14 17  
15 18 const prefixCls = 'ivu-form-item';
16 19  
... ... @@ -38,6 +41,8 @@
38 41 }
39 42  
40 43 export default {
  44 + name: 'FormItem',
  45 + mixins: [ Emitter ],
41 46 props: {
42 47 label: {
43 48 type: String,
... ... @@ -206,9 +211,9 @@
206 211 this.validate('change');
207 212 }
208 213 },
209   - ready () {
  214 + mounted () {
210 215 if (this.prop) {
211   - this.$dispatch('on-form-item-add', this);
  216 + this.dispatch('iForm', 'on-form-item-add', this);
212 217  
213 218 Object.defineProperty(this, 'initialValue', {
214 219 value: this.fieldValue
... ... @@ -229,7 +234,7 @@
229 234 }
230 235 },
231 236 beforeDestroy () {
232   - this.$dispatch('on-form-item-remove', this);
  237 + this.dispatch('iForm', 'on-form-item-remove', this);
233 238 }
234 239 };
235 240 </script>
236 241 \ No newline at end of file
... ...
src/components/form/form.vue
  Show/Hide comments   View file @1212d3d
... ... @@ -82,15 +82,15 @@
82 82 this.validate();
83 83 }
84 84 },
85   - events: {
86   - 'on-form-item-add' (field) {
  85 + created () {
  86 + this.$on('on-form-item-add', (field) => {
87 87 if (field) this.fields.push(field);
88 88 return false;
89   - },
90   - 'on-form-item-remove' (field) {
  89 + });
  90 + this.$on('on-form-item-remove', (field) => {
91 91 if (field.prop) this.fields.splice(this.fields.indexOf(field), 1);
92 92 return false;
93   - }
  93 + });
94 94 }
95 95 };
96 96 </script>
97 97 \ No newline at end of file
... ...
src/components/input/input.vue
  Show/Hide comments   View file @1212d3d
... ... @@ -19,7 +19,8 @@
19 19 @keyup.enter="handleEnter"
20 20 @focus="handleFocus"
21 21 @blur="handleBlur"
22   - @input="handleInput">
  22 + @input="handleInput"
  23 + @change="handleChange">
23 24 <div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady" ref="append"><slot name="append"></slot></div>
24 25 </template>
25 26 <textarea
... ... @@ -158,6 +159,9 @@
158 159 this.setCurrentValue(value);
159 160 this.$emit('on-change', event);
160 161 },
  162 + handleChange (event) {
  163 + this.$emit('on-input-change', event);
  164 + },
161 165 setCurrentValue (value) {
162 166 if (value === this.currentValue) return;
163 167 this.$nextTick(() => {
... ...
src/index.js
  Show/Hide comments   View file @1212d3d
... ... @@ -13,9 +13,9 @@ import Cascader from &#39;./components/cascader&#39;;
13 13 import Checkbox from './components/checkbox';
14 14 import Circle from './components/circle';
15 15 import Collapse from './components/collapse';
16   -// import DatePicker from './components/date-picker';
  16 +import DatePicker from './components/date-picker';
17 17 import Dropdown from './components/dropdown';
18   -// import Form from './components/form';
  18 +import Form from './components/form';
19 19 import Icon from './components/icon';
20 20 import Input from './components/input';
21 21 import InputNumber from './components/input-number';
... ... @@ -37,7 +37,7 @@ import Switch from &#39;./components/switch&#39;;
37 37 import Tabs from './components/tabs';
38 38 import Tag from './components/tag';
39 39 import Timeline from './components/timeline';
40   -// import TimePicker from './components/time-picker';
  40 +import TimePicker from './components/time-picker';
41 41 import Tooltip from './components/tooltip';
42 42 import Transfer from './components/transfer';
43 43 import Tree from './components/tree';
... ... @@ -63,12 +63,12 @@ const iview = {
63 63 Checkbox,
64 64 CheckboxGroup: Checkbox.Group,
65 65 iCircle: Circle,
66   - // DatePicker,
  66 + DatePicker,
67 67 Dropdown,
68 68 DropdownItem: Dropdown.Item,
69 69 DropdownMenu: Dropdown.Menu,
70   - // iForm: Form,
71   - // FormItem: Form.Item,
  70 + iForm: Form,
  71 + FormItem: Form.Item,
72 72 iCol: Col,
73 73 Collapse,
74 74 Icon,
... ... @@ -105,7 +105,7 @@ const iview = {
105 105 Tag,
106 106 Timeline,
107 107 TimelineItem: Timeline.Item,
108   - // TimePicker,
  108 + TimePicker,
109 109 Tooltip,
110 110 Transfer,
111 111 Tree,
... ...