docs: 更新文档
This commit is contained in:
就眠儀式
parent
32afaeef53
commit
2b04373db7
@ -182,8 +182,10 @@ export default {
|
||||
| name | 原生 name 属性 | -- |
|
||||
| v-model | 是否启用 | `true` `false` |
|
||||
| disabled | 禁用 | `true` `false` |
|
||||
| active-text | 启用描述 | `启动` |
|
||||
| inactive-text | 禁用描述 | `禁用` |
|
||||
| onswitch-text | 启用描述 | `启动` |
|
||||
| unswitch-text | 禁用描述 | `禁用` |
|
||||
| onswitch-value | 启用值 | `true` |
|
||||
| unswitch-value | 禁用值 | `false` |
|
||||
|
||||
:::
|
||||
|
||||
@ -199,6 +201,16 @@ export default {
|
||||
:::
|
||||
|
||||
|
||||
::: title Switch 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 参数 |
|
||||
| ------ | -------- | ---------------- |
|
||||
| onswitch-icon | 启用图标 | -- |
|
||||
| unswitch-icon | 禁用图标 | -- |
|
||||
:::
|
||||
|
||||
::: previousNext switch
|
||||
:::
|
||||
@ -14,7 +14,7 @@
|
||||
<ul>
|
||||
<a name="0-4-5"> </a>
|
||||
<li>
|
||||
<h3>0.4.5 <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>[新增] switch 组件 onswitch-value 属性。</li>
|
||||
<li>[新增] switch 组件 unswitch-value 属性。</li>
|
||||
@ -23,6 +23,7 @@
|
||||
<li>[修复] upload 组件 number 属性必填警告。</li>
|
||||
<li>[修复] variable 全局变量重复导入的问题。</li>
|
||||
<li>[修复] menu 组件 openKeys 属性失效。</li>
|
||||
<li>[支持] animation 点击演示。</li>
|
||||
<li>[支持] icon 列表复制。</li>
|
||||
<li>[支持] 夜间模式。</li>
|
||||
</ul>
|
||||
@ -31,7 +32,7 @@
|
||||
<ul>
|
||||
<a name="0-4-4"> </a>
|
||||
<li>
|
||||
<h3>0.4.5 <span class="layui-badge-rim">2022-04-01</span></h3>
|
||||
<h3>0.4.4 <span class="layui-badge-rim">2022-03-29</span></h3>
|
||||
<ul>
|
||||
<li>[新增] button 组件 prefix-icon 属性。</li>
|
||||
<li>[新增] button 组件 suffix-icon 属性。</li>
|
||||
|
||||
@ -1,10 +1,13 @@
|
||||
::: title 夜间模式
|
||||
:::
|
||||
|
||||
::: describe 默认情况下, 网站主题为日间模式。若需启用深夜模式, 使用 config-provider 组件。
|
||||
::: describe 默认情况下, 网站主题为日间模式。
|
||||
:::
|
||||
|
||||
```
|
||||
::: describe 若启用夜间模式, 使用 "全局配置" 组件配合 theme 属性, 设置为 `dark` 值。
|
||||
:::
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<lay-config-provider :theme="theme">
|
||||
<App />
|
||||
|
||||
@ -8,29 +8,38 @@
|
||||
</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
|
||||
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="showPane = 'month'"
|
||||
>{{ currentMonth + 1 }} 月</span
|
||||
>
|
||||
</div>
|
||||
<i
|
||||
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>
|
||||
></i
|
||||
>
|
||||
</div>
|
||||
<div class="layui-laydate-content">
|
||||
<table>
|
||||
@ -59,7 +68,9 @@
|
||||
'layui-this': item.value === currentDay,
|
||||
}"
|
||||
@click="handleDayClick(item)"
|
||||
>{{ item.day }}</td>
|
||||
>
|
||||
{{ item.day }}
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
@ -71,11 +82,18 @@
|
||||
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>
|
||||
@ -88,14 +106,19 @@
|
||||
<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>
|
||||
@ -104,11 +127,18 @@
|
||||
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>
|
||||
<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>
|
||||
@ -120,18 +150,23 @@
|
||||
<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">
|
||||
@ -142,7 +177,9 @@
|
||||
{ 'layui-this': MONTH_NAME.indexOf(item) === currentMonth },
|
||||
]"
|
||||
@click="handleMonthClick(item)"
|
||||
>{{ item.slice(0, 3) }}</li>
|
||||
>
|
||||
{{ item.slice(0, 3) }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -151,11 +188,18 @@
|
||||
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>
|
||||
<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>
|
||||
@ -184,18 +228,28 @@
|
||||
? '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>
|
||||
<span @click="showPane = 'date'" 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>
|
||||
@ -267,12 +321,12 @@ watch(
|
||||
);
|
||||
// 格式化
|
||||
const fmtMap = {
|
||||
date: 'YYYY-MM-DD',
|
||||
datetime: 'YYYY-MM-DD hh:mm:ss',
|
||||
year: 'YYYY',
|
||||
month: 'MM',
|
||||
'': '',
|
||||
}
|
||||
date: "YYYY-MM-DD",
|
||||
datetime: "YYYY-MM-DD hh:mm:ss",
|
||||
year: "YYYY",
|
||||
month: "MM",
|
||||
"": "",
|
||||
};
|
||||
// 计算结果日期
|
||||
const dateValue = computed<string>(() => {
|
||||
if (currentDay.value === -1) {
|
||||
@ -280,10 +334,9 @@ const dateValue = computed<string>(() => {
|
||||
return "";
|
||||
}
|
||||
let momentVal;
|
||||
let momentObj = moment(props.modelValue || currentDay.value)
|
||||
momentVal = momentObj.format(fmtMap[props.type])
|
||||
if (momentVal != props.modelValue)
|
||||
$emits("update:modelValue", momentVal);
|
||||
let momentObj = moment(props.modelValue || currentDay.value);
|
||||
momentVal = momentObj.format(fmtMap[props.type]);
|
||||
if (momentVal != props.modelValue) $emits("update:modelValue", momentVal);
|
||||
return momentVal;
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user