!45 日期组件和input的readonly一些问题处理

Merge pull request !45 from 鄢鹏权/develop
2022-04-03 12:41:58 +00:00 · 2022-04-03 12:41:58 +00:00 · b865ed08d7
commit b865ed08d7
parent 4c653112a2 305eff05e5
4 changed files with 54 additions and 102 deletions
--- a/example/docs/zh-CN/components/datePicker.md
+++ b/example/docs/zh-CN/components/datePicker.md
@ -14,6 +14,7 @@
 ::: demo

 <template>
+  选择的时间：{{endTime}}
  <lay-date-picker v-model="endTime"></lay-date-picker>
 </template>

@ -23,7 +24,7 @@ import { ref } from 'vue'
 export default {
  setup() {

-   const endTime = ref("2022-03-04 17:35:00");
+   const endTime = ref("2022-03-14 17:35:00");

    return {
      endTime
@ -40,6 +41,7 @@ export default {
 ::: demo

 <template>
+  选择的时间：{{endTime2}}
  <lay-date-picker type="datetime" v-model="endTime2"></lay-date-picker>
 </template>

@ -66,6 +68,7 @@ export default {
 ::: demo

 <template>
+  选择的时间：{{endTime3}}
  <lay-date-picker type="year" v-model="endTime3"></lay-date-picker>
 </template>

@ -92,6 +95,7 @@ export default {
 ::: demo

 <template>
+  选择的时间：{{endTime4}}
  <lay-date-picker type="month" v-model="endTime4"></lay-date-picker>
 </template>

--- a/src/component/datePicker/index.vue
+++ b/src/component/datePicker/index.vue
@ -8,36 +8,29 @@
      </lay-input>
      <template #content>
        <!-- 日期选择 -->
-        <div
-          class="layui-laydate"
-          v-show="showPane === 'date' || showPane === 'datetime'"
-        >
+        <div 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="showPane = 'month'"
-                  >{{ currentMonth + 1 }} 月</span
-                >
+                <span @click="showYearPanel">{{ currentYear }} 年</span>
+                <span @click="showPane = 'month'">{{ 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
-                      : Math.floor(dateList.length / 7) + 1"
+                    ? dateList.length / 7
+                    : 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,44 +71,31 @@
              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
-              ><span lay-type="now" class="laydate-btns-now" @click="now"
-                >现在</span
-              ><span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
-                >确定</span
-              >
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
+              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
+              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
            </div>
          </div>
        </div>

        <!-- 年份选择器 -->
-        <div
-          class="layui-laydate"
-          v-show="showPane === 'year' || showPane === 'yearmonth'"
-        >
+        <div class="layui-laydate" v-show="showPane === 'year' || showPane === 'yearmonth'">
          <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
            <div class="layui-laydate-header">
              <div class="laydate-set-ym">
                <span class="laydate-time-text">选择年份</span>
              </div>
            </div>
-            <div
-              class="layui-laydate-content"
-              style="height: 220px; overflow-y: auto"
-            >
+            <div 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>
@ -126,16 +104,11 @@
              class="layui-laydate-preview"
              title="当前选中的结果"
              style="color: rgb(102, 102, 102)"
-              >2022</span
-            >
+            >{{ dateValue }}</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
-              ><span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
-                >确定</span
-              >
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
+              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
+              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
            </div>
          </div>
        </div>
@ -147,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
-                >
-                <span @click="showPane = 'month'"
-                  >{{ currentMonth + 1 }} 月</span
-                >
+                >{{ currentYear }} 年</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">
@ -174,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>
@ -185,16 +151,11 @@
              class="layui-laydate-preview"
              title="当前选中的结果"
              style="color: rgb(102, 102, 102)"
-              >2022-03</span
-            >
+            >{{ dateValue }}</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
-              ><span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
-                >确定</span
-              >
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
+              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
+              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
            </div>
          </div>
        </div>
@ -223,29 +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'"
-              v-if="type != 'time'"
-              class="laydate-btns-time"
-              >返回日期</span
-            >
+            <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
-              ><span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
-                >确定</span
-              >
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
+              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
+              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
            </div>
          </div>
        </div>
--- a/src/component/empty/index.vue
+++ b/src/component/empty/index.vue
@ -7,11 +7,10 @@ export default {
 <script setup lang="ts">
 import "./index.less";
 import { withDefaults } from "vue";
-import { String } from "../../types";

 export interface LayEmptyProps {
-  description?: String;
-  image?: String;
+  description?: string;
+  image?: string;
 }

 const props = withDefaults(defineProps<LayEmptyProps>(), {
@ -24,9 +23,7 @@ const props = withDefaults(defineProps<LayEmptyProps>(), {
    <div class="layui-empty-image">
      <img class="layui-empty-image-default" src="./index.svg" />
    </div>
-    <div class="layui-empty-description">
-      {{ description }}
-    </div>
+    <div class="layui-empty-description">{{ description }}</div>
    <div class="layui-empty-extra">
      <slot name="extra"></slot>
    </div>
--- a/src/component/input/index.vue
+++ b/src/component/input/index.vue
@ -8,19 +8,19 @@ export default {
 import "./index.less";
 import { useSlots } from "vue";
 import { useI18n } from "vue-i18n";
-import { Boolean, String } from "../../types";

 const { t } = useI18n();
 const slots = useSlots();

 export interface LayInputProps {
-  name?: String;
-  type?: String;
-  value?: String;
-  disabled?: Boolean;
-  modelValue?: String;
-  placeholder?: String;
-  allowClear?: Boolean;
+  name?: string;
+  type?: string;
+  value?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  modelValue?: string;
+  placeholder?: string;
+  allowClear?: boolean;
 }

 const props = withDefaults(defineProps<LayInputProps>(), {});
@ -73,6 +73,7 @@ const onBlur = () => {
      @focus="onFocus"
      @blur="onBlur"
      @change="onChange"
+      :readonly="props.readonly"
    />
    <span class="layui-input-suffix" v-if="slots.suffix">
      <slot name="suffix"></slot>