feat(datetime-picker): 新增 日期时间显示框支持插槽

Author: Fasttian

pages/nvue/datetime-picker/datetime-picker.nvue

@@ -16,6 +16,10 @@
 		<uni-section :title="'v-model用法：' + single" type="line"></uni-section>
 		<view class="example-body">
 			<uni-datetime-picker v-model="single" />
+		</view>
+		<uni-section :title="'插槽用法：' + single" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker v-model="single">我是一个插槽，点击我</uni-datetime-picker>
 		</view>
 		<uni-section :title="'无边框用法：' + single" type="line"></uni-section>
 		<view class="example-body">

pages/vue/datetime-picker/datetime-picker.vue

@@ -16,6 +16,10 @@
 		<uni-section :title="'v-model用法：' + single" type="line"></uni-section>
 		<view class="example-body">
 			<uni-datetime-picker v-model="single" />
+		</view>
+		<uni-section :title="'插槽用法：' + single" type="line"></uni-section>
+		<view class="example-body">
+			<uni-datetime-picker v-model="single">我是一个插槽，点击我</uni-datetime-picker>
 		</view>
 		<uni-section :title="'无边框用法：' + single" type="line"></uni-section>
 		<view class="example-body">

uni_modules/uni-datetime-picker/changelog.md

@@ -1,3 +1,5 @@
+## 2.0.8（2021-07-07）
+- 新增 日期时间显示框支持插槽
 ## 2.0.7（2021-07-01）
 - 优化 添加 uni-icons 依赖
 ## 2.0.6（2021-05-22）

uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue

@@ -1,30 +1,34 @@
 <template>
 	<view class="uni-date">
-		<view class="uni-date-editor--x" :class="{'uni-date-editor--x__disabled': disabled,
+		<view @click="show">
+			<slot>
+				<view class="uni-date-editor--x" :class="{'uni-date-editor--x__disabled': disabled,
 		'uni-date-x--border': border}">
-			<view v-if="!isRange" class="uni-date-x uni-date-single" @click="show">
-				<view class="uni-date__icon-logo">
-					<image class="uni-date-editor--logo" :src="iconBase64" mode=""></image>
-				</view>
-				<input class="uni-date__input" type="text" v-model="singleVal" :placeholder="placeholder"
-					:disabled="true" />
-			</view>
-			<view v-else class="uni-date-x uni-date-range" @click="show">
-				<view class="uni-date__icon-logo">
-					<image class="uni-date-editor--logo" :src="iconBase64" mode=""></image>
+					<view v-if="!isRange" class="uni-date-x uni-date-single">
+						<view class="uni-date__icon-logo">
+							<image class="uni-date-editor--logo" :src="iconBase64" mode=""></image>
+						</view>
+						<input class="uni-date__input" type="text" v-model="singleVal" :placeholder="placeholder"
+							:disabled="true" />
+					</view>
+					<view v-else class="uni-date-x uni-date-range">
+						<view class="uni-date__icon-logo">
+							<image class="uni-date-editor--logo" :src="iconBase64" mode=""></image>
+						</view>
+						<input class="uni-date__input uni-date-range__input" type="text" v-model="range.startDate"
+							:placeholder="startPlaceholder" :disabled="true" />
+						<slot>
+							<view class="">{{rangeSeparator}}</view>
+						</slot>
+						<input class="uni-date__input uni-date-range__input" type="text" v-model="range.endDate"
+							:placeholder="endPlaceholder" :disabled="true" />
+					</view>
+					<view v-show="!disabled && (singleVal || (range.startDate && range.endDate))"
+						class="uni-date__icon-clear" @click="clear">
+						<uni-icons type="clear" color="#e1e1e1" size="14"></uni-icons>
+					</view>
 				</view>
-				<input class="uni-date__input uni-date-range__input" type="text" v-model="range.startDate"
-					:placeholder="startPlaceholder" :disabled="true" />
-				<slot>
-					<view class="">{{rangeSeparator}}</view>
-				</slot>
-				<input class="uni-date__input uni-date-range__input" type="text" v-model="range.endDate"
-					:placeholder="endPlaceholder" :disabled="true" />
-			</view>
-			<view v-show="!disabled && (singleVal || (range.startDate && range.endDate))" class="uni-date__icon-clear"
-				@click="clear">
-				<uni-icons type="clear" color="#e1e1e1" size="14"></uni-icons>
-			</view>
+			</slot>
 		</view>
 
 		<view v-show="popup" class="uni-date-mask" @click="close"></view>
@@ -101,7 +105,7 @@
 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=3962
 	 * @property {String} type 选择器类型
 	 * @property {String|Array} value 绑定值
-	 * @property {String} placeholder 单选择时的占位内容
+	 * @property {String} placeholder 单选择时的占位内容
 	 * @property {String} start 起始时间
 	 * @property {String} start 终止时间
 	 * @property {String} start-placeholder 范围选择时开始日期的占位内容
@@ -113,7 +117,7 @@
 	 **/
 
 	export default {
-		name:'UniDatetimePicker',
+		name: 'UniDatetimePicker',
 		components: {
 			calendar,
 			timePicker
@@ -618,7 +622,7 @@
 
 <style>
 	.uni-date-x {
-		display: flex;
+		display: flex;
 		flex-direction: row;
 		align-items: center;
 		justify-content: center;
@@ -820,5 +824,4 @@
 	.mr-50 {
 		margin-right: 50px;
 	}
-
-</style>
+</style>

uni_modules/uni-datetime-picker/package.json

@@ -1,7 +1,7 @@
 {
   "id": "uni-datetime-picker",
   "displayName": "uni-datetime-picker 日期选择器",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "uni-datetime-picker 日期时间选择器，支持日历，支持范围选择",
   "keywords": [
     "uni-datetime-picker",