docs: 更新文档

This commit is contained in:
就眠儀式 2022-04-01 02:09:42 +08:00
parent 32afaeef53
commit 2b04373db7
5 changed files with 119 additions and 50 deletions

View File

@ -182,8 +182,10 @@ export default {
| name | 原生 name 属性 | -- | | name | 原生 name 属性 | -- |
| v-model | 是否启用 | `true` `false` | | v-model | 是否启用 | `true` `false` |
| disabled | 禁用 | `true` `false` | | disabled | 禁用 | `true` `false` |
| active-text | 启用描述 | `启动` | | onswitch-text | 启用描述 | `启动` |
| inactive-text | 禁用描述 | `禁用` | | unswitch-text | 禁用描述 | `禁用` |
| onswitch-value | 启用值 | `true` |
| unswitch-value | 禁用值 | `false` |
::: :::
@ -199,6 +201,16 @@ export default {
::: :::
::: title Switch 插槽
:::
::: table
| 属性 | 描述 | 参数 |
| ------ | -------- | ---------------- |
| onswitch-icon | 启用图标 | -- |
| unswitch-icon | 禁用图标 | -- |
:::
::: previousNext switch ::: previousNext switch
::: :::

View File

@ -14,7 +14,7 @@
<ul> <ul>
<a name="0-4-5"> </a> <a name="0-4-5"> </a>
<li> <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> <ul>
<li>[新增] switch 组件 onswitch-value 属性。</li> <li>[新增] switch 组件 onswitch-value 属性。</li>
<li>[新增] switch 组件 unswitch-value 属性。</li> <li>[新增] switch 组件 unswitch-value 属性。</li>
@ -23,6 +23,7 @@
<li>[修复] upload 组件 number 属性必填警告。</li> <li>[修复] upload 组件 number 属性必填警告。</li>
<li>[修复] variable 全局变量重复导入的问题。</li> <li>[修复] variable 全局变量重复导入的问题。</li>
<li>[修复] menu 组件 openKeys 属性失效。</li> <li>[修复] menu 组件 openKeys 属性失效。</li>
<li>[支持] animation 点击演示。</li>
<li>[支持] icon 列表复制。</li> <li>[支持] icon 列表复制。</li>
<li>[支持] 夜间模式。</li> <li>[支持] 夜间模式。</li>
</ul> </ul>
@ -31,7 +32,7 @@
<ul> <ul>
<a name="0-4-4"> </a> <a name="0-4-4"> </a>
<li> <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> <ul>
<li>[新增] button 组件 prefix-icon 属性。</li> <li>[新增] button 组件 prefix-icon 属性。</li>
<li>[新增] button 组件 suffix-icon 属性。</li> <li>[新增] button 组件 suffix-icon 属性。</li>

View File

@ -1,10 +1,13 @@
::: title 夜间模式 ::: title 夜间模式
::: :::
::: describe 默认情况下, 网站主题为日间模式。若需启用深夜模式, 使用 config-provider 组件。 ::: describe 默认情况下, 网站主题为日间模式。
::: :::
``` ::: describe 若启用夜间模式, 使用 "全局配置" 组件配合 theme 属性, 设置为 `dark` 值。
:::
```vue
<template> <template>
<lay-config-provider :theme="theme"> <lay-config-provider :theme="theme">
<App /> <App />

View File

@ -8,29 +8,38 @@
</lay-input> </lay-input>
<template #content> <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-main laydate-main-list-0">
<div class="layui-laydate-header"> <div class="layui-laydate-header">
<i <i
class="layui-icon laydate-icon laydate-prev-y" class="layui-icon laydate-icon laydate-prev-y"
@click="changeYearOrMonth('year', -1)" @click="changeYearOrMonth('year', -1)"
></i> ></i
>
<i <i
class="layui-icon laydate-icon laydate-prev-m" class="layui-icon laydate-icon laydate-prev-m"
@click="changeYearOrMonth('month', -1)" @click="changeYearOrMonth('month', -1)"
></i> ></i
>
<div class="laydate-set-ym"> <div class="laydate-set-ym">
<span @click="showYearPanel">{{ currentYear }} </span> <span @click="showYearPanel">{{ currentYear }} </span>
<span @click="showPane = 'month'">{{ currentMonth + 1 }} </span> <span @click="showPane = 'month'"
>{{ currentMonth + 1 }} </span
>
</div> </div>
<i <i
class="layui-icon laydate-icon laydate-next-m" class="layui-icon laydate-icon laydate-next-m"
@click="changeYearOrMonth('month', 1)" @click="changeYearOrMonth('month', 1)"
></i> ></i
>
<i <i
class="layui-icon laydate-icon laydate-next-y" class="layui-icon laydate-icon laydate-next-y"
@click="changeYearOrMonth('year', 1)" @click="changeYearOrMonth('year', 1)"
></i> ></i
>
</div> </div>
<div class="layui-laydate-content"> <div class="layui-laydate-content">
<table> <table>
@ -59,7 +68,9 @@
'layui-this': item.value === currentDay, 'layui-this': item.value === currentDay,
}" }"
@click="handleDayClick(item)" @click="handleDayClick(item)"
>{{ item.day }}</td> >
{{ item.day }}
</td>
</tr> </tr>
</template> </template>
</tbody> </tbody>
@ -71,11 +82,18 @@
v-if="type === 'datetime'" v-if="type === 'datetime'"
@click="showPane = 'time'" @click="showPane = 'time'"
class="laydate-btns-time" class="laydate-btns-time"
>选择时间</span> >选择时间</span
>
<div class="laydate-footer-btns"> <div class="laydate-footer-btns">
<span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span> <span lay-type="clear" class="laydate-btns-clear" @click="clear"
<span lay-type="now" class="laydate-btns-now" @click="now">现在</span> >清空</span
<span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</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>
</div> </div>
@ -88,14 +106,19 @@
<span class="laydate-time-text">选择年份</span> <span class="laydate-time-text">选择年份</span>
</div> </div>
</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"> <ul class="layui-laydate-list laydate-year-list">
<li <li
v-for="item of yearList" v-for="item of yearList"
:key="item" :key="item"
:class="[{ 'layui-this': currentYear === item }]" :class="[{ 'layui-this': currentYear === item }]"
@click="handleYearClick(item)" @click="handleYearClick(item)"
>{{ item }}</li> >
{{ item }}
</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -104,11 +127,18 @@
class="layui-laydate-preview" class="layui-laydate-preview"
title="当前选中的结果" title="当前选中的结果"
style="color: rgb(102, 102, 102)" style="color: rgb(102, 102, 102)"
>2022</span> >2022</span
>
<div class="laydate-footer-btns"> <div class="laydate-footer-btns">
<span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span> <span lay-type="clear" class="laydate-btns-clear" @click="clear"
<span lay-type="now" class="laydate-btns-now" @click="now">现在</span> >清空</span
<span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</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>
</div> </div>
@ -120,18 +150,23 @@
<i <i
class="layui-icon laydate-icon laydate-prev-y" class="layui-icon laydate-icon laydate-prev-y"
@click="changeYearOrMonth('year', -1)" @click="changeYearOrMonth('year', -1)"
></i> ></i
>
<div class="laydate-set-ym"> <div class="laydate-set-ym">
<span <span
@click="showYearPanel" @click="showYearPanel"
v-if="showPane === 'date' || showPane === 'datetime'" 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> </div>
<i <i
class="layui-icon laydate-icon laydate-next-y" class="layui-icon laydate-icon laydate-next-y"
@click="changeYearOrMonth('year', 1)" @click="changeYearOrMonth('year', 1)"
></i> ></i
>
</div> </div>
<div class="layui-laydate-content" style="height: 220px"> <div class="layui-laydate-content" style="height: 220px">
<ul class="layui-laydate-list laydate-month-list"> <ul class="layui-laydate-list laydate-month-list">
@ -142,7 +177,9 @@
{ 'layui-this': MONTH_NAME.indexOf(item) === currentMonth }, { 'layui-this': MONTH_NAME.indexOf(item) === currentMonth },
]" ]"
@click="handleMonthClick(item)" @click="handleMonthClick(item)"
>{{ item.slice(0, 3) }}</li> >
{{ item.slice(0, 3) }}
</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -151,11 +188,18 @@
class="layui-laydate-preview" class="layui-laydate-preview"
title="当前选中的结果" title="当前选中的结果"
style="color: rgb(102, 102, 102)" style="color: rgb(102, 102, 102)"
>2022-03</span> >2022-03</span
>
<div class="laydate-footer-btns"> <div class="laydate-footer-btns">
<span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span> <span lay-type="clear" class="laydate-btns-clear" @click="clear"
<span lay-type="now" class="laydate-btns-now" @click="now">现在</span> >清空</span
<span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</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>
</div> </div>
@ -184,18 +228,28 @@
? 'layui-this' ? 'layui-this'
: '', : '',
]" ]"
>{{ index.toString().padStart(2, "0") }}</li> >
{{ index.toString().padStart(2, "0") }}
</li>
</ol> </ol>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="layui-laydate-footer"> <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"> <div class="laydate-footer-btns">
<span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span> <span lay-type="clear" class="laydate-btns-clear" @click="clear"
<span lay-type="now" class="laydate-btns-now" @click="now">现在</span> >清空</span
<span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</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>
</div> </div>
@ -267,12 +321,12 @@ watch(
); );
// //
const fmtMap = { const fmtMap = {
date: 'YYYY-MM-DD', date: "YYYY-MM-DD",
datetime: 'YYYY-MM-DD hh:mm:ss', datetime: "YYYY-MM-DD hh:mm:ss",
year: 'YYYY', year: "YYYY",
month: 'MM', month: "MM",
'': '', "": "",
} };
// //
const dateValue = computed<string>(() => { const dateValue = computed<string>(() => {
if (currentDay.value === -1) { if (currentDay.value === -1) {
@ -280,10 +334,9 @@ const dateValue = computed<string>(() => {
return ""; return "";
} }
let momentVal; let momentVal;
let momentObj = moment(props.modelValue || currentDay.value) let momentObj = moment(props.modelValue || currentDay.value);
momentVal = momentObj.format(fmtMap[props.type]) momentVal = momentObj.format(fmtMap[props.type]);
if (momentVal != props.modelValue) if (momentVal != props.modelValue) $emits("update:modelValue", momentVal);
$emits("update:modelValue", momentVal);
return momentVal; return momentVal;
}); });