Fix/area date time calendar placeholder

src/area/api.ts

@@ -140,6 +140,15 @@ namespace nasl.ui {
       }
     })
     disabled: nasl.core.Boolean = false;
+    @Prop({
+      group: '主要属性',
+      title: '占位提示',
+      description: '',
+      setter: {
+        concept: "InputSetter"
+      }
+    })
+    placeholder: nasl.core.String;
     @Event({
       title: '点击右上方完成按钮',
       description: '点击右上方完成按钮'

src/area/api.yaml

@@ -100,6 +100,11 @@
       default: false
       group: 状态属性
       description: 置灰显示，且禁止任何交互（焦点、点击、选择、输入等）
+    - name: placeholder
+      title: 占位提示
+      type: string
+      group: 主要属性
+      description: ""
   slots:
     - concept: Slot
       name: default

src/area/demo/index.vue

@@ -27,6 +27,11 @@
         </van-area>
     </demo-block>
 
+    <demo-block card title="占位符">
+        <van-area placeholder="请选择">
+          <template #title>标题</template>
+        </van-area>
+    </demo-block>
   </demo-section>
 </template>
 

src/area/index.js

@@ -55,6 +55,9 @@ export default createComponent({
       type: String,
       default: 'json',
     },
+    placeholder: {
+      type: String,
+    },
     labelField: {
       type: String,
       default: '',
@@ -615,6 +618,7 @@ export default createComponent({
           scopedSlots={tempSlot}
           readonly
           disabled={this.disabled}
+          placeholder={this.placeholder}
           isLink
           input-align={this.inputAlign || 'right'}
           onClick={this.inDesigner() ? this.designerOpen : this.onClickField}

src/area/test/__snapshots__/demo.spec.js.snap

@@ -44,5 +44,15 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
   </div>
+  <div>
+    <div vusion-click-enabled="true" class="van-area__wrappparea">
+      <div label-layout="inline" noallow="" class="van-cellson van-cellson--center van-cellson--insel van-field">
+        <div vusion-slot-name="title" class="van-cellson__title van-field__label van-field__labelhasslots">标题</div>
+        <div class="van-cellson__value van-field__value">
+          <div class="van-field__body"><input type="text" readonly="readonly" placeholder="请选择" class="van-field__control van-field__control--right"></div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 `;

src/calendar/api.ts

@@ -112,6 +112,15 @@ namespace nasl.ui {
       }
     })
     disabled: nasl.core.Boolean = false;
+    @Prop({
+      group: '主要属性',
+      title: '占位提示',
+      description: '',
+      setter: {
+        concept: "InputSetter"
+      }
+    })
+    placeholder: nasl.core.String;
     @Event({
       title: '确认',
       description: '点击完成按钮时触发的事件'

src/calendar/api.yaml

@@ -82,6 +82,11 @@
       default: false
       description: 置灰显示，且禁止任何交互（焦点、点击、选择、输入等）
       group: 状态属性
+    - name: placeholder
+      title: 占位提示
+      type: string
+      group: 主要属性
+      description: ""
   slots:
     - concept: Slot
       name: default

src/calendar/demo/index.vue

@@ -29,6 +29,18 @@
         ></van-calendar>
       </van-cell>
     </demo-block>
+
+    <demo-block title="占位符">
+      <van-cell>
+        <template #title>
+          <span>日期选择</span>
+        </template>
+        <van-calendar
+          title="选择日期"
+          placeholder="请选择日期"
+        ></van-calendar>
+      </van-cell>
+    </demo-block>
   </demo-section>
 </template>
 

src/calendar/index.js

@@ -48,6 +48,9 @@ export default createComponent({
     rowHeight: [Number, String],
     confirmText: String,
     rangePrompt: String,
+    placeholder: {
+      type: String,
+    },
     labelField: {
       type: String,
       default: '',
@@ -286,7 +289,9 @@ export default createComponent({
       this.currentValue = val;
 
       const date = dayjs(this.currentValue);
-      const value = date.isValid() ? date.format('YYYY-MM-DD') : this.currentValue;
+      const value = date.isValid()
+        ? date.format('YYYY-MM-DD')
+        : this.currentValue;
       this.$emit('update:value', value);
       this.$emit('update:default-date', value);
     },
@@ -307,7 +312,9 @@ export default createComponent({
       this.currentValue = val;
 
       const date = dayjs(this.currentValue);
-      const value = date.isValid() ? date.format('YYYY-MM-DD') : this.currentValue;
+      const value = date.isValid()
+        ? date.format('YYYY-MM-DD')
+        : this.currentValue;
       this.$emit('update:value', value);
       this.$emit('update:default-date', value);
       this.scrollIntoView();
@@ -455,7 +462,9 @@ export default createComponent({
       this.currentValue = this.currentDate;
 
       const date = dayjs(this.currentValue);
-      const value = date.isValid() ? date.format('YYYY-MM-DD') : this.currentValue;
+      const value = date.isValid()
+        ? date.format('YYYY-MM-DD')
+        : this.currentValue;
       this.$emit('update:value', value);
       this.$emit('update:default-date', value);
 
@@ -634,6 +643,7 @@ export default createComponent({
             scopedSlots={tempSlot}
             readonly
             disabled={this.disabled}
+            placeholder={this.placeholder}
             isLink
             input-align={this.inputAlign || 'right'}
             onClick={this.inDesigner() ? this.designerOpen : this.togglePopup}

src/calendar/test/__snapshots__/demo.spec.js.snap

@@ -32,5 +32,20 @@ exports[`renders demo correctly 1`] = `
       <van-icon name="arrow" class="van-cell__right-icon"></van-icon>
     </div>
   </div>
+  <div>
+    <div noallow="" role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--center">
+      <div vusion-slot-name="title" vusion-slot-name-edit="title" class="van-cell__title"><span>日期选择</span></div>
+      <div class="van-cell__value">
+        <div vusion-click-enabled="true" class="van-calendar__wrapppcalendar">
+          <div label-layout="inline" noallow="" class="van-cellson van-cellson--center van-cellson--insel van-field">
+            <div class="van-cellson__value van-field__value">
+              <div class="van-field__body"><input type="text" readonly="readonly" placeholder="请选择日期" class="van-field__control van-field__control--right"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <van-icon name="arrow" class="van-cell__right-icon"></van-icon>
+    </div>
+  </div>
 </div>
 `;

src/datetime-picker/api.ts

@@ -302,6 +302,15 @@ namespace nasl.ui {
       }
     })
     disabled: nasl.core.Boolean = false;
+    @Prop({
+      group: '主要属性',
+      title: '占位提示',
+      description: '',
+      setter: {
+        concept: "InputSetter"
+      }
+    })
+    placeholder: nasl.core.String;
     @Event({
       title: '确认',
       description: '点击完成按钮时触发的事件'

src/datetime-picker/api.yaml

@@ -325,6 +325,11 @@
       default: false
       description: 置灰显示，且禁止任何交互（焦点、点击、选择、输入等）
       group: 状态属性
+    - name: placeholder
+      title: 占位提示
+      type: string
+      group: 主要属性
+      description: ""
   slots:
     - concept: Slot
       name: default

src/datetime-picker/demo/index.vue

@@ -117,8 +117,8 @@
           <van-datetime-picker :value.sync="value.secondTime" type="time" unit="second" :title="t('timeType')" />
       </demo-block>
 
-      <demo-block card title="临时测试">
-          <van-datetime-picker :close-on-click-overlay="true" type="date" />
+      <demo-block card title="占位符">
+          <van-datetime-picker :close-on-click-overlay="true" type="date" placeholder="请选择日期时间" />
       </demo-block>
   </demo-section>
 </template>

src/datetime-picker/index.js

@@ -25,7 +25,9 @@ export default createComponent({
     },
     inputAlign: String,
     closeOnClickOverlay: Boolean,
-    placeholder: String,
+    placeholder: {
+      type: String,
+    },
     range: Boolean,
     startValue: String,
     endValue: String,

src/datetime-picker/test/__snapshots__/demo.spec.js.snap

@@ -124,7 +124,7 @@ exports[`renders demo correctly 1`] = `
     <div vusion-click-enabled="true" class="van-datetime-picker__wrapppdtpicker">
       <div label-layout="inline" noallow="" class="van-cellson van-cellson--center van-cellson--insel van-field">
         <div class="van-cellson__value van-field__value">
-          <div class="van-field__body"><input type="text" readonly="readonly" class="van-field__control van-field__control--right"></div>
+          <div class="van-field__body"><input type="text" readonly="readonly" placeholder="请选择日期时间" class="van-field__control van-field__control--right"></div>
         </div>
       </div>
     </div>