chore: 发布 layui-vue-alpha.8

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  |
 
 :::
 

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
 :::

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>

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",

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>(), {

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="showYearPanel">{{ currentYear }} 年</span
-                <span @click="showPane = 'month'"
+                ><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);
+  let momentObj = moment(currentDay.value).hour(hms.value.hh).minute(hms.value.mm).second(hms.value.ss);
-  momentVal = momentObj.format(fmtMap[props.type]);
+  switch (props.type) {
-  if (momentVal != props.modelValue) $emits("update:modelValue", momentVal);
+    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" });
   }
 };
+
+onMounted(() => {
+  hms.value.hh = moment(currentDay.value).hour();
+  hms.value.mm = moment(currentDay.value).minute();
+  hms.value.ss = moment(currentDay.value).second();
+})
 </script>