docs: update

This commit is contained in:
就眠儀式 2022-03-17 00:04:27 +08:00
parent 1c5635ec27
commit c900a02e0a
7 changed files with 42 additions and 15 deletions

View File

@ -1,6 +1,12 @@
::: anchor ::: anchor
::: :::
::: title 基本介绍
:::
::: describe 需要一个简洁的确认框询问用户时。
:::
::: title 基础使用 ::: title 基础使用
::: :::

View File

@ -1,13 +1,20 @@
::: anchor ::: anchor
::: :::
::: title 基本介绍
:::
::: describe 高级 Web 日历组件,完全开源无偿且颜值与功能兼备,足以应对日期相关的各种业务场景。
:::
::: title 基础使用 ::: title 基础使用
::: :::
::: demo ::: demo
<template> <template>
<lay-date-picker v-model="endTime" frontText="结束时间:"></lay-date-picker> <lay-date-picker v-model="endTime"></lay-date-picker>
</template> </template>
<script> <script>

View File

@ -1,6 +1,12 @@
::: anchor ::: anchor
::: :::
::: title 基本介绍
:::
::: describe 屏幕边缘滑出的浮层面板。
:::
::: title 基础使用 ::: title 基础使用
::: :::

View File

@ -1,6 +1,12 @@
::: anchor ::: anchor
::: :::
::: title 基本介绍
:::
::: describe 需要用户处理事务,又不希望跳转页面以致打断工作流程时,可以使用 Modal 在当前页面正中打开一个浮层,承载相应的操作。
:::
::: title 基本使用 ::: title 基本使用
::: :::

View File

@ -4,7 +4,7 @@
::: title 基本介绍 ::: title 基本介绍
::: :::
::: describe 当有重要操作需告知用户处理结果,且反馈内容较为复杂时使用 ::: describe 虚拟滚动, 常用于美化浏览器原生滚动条
::: :::
::: title 基础使用 ::: title 基础使用

View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<lay-dropdown> <lay-dropdown>
<lay-input v-model="dateValue" readonly /> <lay-input :value="dateValue || modelValue" readonly />
<template #content> <template #content>
<!-- 日期选择 --> <!-- 日期选择 -->
<div class="layui-laydate" v-show="showPanel === 'date'"> <div class="layui-laydate" v-show="showPanel === 'date'">
@ -230,7 +230,7 @@ import { computed, nextTick, ref, watch, defineProps, defineEmits } from "vue";
import LayInput from "../input/index.vue"; import LayInput from "../input/index.vue";
import LayDropdown from "../dropdown/index.vue"; import LayDropdown from "../dropdown/index.vue";
defineProps({ const props = defineProps({
modelValue: { type: String, required: false }, modelValue: { type: String, required: false },
}); });
@ -241,7 +241,6 @@ const dateList = ref<any[]>([]);
const curYear = ref(currentDate.getFullYear()); const curYear = ref(currentDate.getFullYear());
const curMonth = ref(currentDate.getMonth()); const curMonth = ref(currentDate.getMonth());
const showPanel = ref("date"); const showPanel = ref("date");
const showDropdown = ref(false);
const selectedDay = ref<number>(); const selectedDay = ref<number>();
const WEEK_NAME = ["日", "一", "二", "三", "四", "五", "六"]; const WEEK_NAME = ["日", "一", "二", "三", "四", "五", "六"];
@ -309,35 +308,33 @@ const setDateList = (year: number, month: number) => {
const prevDays = getDayLength(year, month - 1); // const prevDays = getDayLength(year, month - 1); //
const curFirstDayWeek = new Date(year, month, 1).getDay(); // const curFirstDayWeek = new Date(year, month, 1).getDay(); //
const list: any[] = []; const list: any[] = [];
// //
for (let i = prevDays - curFirstDayWeek + 1; i <= prevDays; i++) { for (let i = prevDays - curFirstDayWeek + 1; i <= prevDays; i++) {
list.push({ list.push({
day: i, day: i,
value: +new Date(year, month - 1, i), value: + new Date(year, month - 1, i),
isRange: false, isRange: false,
isSelected: false, isSelected: false,
type: "prev", type: "prev",
}); });
} }
//
//
for (let i = 1; i <= curDays; i++) { for (let i = 1; i <= curDays; i++) {
list.push({ list.push({
day: i, day: i,
value: +new Date(year, month, i), value: + new Date(year, month, i),
isRange: false, isRange: false,
isSelected: false, isSelected: false,
type: "current", type: "current",
}); });
} }
//
const nextDays = 7 - (list.length % 7); const nextDays = 7 - (list.length % 7);
if (nextDays !== 7) { if (nextDays !== 7) {
//
for (let i = 1; i <= nextDays; i++) { for (let i = 1; i <= nextDays; i++) {
list.push({ list.push({
day: i, day: i,
value: +new Date(year, month + 1, i), value: + new Date(year, month + 1, i),
isRange: false, isRange: false,
isSelected: false, isSelected: false,
type: "next", type: "next",
@ -362,9 +359,13 @@ const handleDayClick = (item: any) => {
curMonth.value = curMonth.value =
item.type === "prev" ? curMonth.value - 1 : curMonth.value + 1; item.type === "prev" ? curMonth.value - 1 : curMonth.value + 1;
} }
showDropdown.value = false;
}; };
//
const ok = () => {
}
// //
const changeYearOrMonth = (type: "year" | "month", num: number) => { const changeYearOrMonth = (type: "year" | "month", num: number) => {
if (type === "year") { if (type === "year") {

View File

@ -13,6 +13,7 @@ const { t } = useI18n();
export interface LayInputProps { export interface LayInputProps {
name?: string; name?: string;
type?: string; type?: string;
value?: string;
disabled?: boolean; disabled?: boolean;
modelValue?: string | number; modelValue?: string | number;
placeholder?: string; placeholder?: string;
@ -41,7 +42,7 @@ const onBlur = function () {
<input <input
:type="type" :type="type"
:name="name" :name="name"
:value="modelValue" :value="modelValue || value"
:disabled="disabled" :disabled="disabled"
:placeholder="placeholder" :placeholder="placeholder"
:class="{ 'layui-disabled': disabled }" :class="{ 'layui-disabled': disabled }"