|
3 | 3 | <view class="u-demo-wrap" style="background-color: #FFFFFF;">
|
4 | 4 | <view class="u-demo-title">演示效果</view>
|
5 | 5 | <view class="u-demo-area">
|
6 |
| - <u-calendar v-model="show" :minDate="minDate" :maxDate="maxDate" :btnType="btnType" :activeBgColor="activeBgColor" |
7 |
| - :rangeBgColor="rangeBgColor" :rangeColor="rangeColor" :startText="startText" :endText="endText" :arrowType="arrowType" |
8 |
| - :mode="mode" ref="calendar" @change="change"> |
9 |
| - |
| 6 | + <u-calendar v-model="show" ref="calendar" @change="change" :mode="mode" |
| 7 | + :start-text="startText" :end-text="endText" :range-color="rangeColor" |
| 8 | + :range-bg-color="rangeBgColor" :active-bg-color="activeBgColor" :btn-type="btnType" |
| 9 | + > |
10 | 10 | </u-calendar>
|
| 11 | + <view class="u-demo-result-line"> |
| 12 | + {{result}} |
| 13 | + </view> |
11 | 14 | </view>
|
12 | 15 | </view>
|
13 | 16 | <view class="u-config-wrap">
|
|
19 | 22 | <u-subsection vibrateShort :current="showBtnStatus" :list="['显示', '隐藏']" @change="showChange"></u-subsection>
|
20 | 23 | </view>
|
21 | 24 | <view class="u-config-item">
|
22 |
| - <view class="u-item-title">显示错误信息</view> |
23 |
| - <u-subsection vibrateShort current="1" :list="['是', '否']" @change="errorMessageChange"></u-subsection> |
| 25 | + <view class="u-item-title">模式</view> |
| 26 | + <u-subsection vibrateShort current="1" :list="['单个日期', '日期范围']" @change="modeChange"></u-subsection> |
24 | 27 | </view>
|
25 | 28 | <view class="u-config-item">
|
26 |
| - <view class="u-item-title">是否必填</view> |
27 |
| - <u-subsection vibrateShort current="1" :list="['是', '否']" @change="requiredChange"></u-subsection> |
28 |
| - </view> |
29 |
| - <view class="u-config-item"> |
30 |
| - <view class="u-item-title">显示左图标和右箭头</view> |
31 |
| - <u-subsection vibrateShort current="1" :list="['是', '否']" @change="customChange"></u-subsection> |
32 |
| - </view> |
33 |
| - <view class="u-config-item"> |
34 |
| - <view class="u-item-title">第一个输入框为textarea类型</view> |
35 |
| - <u-subsection vibrateShort current="1" :list="['是', '否']" @change="textareaChange"></u-subsection> |
| 29 | + <view class="u-item-title">自定义样式</view> |
| 30 | + <u-subsection vibrateShort current="1" :list="['是', '否']" @change="styleChange"></u-subsection> |
36 | 31 | </view>
|
37 | 32 | </view>
|
38 | 33 | </view>
|
|
44 | 39 | return {
|
45 | 40 | show: false,
|
46 | 41 | mode: 'range',
|
47 |
| - arrowType: 1, |
48 |
| - minDate: "1920-01-01", |
49 |
| - maxDate: "", |
50 |
| - btnType: "primary", |
51 |
| - activeBgColor: "#2979ff", |
52 |
| - rangeBgColor: "rgba(41,121,255,0.13)", |
53 |
| - rangeColor: "#2979ff", |
54 |
| - startText: "开始", |
55 |
| - endText: "结束", |
56 |
| - result: "" |
| 42 | + result: "请选择日期", |
| 43 | + startText: '开始', |
| 44 | + endText: '结束', |
| 45 | + rangeColor: '#2979ff', |
| 46 | + rangeBgColor: 'rgba(41,121,255,0.13)', |
| 47 | + activeBgColor: '#2979ff', |
| 48 | + btnType: 'primary', |
57 | 49 | }
|
58 | 50 | },
|
59 | 51 | computed: {
|
|
65 | 57 | showChange(index) {
|
66 | 58 | this.show = !index;
|
67 | 59 | },
|
68 |
| - errorMessageChange(index) { |
69 |
| - this.errorMessage = index == 0 ? '手机号有误' : false |
| 60 | + modeChange(index) { |
| 61 | + this.mode = index == 0 ? 'date' : 'range'; |
| 62 | + this.show = true; |
70 | 63 | },
|
71 |
| - requiredChange(index) { |
72 |
| - this.required = index == 0 ? true : false; |
| 64 | + styleChange(index) { |
| 65 | + if(index == 0) { |
| 66 | + this.startText = '住店'; |
| 67 | + this.endText = '离店'; |
| 68 | + this.activeBgColor = '#19be6b'; |
| 69 | + this.rangeColor = '#19be6b'; |
| 70 | + this.rangeBgColor = 'rgba(25,190,107, 0.13)'; |
| 71 | + this.btnType = 'success'; |
| 72 | + } else { |
| 73 | + this.startText = '开始'; |
| 74 | + this.endText = '结束'; |
| 75 | + this.activeBgColor = '#2979ff'; |
| 76 | + this.rangeColor = '#2979ff'; |
| 77 | + this.rangeBgColor = 'rgba(41,121,255,0.13)'; |
| 78 | + this.btnType = 'primary'; |
| 79 | + } |
| 80 | + this.show = true; |
73 | 81 | },
|
74 | 82 | customChange(index) {
|
75 | 83 | if(index == 0) {
|
|
86 | 94 | this.type = index == 0 ? 'textarea' : 'text';
|
87 | 95 | },
|
88 | 96 | change(e) {
|
89 |
| - console.log(e) |
90 |
| - if (this.type == 1) { |
91 |
| - this.result = e.result |
| 97 | + if (this.mode == 'range') { |
| 98 | + this.result = e.startDate + " - " + e.endDate; |
92 | 99 | } else {
|
93 |
| - this.result = `${e.startDate} 至 ${e.endDate}` |
| 100 | + this.result = e.result; |
94 | 101 | }
|
95 | 102 | }
|
96 | 103 | }
|
|
0 commit comments