Merge branch 'develop' of https://gitee.com/layui-vue/layui-vue into develop

example/docs/zh-CN/components/datePicker.md

@@ -40,7 +40,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-date-picker type="datetime" v-model="endTime"></lay-date-picker>
+  <lay-date-picker type="datetime" v-model="endTime2"></lay-date-picker>
 </template>
 
 <script>
@@ -49,10 +49,10 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-   const endTime = ref("2022-03-04 17:35:00");
+   const endTime2 = ref("2022-03-04 17:35:00");
 
     return {
-      endTime
+      endTime2
     }
   }
 }
@@ -66,7 +66,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-date-picker type="year" v-model="endTime"></lay-date-picker>
+  <lay-date-picker type="year" v-model="endTime3"></lay-date-picker>
 </template>
 
 <script>
@@ -75,10 +75,10 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-   const endTime = ref("2022-03-04 17:35:00");
+   const endTime3 = ref("2022-03-04 17:35:00");
 
     return {
-      endTime
+      endTime3
     }
   }
 }
@@ -92,7 +92,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-date-picker type="month" v-model="endTime"></lay-date-picker>
+  <lay-date-picker type="month" v-model="endTime4"></lay-date-picker>
 </template>
 
 <script>
@@ -101,10 +101,10 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-   const endTime = ref("2022-03-04 17:35:00");
+   const endTime4 = ref("2022-03-04 17:35:00");
 
     return {
-      endTime
+      endTime4
     }
   }
 }

example/docs/zh-CN/components/switch.md

@@ -146,6 +146,32 @@ export default {
 
 :::
 
+::: title 自定义值
+:::
+
+::: demo
+
+<template>
+  <lay-switch v-model="active6" onswitch-value="dark"  unswitch-value="light"></lay-switch>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const active6 = ref('dark')
+
+    return {
+        active6
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title Switch 属性
 :::
 

example/docs/zh-CN/guide/changelog.md

@@ -14,8 +14,10 @@
     <ul> 
       <a name="0-4-5"> </a> 
       <li> 
-        <h3>0.4.4 <span class="layui-badge-rim">2022-03-29</span></h3> 
+        <h3>0.4.5 <span class="layui-badge-rim">2022-03-29</span></h3> 
         <ul>
+          <li>[新增] switch 组件 onswitch-value 属性。</li>
+          <li>[新增] switch 组件 unswitch-value 属性。</li>
           <li>[新增] tab 组件 position 属性, 不同方向的选项卡标题。</li>
           <li>[修复] transfer 组件 showSearch 属性类型警告。</li>
           <li>[修复] upload 组件 number 属性必填警告。</li>
@@ -29,7 +31,7 @@
     <ul> 
       <a name="0-4-4"> </a> 
       <li> 
-        <h3>0.4.4 <span class="layui-badge-rim">2022-03-29</span></h3> 
+        <h3>0.4.5 <span class="layui-badge-rim">2022-04-01</span></h3> 
         <ul>
           <li>[新增] button 组件 prefix-icon 属性。</li>
           <li>[新增] button 组件 suffix-icon 属性。</li>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.4.5-alpha.5",
+  "version": "0.4.5-alpha.7",
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",

src/component/datePicker/index.vue

@@ -1,43 +1,36 @@
 <template>
   <div>
     <lay-dropdown ref="dropdownRef">
-      <lay-input :name="name" :value="dateValue || modelValue" readonly>
+      <lay-input :name="name" :value="dateValue" readonly>
         <template #prefix>
           <lay-icon type="layui-icon-date"></lay-icon>
         </template>
       </lay-input>
       <template #content>
         <!-- 日期选择 -->
-        <div
+        <div class="layui-laydate" v-show="showPane === 'date' || showPane === 'datetime'">
-          class="layui-laydate"
-          v-show="showPane === 'date' || showPane === 'datetime'"
-        >
           <div class="layui-laydate-main laydate-main-list-0">
             <div class="layui-laydate-header">
               <i
                 class="layui-icon laydate-icon laydate-prev-y"
                 @click="changeYearOrMonth('year', -1)"
-                ></i
+              ></i>
-              ><i
+              <i
                 class="layui-icon laydate-icon laydate-prev-m"
                 @click="changeYearOrMonth('month', -1)"
-                ></i
+              ></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>
-                  >{{ currentMonth + 1 }} 月</span
-                >
               </div>
               <i
                 class="layui-icon laydate-icon laydate-next-m"
                 @click="changeYearOrMonth('month', 1)"
-                ></i
+              ></i>
-              ><i
+              <i
                 class="layui-icon laydate-icon laydate-next-y"
                 @click="changeYearOrMonth('year', 1)"
-                ></i
+              ></i>
-              >
             </div>
             <div class="layui-laydate-content">
               <table>
@@ -49,8 +42,8 @@
                 <tbody>
                   <template
                     v-for="(o, i) of dateList.length % 7 == 0
-                      ? dateList.length / 7
+                    ? dateList.length / 7
-                      : Math.floor(dateList.length / 7) + 1"
+                    : Math.floor(dateList.length / 7) + 1"
                     :key="i"
                   >
                     <tr>
@@ -66,9 +59,7 @@
                           'layui-this': item.value === currentDay,
                         }"
                         @click="handleDayClick(item)"
-                      >
+                      >{{ item.day }}</td>
-                        {{ item.day }}
-                      </td>
                     </tr>
                   </template>
                 </tbody>
@@ -80,16 +71,11 @@
               v-if="type === 'datetime'"
               @click="showPane = 'time'"
               class="laydate-btns-time"
-              >选择时间</span
+            >选择时间</span>
-            >
             <div class="laydate-footer-btns">
-              <span lay-type="clear" class="laydate-btns-clear" @click="clear"
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
-                >清空</span
+              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
-              ><span lay-type="now" class="laydate-btns-now" @click="now"
+              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
-                >现在</span
-              ><span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
-                >确定</span
-              >
             </div>
           </div>
         </div>
@@ -102,19 +88,14 @@
                 <span class="laydate-time-text">选择年份</span>
               </div>
             </div>
-            <div
+            <div class="layui-laydate-content" style="height: 220px; overflow-y: auto">
-              class="layui-laydate-content"
-              style="height: 220px; overflow-y: auto"
-            >
               <ul class="layui-laydate-list laydate-year-list">
                 <li
                   v-for="item of yearList"
                   :key="item"
                   :class="[{ 'layui-this': currentYear === item }]"
                   @click="handleYearClick(item)"
-                >
+                >{{ item }}</li>
-                  {{ item }}
-                </li>
               </ul>
             </div>
           </div>
@@ -123,16 +104,11 @@
               class="layui-laydate-preview"
               title="当前选中的结果"
               style="color: rgb(102, 102, 102)"
-              >2022</span
+            >2022</span>
-            >
             <div class="laydate-footer-btns">
-              <span lay-type="clear" class="laydate-btns-clear" @click="clear"
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
-                >清空</span
+              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
-              ><span lay-type="now" class="laydate-btns-now" @click="now"
+              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
-                >现在</span
-              ><span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
-                >确定</span
-              >
             </div>
           </div>
         </div>
@@ -144,23 +120,18 @@
               <i
                 class="layui-icon laydate-icon laydate-prev-y"
                 @click="changeYearOrMonth('year', -1)"
-                ></i
+              ></i>
-              >
               <div class="laydate-set-ym">
                 <span
                   @click="showYearPanel"
                   v-if="showPane === 'date' || showPane === 'datetime'"
-                  >{{ currentYear }} 年</span
+                >{{ currentYear }} 年</span>
-                >
+                <span @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
-                <span @click="showPane = 'month'"
-                  >{{ currentMonth + 1 }} 月</span
-                >
               </div>
               <i
                 class="layui-icon laydate-icon laydate-next-y"
                 @click="changeYearOrMonth('year', 1)"
-                ></i
+              ></i>
-              >
             </div>
             <div class="layui-laydate-content" style="height: 220px">
               <ul class="layui-laydate-list laydate-month-list">
@@ -171,9 +142,7 @@
                     { 'layui-this': MONTH_NAME.indexOf(item) === currentMonth },
                   ]"
                   @click="handleMonthClick(item)"
-                >
+                >{{ item.slice(0, 3) }}</li>
-                  {{ item.slice(0, 3) }}
-                </li>
               </ul>
             </div>
           </div>
@@ -182,16 +151,11 @@
               class="layui-laydate-preview"
               title="当前选中的结果"
               style="color: rgb(102, 102, 102)"
-              >2022-03</span
+            >2022-03</span>
-            >
             <div class="laydate-footer-btns">
-              <span lay-type="clear" class="laydate-btns-clear" @click="clear"
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
-                >清空</span
+              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
-              ><span lay-type="now" class="laydate-btns-now" @click="now"
+              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
-                >现在</span
-              ><span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
-                >确定</span
-              >
             </div>
           </div>
         </div>
@@ -220,26 +184,18 @@
                           ? 'layui-this'
                           : '',
                       ]"
-                    >
+                    >{{ index.toString().padStart(2, "0") }}</li>
-                      {{ index.toString().padStart(2, "0") }}
-                    </li>
                   </ol>
                 </li>
               </ul>
             </div>
           </div>
           <div class="layui-laydate-footer">
-            <span @click="showPane = 'date'" class="laydate-btns-time"
+            <span @click="showPane = 'date'" class="laydate-btns-time">返回日期</span>
-              >返回日期</span
-            >
             <div class="laydate-footer-btns">
-              <span lay-type="clear" class="laydate-btns-clear" @click="clear"
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
-                >清空</span
+              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
-              ><span lay-type="now" class="laydate-btns-now" @click="now"
+              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
-                >现在</span
-              ><span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
-                >确定</span
-              >
             </div>
           </div>
         </div>
@@ -309,7 +265,14 @@ 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) {
@@ -317,27 +280,10 @@ const dateValue = computed<string>(() => {
     return "";
   }
   let momentVal;
-  let momentObj = moment(currentDay.value)
+  let momentObj = moment(props.modelValue || currentDay.value)
-    .hour(hms.value.hh)
+  momentVal = momentObj.format(fmtMap[props.type])
-    .minute(hms.value.mm)
+  if (momentVal != props.modelValue)
-    .second(hms.value.ss);
+    $emits("update:modelValue", momentVal);
-  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;
-    default:
-      momentVal = momentObj.format();
-  }
-  $emits("update:modelValue", momentVal);
   return momentVal;
 });
 

src/component/menu/index.vue

@@ -32,7 +32,6 @@ const props = withDefaults(defineProps<LayMenuProps>(), {
   collapseTransition: true,
 });
 
-
 const isTree = computed(() => props.tree);
 const isCollapse = computed(() => props.collapse);
 const isCollapseTransition = computed(() => props.collapseTransition);
@@ -67,7 +66,8 @@ watch(
       // 赋值所有打开
       emit("update:openKeys", oldOpenKeys.value);
     }
-  }, { immediate: true }
+  },
+  { immediate: true }
 );
 
 provide("isTree", isTree);

src/component/subMenu/index.vue

@@ -29,7 +29,9 @@ const isTree: Ref<boolean> = inject("isTree") as Ref<boolean>;
 const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
 const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
 const isCollapse: Ref<boolean> = inject("isCollapse") as Ref<boolean>;
-const isCollapseTransition: Ref<boolean> = inject("isCollapseTransition") as Ref<boolean>;
+const isCollapseTransition: Ref<boolean> = inject(
+  "isCollapseTransition"
+) as Ref<boolean>;
 
 const isOpen = computed(() => {
   return openKeys.value.includes(props.id);

src/component/switch/index.vue

@@ -10,26 +10,35 @@ import "./index.less";
 
 export interface LaySwitchProps {
   disabled?: boolean;
-  modelValue?: boolean;
+  modelValue?: string | number | boolean;
   onswitchText?: string;
   unswitchText?: string;
   onswitchColor?: string;
   unswitchColor?: string;
+  onswitchValue?: string | number | boolean;
+  unswitchValue?: string | number | boolean;
 }
 
 const props = withDefaults(defineProps<LaySwitchProps>(), {
   disabled: false,
+  onswitchValue: true,
+  unswitchValue: false,
 });
 
 const emit = defineEmits(["update:modelValue", "change"]);
 
 const isActive = computed({
   get() {
-    return props.modelValue;
+    return props.modelValue === props.onswitchValue;
   },
   set(val) {
-    emit("change", val);
+    if(val) {
-    emit("update:modelValue", val);
+      emit("change", props.onswitchValue);
+      emit("update:modelValue", props.onswitchValue);
+    } else {
+      emit("change", props.unswitchValue);
+      emit("update:modelValue", props.unswitchValue);
+    }
   },
 });