theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'develop' of https://gitee.com/layui-vue/layui-vue into develop

Browse Source
This commit is contained in:
sight 2022-04-01 08:50:44 +08:00
commit bb4fed2d43
8 changed files with 107 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
example/docs/zh-CN/components/datePicker.md
View File

@ -40,7 +40,7 @@ export default {
::: demo ::: demo
<template> <template>
<lay-date-picker type="datetime" v-model="endTime"></lay-date-picker> <lay-date-picker type="datetime" v-model="endTime2"></lay-date-picker>
</template> </template>
<script> <script>
@ -49,10 +49,10 @@ import { ref } from 'vue'
export default { export default {
setup() { setup() {
const endTime = ref("2022-03-04 17:35:00"); const endTime2 = ref("2022-03-04 17:35:00");
return { return {
endTime endTime2
} }
} }
} }
@ -66,7 +66,7 @@ export default {
::: demo ::: demo
<template> <template>
<lay-date-picker type="year" v-model="endTime"></lay-date-picker> <lay-date-picker type="year" v-model="endTime3"></lay-date-picker>
</template> </template>
<script> <script>
@ -75,10 +75,10 @@ import { ref } from 'vue'
export default { export default {
setup() { setup() {
const endTime = ref("2022-03-04 17:35:00"); const endTime3 = ref("2022-03-04 17:35:00");
return { return {
endTime endTime3
} }
} }
} }
@ -92,7 +92,7 @@ export default {
::: demo ::: demo
<template> <template>
<lay-date-picker type="month" v-model="endTime"></lay-date-picker> <lay-date-picker type="month" v-model="endTime4"></lay-date-picker>
</template> </template>
<script> <script>
@ -101,10 +101,10 @@ import { ref } from 'vue'
export default { export default {
setup() { setup() {
const endTime = ref("2022-03-04 17:35:00"); const endTime4 = ref("2022-03-04 17:35:00");
return { return {
endTime endTime4
} }
} }
} }

26
example/docs/zh-CN/components/switch.md
View File

@ -146,6 +146,32 @@ export default {
::: :::
::: title 自定义值
:::
::: demo
<template>
<lay-switch v-model="active6" onswitch-value="dark" unswitch-value="light"></lay-switch>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const active6 = ref('dark')
return {
active6
}
}
}
</script>
:::
::: title Switch 属性 ::: title Switch 属性
::: :::

6
example/docs/zh-CN/guide/changelog.md
View File

@ -14,8 +14,10 @@
<ul> <ul>
<a name="0-4-5"> </a> <a name="0-4-5"> </a>
<li> <li>
<h3>0.4.4 <span class="layui-badge-rim">2022-03-29</span></h3> <h3>0.4.5 <span class="layui-badge-rim">2022-03-29</span></h3>
<ul> <ul>
<li>[新增] switch 组件 onswitch-value 属性。</li>
<li>[新增] switch 组件 unswitch-value 属性。</li>
<li>[新增] tab 组件 position 属性, 不同方向的选项卡标题。</li> <li>[新增] tab 组件 position 属性, 不同方向的选项卡标题。</li>
<li>[修复] transfer 组件 showSearch 属性类型警告。</li> <li>[修复] transfer 组件 showSearch 属性类型警告。</li>
<li>[修复] upload 组件 number 属性必填警告。</li> <li>[修复] upload 组件 number 属性必填警告。</li>
@ -29,7 +31,7 @@
<ul> <ul>
<a name="0-4-4"> </a> <a name="0-4-4"> </a>
<li> <li>
<h3>0.4.4 <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>[新增] button 组件 prefix-icon 属性。</li> <li>[新增] button 组件 prefix-icon 属性。</li>
<li>[新增] button 组件 suffix-icon 属性。</li> <li>[新增] button 组件 suffix-icon 属性。</li>

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@layui/layui-vue", "name": "@layui/layui-vue",
"version": "0.4.5-alpha.5", "version": "0.4.5-alpha.7",
"author": "就眠儀式", "author": "就眠儀式",
"license": "MIT", "license": "MIT",
"description": "a component library for Vue 3 base on layui-vue", "description": "a component library for Vue 3 base on layui-vue",

146
src/component/datePicker/index.vue
View File

@ -1,43 +1,36 @@
<template> <template>
<div> <div>
<lay-dropdown ref="dropdownRef"> <lay-dropdown ref="dropdownRef">
<lay-input :name="name" :value="dateValue || modelValue" readonly> <lay-input :name="name" :value="dateValue" readonly>
<template #prefix> <template #prefix>
<lay-icon type="layui-icon-date"></lay-icon> <lay-icon type="layui-icon-date"></lay-icon>
</template> </template>
</lay-input> </lay-input>
<template #content> <template #content>
<!-- 日期选择 --> <!-- 日期选择 -->
<div <div class="layui-laydate" v-show="showPane === 'date' || showPane === 'datetime'">
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'" <span @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
>{{ 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>
@ -66,9 +59,7 @@
'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>
@ -80,16 +71,11 @@
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 lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
>清空</span <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
><span lay-type="now" class="laydate-btns-now" @click="now" <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
>现在</span
><span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
>确定</span
>
</div> </div>
</div> </div>
</div> </div>
@ -102,19 +88,14 @@
<span class="laydate-time-text">选择年份</span> <span class="laydate-time-text">选择年份</span>
</div> </div>
</div> </div>
<div <div class="layui-laydate-content" style="height: 220px; overflow-y: auto">
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>
@ -123,16 +104,11 @@
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 lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
>清空</span <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
><span lay-type="now" class="laydate-btns-now" @click="now" <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
>现在</span
><span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
>确定</span
>
</div> </div>
</div> </div>
</div> </div>
@ -144,23 +120,18 @@
<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">
@ -171,9 +142,7 @@
{ '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>
@ -182,16 +151,11 @@
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 lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
>清空</span <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
><span lay-type="now" class="laydate-btns-now" @click="now" <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
>现在</span
><span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
>确定</span
>
</div> </div>
</div> </div>
</div> </div>
@ -220,26 +184,18 @@
? '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 @click="showPane = 'date'" 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 lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
>清空</span <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
><span lay-type="now" class="laydate-btns-now" @click="now" <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
>现在</span
><span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
>确定</span
>
</div> </div>
</div> </div>
</div> </div>
@ -309,7 +265,14 @@ watch(
}, },
{ immediate: true } { immediate: true }
); );
// 格式化
const fmtMap = {
date: 'YYYY-MM-DD',
datetime: 'YYYY-MM-DD hh:mm:ss',
year: 'YYYY',
month: 'MM',
'': '',
}
// 计算结果日期 // 计算结果日期
const dateValue = computed<string>(() => { const dateValue = computed<string>(() => {
if (currentDay.value === -1) { if (currentDay.value === -1) {
@ -317,26 +280,9 @@ const dateValue = computed<string>(() => {
return ""; return "";
} }
let momentVal; let momentVal;
let momentObj = moment(currentDay.value) let momentObj = moment(props.modelValue || currentDay.value)
.hour(hms.value.hh) momentVal = momentObj.format(fmtMap[props.type])
.minute(hms.value.mm) if (momentVal != props.modelValue)
.second(hms.value.ss);
switch (props.type) {
case "date":
momentVal = momentObj.format("YYYY-MM-DD");
break;
case "datetime":
momentVal = momentObj.format("YYYY-MM-DD hh:mm:ss");
break;
case "year":
momentVal = momentObj.format("YYYY");
break;
case "month":
momentVal = momentObj.format("MM");
break;
default:
momentVal = momentObj.format();
}
$emits("update:modelValue", momentVal); $emits("update:modelValue", momentVal);
return momentVal; return momentVal;
}); });

4
src/component/menu/index.vue
View File

@ -32,7 +32,6 @@ const props = withDefaults(defineProps<LayMenuProps>(), {
collapseTransition: true, collapseTransition: true,
}); });
const isTree = computed(() => props.tree); const isTree = computed(() => props.tree);
const isCollapse = computed(() => props.collapse); const isCollapse = computed(() => props.collapse);
const isCollapseTransition = computed(() => props.collapseTransition); const isCollapseTransition = computed(() => props.collapseTransition);
@ -67,7 +66,8 @@ watch(
// 赋值所有打开 // 赋值所有打开
emit("update:openKeys", oldOpenKeys.value); emit("update:openKeys", oldOpenKeys.value);
} }
}, { immediate: true } },
{ immediate: true }
); );
provide("isTree", isTree); provide("isTree", isTree);

4
src/component/subMenu/index.vue
View File

@ -29,7 +29,9 @@ const isTree: Ref<boolean> = inject("isTree") as Ref<boolean>;
const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>; const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>; const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
const isCollapse: Ref<boolean> = inject("isCollapse") as Ref<boolean>; const isCollapse: Ref<boolean> = inject("isCollapse") as Ref<boolean>;
const isCollapseTransition: Ref<boolean> = inject("isCollapseTransition") as Ref<boolean>; const isCollapseTransition: Ref<boolean> = inject(
"isCollapseTransition"
) as Ref<boolean>;
const isOpen = computed(() => { const isOpen = computed(() => {
return openKeys.value.includes(props.id); return openKeys.value.includes(props.id);

17
src/component/switch/index.vue
View File

@ -10,26 +10,35 @@ import "./index.less";
export interface LaySwitchProps { export interface LaySwitchProps {
disabled?: boolean; disabled?: boolean;
modelValue?: boolean; modelValue?: string | number | boolean;
onswitchText?: string; onswitchText?: string;
unswitchText?: string; unswitchText?: string;
onswitchColor?: string; onswitchColor?: string;
unswitchColor?: string; unswitchColor?: string;
onswitchValue?: string | number | boolean;
unswitchValue?: string | number | boolean;
} }
const props = withDefaults(defineProps<LaySwitchProps>(), { const props = withDefaults(defineProps<LaySwitchProps>(), {
disabled: false, disabled: false,
onswitchValue: true,
unswitchValue: false,
}); });
const emit = defineEmits(["update:modelValue", "change"]); const emit = defineEmits(["update:modelValue", "change"]);
const isActive = computed({ const isActive = computed({
get() { get() {
return props.modelValue; return props.modelValue === props.onswitchValue;
}, },
set(val) { set(val) {
emit("change", val); if(val) {
emit("update:modelValue", val); emit("change", props.onswitchValue);
emit("update:modelValue", props.onswitchValue);
} else {
emit("change", props.unswitchValue);
emit("update:modelValue", props.unswitchValue);
}
}, },
}); });