11Vue . component ( "time-duration-box" , {
2- props : [ "name" , "v-name " , "v-value " , "v-count " , "v- unit" ] ,
2+ props : [ "v- name" , "v-value " , "v-count " , "v-unit " , "placeholder" , "v-min- unit" , "maxlength "] ,
33 mounted : function ( ) {
44 this . change ( )
55 } ,
@@ -15,17 +15,52 @@ Vue.component("time-duration-box", {
1515 v [ "count" ] = - 1
1616 }
1717
18- let realName = ""
19- if ( typeof this . name == "string" && this . name . length > 0 ) {
20- realName = this . name
21- } else if ( typeof this . vName == "string" && this . vName . length > 0 ) {
22- realName = this . vName
18+ let minUnit = this . vMinUnit
19+ let units = [
20+ {
21+ code : "ms" ,
22+ name : "毫秒"
23+ } ,
24+ {
25+ code : "second" ,
26+ name : "秒"
27+ } ,
28+ {
29+ code : "minute" ,
30+ name : "分钟"
31+ } ,
32+ {
33+ code : "hour" ,
34+ name : "小时"
35+ } ,
36+ {
37+ code : "day" ,
38+ name : "天"
39+ }
40+ ]
41+ let minUnitIndex = - 1
42+ if ( minUnit != null && typeof minUnit == "string" && minUnit . length > 0 ) {
43+ for ( let i = 0 ; i < units . length ; i ++ ) {
44+ if ( units [ i ] . code == minUnit ) {
45+ minUnitIndex = i
46+ break
47+ }
48+ }
49+ }
50+ if ( minUnitIndex > - 1 ) {
51+ units = units . slice ( minUnitIndex )
52+ }
53+
54+ let maxLength = parseInt ( this . maxlength )
55+ if ( typeof maxLength != "number" ) {
56+ maxLength = 10
2357 }
2458
2559 return {
2660 duration : v ,
2761 countString : ( v . count >= 0 ) ? v . count . toString ( ) : "" ,
28- realName : realName
62+ units : units ,
63+ realMaxLength : maxLength
2964 }
3065 } ,
3166 watch : {
@@ -48,19 +83,37 @@ Vue.component("time-duration-box", {
4883 }
4984 } ,
5085 template : `<div class="ui fields inline" style="padding-bottom: 0; margin-bottom: 0">
51- <input type="hidden" :name="realName " :value="JSON.stringify(duration)"/>
86+ <input type="hidden" :name="vName " :value="JSON.stringify(duration)"/>
5287 <div class="ui field">
53- <input type="text" v-model="countString" maxlength="11" size="11 " @keypress.enter.prevent="1"/>
88+ <input type="text" v-model="countString" : maxlength="realMaxLength" : size="realMaxLength" :placeholder="placeholder " @keypress.enter.prevent="1"/>
5489 </div>
5590 <div class="ui field">
5691 <select class="ui dropdown" v-model="duration.unit" @change="change">
57- <option value="ms">毫秒</option>
58- <option value="second">秒</option>
59- <option value="minute">分钟</option>
60- <option value="hour">小时</option>
61- <option value="day">天</option>
62- <option value="week">周</option>
92+ <option v-for="unit in units" :value="unit.code">{{unit.name}}</option>
6393 </select>
6494 </div>
6595</div>`
96+ } )
97+
98+ Vue . component ( "time-duration-text" , {
99+ props : [ "v-value" ] ,
100+ methods : {
101+ unitName : function ( unit ) {
102+ switch ( unit ) {
103+ case "ms" :
104+ return "毫秒"
105+ case "second" :
106+ return "秒"
107+ case "minute" :
108+ return "分钟"
109+ case "hour" :
110+ return "小时"
111+ case "day" :
112+ return "天"
113+ }
114+ }
115+ } ,
116+ template : `<span>
117+ {{vValue.count}} {{unitName(vValue.unit)}}
118+ </span>`
66119} )
0 commit comments