docs: update
This commit is contained in:
parent
1c5635ec27
commit
c900a02e0a
@ -1,6 +1,12 @@
|
|||||||
::: anchor
|
::: anchor
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
::: title 基本介绍
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: describe 需要一个简洁的确认框询问用户时。
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -1,6 +1,12 @@
|
|||||||
::: anchor
|
::: anchor
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
::: title 基本介绍
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: describe 屏幕边缘滑出的浮层面板。
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
@ -1,6 +1,12 @@
|
|||||||
::: anchor
|
::: anchor
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
::: title 基本介绍
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: describe 需要用户处理事务,又不希望跳转页面以致打断工作流程时,可以使用 Modal 在当前页面正中打开一个浮层,承载相应的操作。
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 基本使用
|
::: title 基本使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
::: title 基本介绍
|
::: title 基本介绍
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: describe 当有重要操作需告知用户处理结果,且反馈内容较为复杂时使用。
|
::: describe 虚拟滚动, 常用于美化浏览器原生滚动条。
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
|
@ -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") {
|
||||||
|
@ -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 }"
|
||||||
|
Loading…
Reference in New Issue
Block a user