From c7bbe6d458a64e2189695c19ca274fe97eaabcae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Sat, 2 Apr 2022 01:25:05 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E5=8F=91=E5=B8=83=20layui-vue-alpha.8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/button.md     |  5 +-
 example/docs/zh-CN/components/datePicker.md | 26 ++++++-
 example/docs/zh-CN/guide/changelog.md       |  2 +
 package.json                                |  2 +-
 src/component/button/index.vue              |  2 +-
 src/component/datePicker/index.vue          | 84 ++++++++++++---------
 6 files changed, 79 insertions(+), 42 deletions(-)

diff --git a/example/docs/zh-CN/components/button.md b/example/docs/zh-CN/components/button.md
index 5247b07f..b9592c93 100644
--- a/example/docs/zh-CN/components/button.md
+++ b/example/docs/zh-CN/components/button.md
@@ -37,7 +37,7 @@ export default {
 ::: title 简约按钮
 :::
 
-::: demo 使用 `border` 属性设置边框主题
+::: demo 使用 `border` 属性设置边框颜色
 
 <template>
   <lay-button>原始按钮</lay-button>
@@ -64,7 +64,7 @@ export default {
 ::: title 不同边框
 :::
 
-::: demo 使用 `border` 属性设置边框主题
+::: demo 使用 `border-style` 属性设置边框样式
 
 <template>
   <lay-button border-style="dashed">原始按钮</lay-button>
@@ -332,6 +332,7 @@ export default {
 | native-type | 原生类型 | string  | `button`  | `button` `submit` `reset`          |
 | prefix-icon | 前置图标 | string  | --   | 内置 icon 集                     |
 | suffix-icon | 后置图标 | string  | --   | 内置 icon 集          |
+| border-style | 边框样式 | string  | `soild`   | border-style css  |
 
 :::
 
diff --git a/example/docs/zh-CN/components/datePicker.md b/example/docs/zh-CN/components/datePicker.md
index 54e5c820..3ad07ddd 100644
--- a/example/docs/zh-CN/components/datePicker.md
+++ b/example/docs/zh-CN/components/datePicker.md
@@ -112,7 +112,31 @@ export default {
 
 :::
 
- 
+::: title 时间选择
+:::
+
+::: demo
+
+<template>
+  <lay-date-picker type="time" v-model="endTime4"></lay-date-picker>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+   const endTime4 = ref("2022-03-04 17:35:00");
+
+    return {
+      endTime4
+    }
+  }
+}
+</script>
+
+:::
 
 ::: previousNext transfer
 :::
\ No newline at end of file
diff --git a/example/docs/zh-CN/guide/changelog.md b/example/docs/zh-CN/guide/changelog.md
index c79b1703..879b591c 100644
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/example/docs/zh-CN/guide/changelog.md
@@ -18,8 +18,10 @@
         <ul>
           <li>[新增] switch 组件 onswitch-value 属性。</li>
           <li>[新增] switch 组件 unswitch-value 属性。</li>
+          <li>[新增] date-picker 组件 time 属性, 支持时分秒选择。</li>
           <li>[新增] tab 组件 position 属性, 不同方向的选项卡标题。</li>
           <li>[新增] button 组件 border-style 属性, 可选值 dashed dotted 等。</li>
+          <li>[修复] date-picker 默认 12 小时制为 24 小时制。</li>
           <li>[修复] transfer 组件 showSearch 属性类型警告。</li>
           <li>[修复] upload 组件 number 属性必填警告。</li>
           <li>[修复] variable 全局变量重复导入的问题。</li>
diff --git a/package.json b/package.json
index 621ffd66..96863b18 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.4.5-alpha.7",
+  "version": "0.4.5-alpha.8",
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",
diff --git a/src/component/button/index.vue b/src/component/button/index.vue
index 0a3b5c97..efe550c6 100644
--- a/src/component/button/index.vue
+++ b/src/component/button/index.vue
@@ -26,7 +26,7 @@ export interface LayButtonProps {
   loading?: BooleanOrString;
   disabled?: BooleanOrString;
   nativeType?: ButtonNativeType;
-  borderStyle: String;
+  borderStyle?: String;
 }
 
 const props = withDefaults(defineProps<LayButtonProps>(), {
diff --git a/src/component/datePicker/index.vue b/src/component/datePicker/index.vue
index 088bdfee..2cb7f6a0 100644
--- a/src/component/datePicker/index.vue
+++ b/src/component/datePicker/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <lay-dropdown ref="dropdownRef">
-      <lay-input :name="name" :value="dateValue" readonly>
+      <lay-input :name="name" :value="dateValue || modelValue" readonly>
         <template #prefix>
           <lay-icon type="layui-icon-date"></lay-icon>
         </template>
@@ -18,15 +18,14 @@
                 class="layui-icon laydate-icon laydate-prev-y"
                 @click="changeYearOrMonth('year', -1)"
                 ></i
-              >
-              <i
+              ><i
                 class="layui-icon laydate-icon laydate-prev-m"
                 @click="changeYearOrMonth('month', -1)"
                 ></i
               >
               <div class="laydate-set-ym">
-                <span @click="showYearPanel">{{ currentYear }} 年</span>
-                <span @click="showPane = 'month'"
+                <span @click="showYearPanel">{{ currentYear }} 年</span
+                ><span @click="showPane = 'month'"
                   >{{ currentMonth + 1 }} 月</span
                 >
               </div>
@@ -34,8 +33,7 @@
                 class="layui-icon laydate-icon laydate-next-m"
                 @click="changeYearOrMonth('month', 1)"
                 ></i
-              >
-              <i
+              ><i
                 class="layui-icon laydate-icon laydate-next-y"
                 @click="changeYearOrMonth('year', 1)"
                 ></i
@@ -87,11 +85,9 @@
             <div class="laydate-footer-btns">
               <span lay-type="clear" class="laydate-btns-clear" @click="clear"
                 >清空</span
-              >
-              <span lay-type="now" class="laydate-btns-now" @click="now"
+              ><span lay-type="now" class="laydate-btns-now" @click="now"
                 >现在</span
-              >
-              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
+              ><span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
                 >确定</span
               >
             </div>
@@ -132,11 +128,9 @@
             <div class="laydate-footer-btns">
               <span lay-type="clear" class="laydate-btns-clear" @click="clear"
                 >清空</span
-              >
-              <span lay-type="now" class="laydate-btns-now" @click="now"
+              ><span lay-type="now" class="laydate-btns-now" @click="now"
                 >现在</span
-              >
-              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
+              ><span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
                 >确定</span
               >
             </div>
@@ -193,11 +187,9 @@
             <div class="laydate-footer-btns">
               <span lay-type="clear" class="laydate-btns-clear" @click="clear"
                 >清空</span
-              >
-              <span lay-type="now" class="laydate-btns-now" @click="now"
+              ><span lay-type="now" class="laydate-btns-now" @click="now"
                 >现在</span
-              >
-              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
+              ><span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
                 >确定</span
               >
             </div>
@@ -237,17 +229,15 @@
             </div>
           </div>
           <div class="layui-laydate-footer">
-            <span @click="showPane = 'date'" class="laydate-btns-time"
+            <span @click="showPane = 'date'" v-if="type!='time'" class="laydate-btns-time"
               >返回日期</span
             >
             <div class="laydate-footer-btns">
               <span lay-type="clear" class="laydate-btns-clear" @click="clear"
                 >清空</span
-              >
-              <span lay-type="now" class="laydate-btns-now" @click="now"
+              ><span lay-type="now" class="laydate-btns-now" @click="now"
                 >现在</span
-              >
-              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
+              ><span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
                 >确定</span
               >
             </div>
@@ -259,7 +249,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, ref, watch, defineProps, defineEmits } from "vue";
+import { computed, nextTick, ref, watch, defineProps, defineEmits, onMounted } from "vue";
 
 import moment from "moment";
 import LayIcon from "../icon/index";
@@ -319,14 +309,7 @@ watch(
   },
   { immediate: true }
 );
-// 格式化
-const fmtMap = {
-  date: "YYYY-MM-DD",
-  datetime: "YYYY-MM-DD hh:mm:ss",
-  year: "YYYY",
-  month: "MM",
-  "": "",
-};
+
 // 计算结果日期
 const dateValue = computed<string>(() => {
   if (currentDay.value === -1) {
@@ -334,9 +317,27 @@ const dateValue = computed<string>(() => {
     return "";
   }
   let momentVal;
-  let momentObj = moment(props.modelValue || currentDay.value);
-  momentVal = momentObj.format(fmtMap[props.type]);
-  if (momentVal != props.modelValue) $emits("update:modelValue", momentVal);
+  let momentObj = moment(currentDay.value).hour(hms.value.hh).minute(hms.value.mm).second(hms.value.ss);
+  switch (props.type) {
+    case "date":
+      momentVal = momentObj.format("YYYY-MM-DD");
+      break;
+    case "datetime":
+      momentVal = momentObj.format("YYYY-MM-DD HH:mm:ss");
+      break;
+    case "year":
+      momentVal = momentObj.format("YYYY");
+      break;
+    case "month":
+      momentVal = momentObj.format("MM");
+      break;
+    case "time":
+      momentVal = momentObj.format("HH:mm:ss");
+      break;
+    default:
+      momentVal = momentObj.format();
+  }
+  $emits("update:modelValue", momentVal);
   return momentVal;
 });
 
@@ -400,6 +401,9 @@ const ok = () => {
 // 现在时间
 const now = () => {
   currentDay.value = moment().valueOf();
+  hms.value.hh = moment().hour();
+  hms.value.mm = moment().minute();
+  hms.value.ss = moment().second();
 };
 
 // 清空日期
@@ -466,4 +470,10 @@ const choseTime = (e: any) => {
     e.target.scrollIntoView({ behavior: "smooth" });
   }
 };
-</script>
+
+onMounted(() => {
+  hms.value.hh = moment(currentDay.value).hour();
+  hms.value.mm = moment(currentDay.value).minute();
+  hms.value.ss = moment(currentDay.value).second();
+})
+</script>
\ No newline at end of file