(component): update

This commit is contained in:
就眠儀式 2022-07-14 09:12:36 +08:00
parent 2911c00d10
commit 07b11011b1
8 changed files with 309 additions and 128 deletions

View File

@ -23,7 +23,7 @@ const props = withDefaults(defineProps<LayCheckboxProps>(), {
isIndeterminate: false,
modelValue: false,
disabled: false,
label:''
label: "",
});
const checkboxGroup: any = inject("checkboxGroup", {});
@ -100,11 +100,14 @@ const ifDisabled = computed(() => {
if (props.disabled) {
return true;
}
if (checkboxGroup.hasOwnProperty('disabled')&&checkboxGroup.disabled.value) {
if (
checkboxGroup.hasOwnProperty("disabled") &&
checkboxGroup.disabled.value
) {
return true;
}
return false;
})
});
</script>
<template>
@ -118,7 +121,9 @@ const ifDisabled = computed(() => {
}"
:lay-skin="skin"
>
<span><slot>{{label}}</slot></span>
<span
><slot>{{ label }}</slot></span
>
<lay-icon
:type="
props.isIndeterminate && isChecked

View File

@ -10,19 +10,23 @@ import { Recordable } from "../../types";
export interface LayCheckboxGroupProps {
modelValue?: Recordable[];
disabled?:boolean
disabled?: boolean;
}
const props = withDefaults(defineProps<LayCheckboxGroupProps>(), {
modelValue: () => [],
disabled:false
disabled: false,
});
const emit = defineEmits(["update:modelValue", "change"]);
const modelValue = ref(props.modelValue);
const disabled=ref(props.disabled)
provide("checkboxGroup", { name: "LayCheckboxGroup", modelValue: modelValue,disabled:disabled });
const disabled = ref(props.disabled);
provide("checkboxGroup", {
name: "LayCheckboxGroup",
modelValue: modelValue,
disabled: disabled,
});
watch(
() => modelValue,
@ -42,11 +46,13 @@ watch(
() => props.disabled,
(val) => (disabled.value = val)
);
</script>
<template>
<div class="layui-checkbox-group" :class="{'layui-checkbox-group-disabled':disabled}">
<div
class="layui-checkbox-group"
:class="{ 'layui-checkbox-group-disabled': disabled }"
>
<slot></slot>
</div>
</template>

View File

@ -1,22 +1,48 @@
<template>
<div>
<lay-dropdown ref="dropdownRef" :disabled="props.disabled">
<lay-input readonly :name="name" :model-value="dateValue || modelValue" :placeholder="placeholder"
prefix-icon="layui-icon-date">
<lay-input
readonly
:name="name"
:model-value="dateValue || modelValue"
:placeholder="placeholder"
prefix-icon="layui-icon-date"
>
</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 class="layui-icon laydate-icon laydate-prev-m" @click="changeYearOrMonth('month', -1)"></i>
<i
class="layui-icon laydate-icon laydate-prev-y"
@click="changeYearOrMonth('year', -1)"
></i
>
<i
class="layui-icon laydate-icon laydate-prev-m"
@click="changeYearOrMonth('month', -1)"
></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 class="layui-icon laydate-icon laydate-next-y" @click="changeYearOrMonth('year', 1)"></i>
<i
class="layui-icon laydate-icon laydate-next-m"
@click="changeYearOrMonth('month', 1)"
></i
>
<i
class="layui-icon laydate-icon laydate-next-y"
@click="changeYearOrMonth('year', 1)"
></i
>
</div>
<div class="layui-laydate-content">
<table>
@ -26,17 +52,26 @@
</tr>
</thead>
<tbody>
<template v-for="(o, i) of dateList.length % 7 == 0
? dateList.length / 7
: Math.floor(dateList.length / 7) + 1" :key="i">
<template
v-for="(o, i) of dateList.length % 7 == 0
? dateList.length / 7
: Math.floor(dateList.length / 7) + 1"
:key="i"
>
<tr>
<td v-for="(item, index) of dateList.slice(
i * 7,
i * 7 + 7
)" :key="index" :data-unix="item.value" :class="{
'laydate-day-prev': item.type !== 'current',
'layui-this': item.value === currentDay,
}" @click="handleDayClick(item)">
<td
v-for="(item, index) of dateList.slice(
i * 7,
i * 7 + 7
)"
:key="index"
:data-unix="item.value"
:class="{
'laydate-day-prev': item.type !== 'current',
'layui-this': item.value === currentDay,
}"
@click="handleDayClick(item)"
>
{{ item.day }}
</td>
</tr>
@ -46,37 +81,69 @@
</div>
</div>
<div class="layui-laydate-footer">
<span v-if="type === 'datetime'" @click="showPane = 'time'" class="laydate-btns-time">选择时间</span>
<span
v-if="type === 'datetime'"
@click="showPane = 'time'"
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>
<!-- 年份选择器 -->
<div class="layui-laydate" v-show="showPane === 'year' || showPane === 'yearmonth'">
<div
class="layui-laydate"
v-show="showPane === 'year' || showPane === 'yearmonth'"
>
<div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
<div class="layui-laydate-header">
<div class="laydate-set-ym">
<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)">
<li
v-for="item of yearList"
:key="item"
:class="[{ 'layui-this': currentYear === item }]"
@click="handleYearClick(item)"
>
{{ item }}
</li>
</ul>
</div>
</div>
<div class="layui-laydate-footer">
<span class="layui-laydate-preview" title="当前选中的结果" style="color: rgb(102, 102, 102)">{{ dateValue }}</span>
<span
class="layui-laydate-preview"
title="当前选中的结果"
style="color: rgb(102, 102, 102)"
>{{ dateValue }}</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>
@ -84,30 +151,59 @@
<div class="layui-laydate" v-show="showPane === 'month'">
<div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
<div class="layui-laydate-header">
<i class="layui-icon laydate-icon laydate-prev-y" @click="changeYearOrMonth('year', -1)"></i>
<i
class="layui-icon laydate-icon laydate-prev-y"
@click="changeYearOrMonth('year', -1)"
></i
>
<div class="laydate-set-ym">
<span @click="showYearPanel" v-if="showPane === 'date' || showPane === 'datetime'">{{ currentYear }}
</span>
<span @click="showPane = 'month'">{{ currentMonth + 1 }} </span>
<span
@click="showYearPanel"
v-if="showPane === 'date' || showPane === 'datetime'"
>{{ 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
class="layui-icon laydate-icon laydate-next-y"
@click="changeYearOrMonth('year', 1)"
></i
>
</div>
<div class="layui-laydate-content" style="height: 220px">
<ul class="layui-laydate-list laydate-month-list">
<li v-for="item of MONTH_NAME" :key="item" :class="[
{ 'layui-this': MONTH_NAME.indexOf(item) === currentMonth },
]" @click="handleMonthClick(item)">
<li
v-for="item of MONTH_NAME"
:key="item"
:class="[
{ 'layui-this': MONTH_NAME.indexOf(item) === currentMonth },
]"
@click="handleMonthClick(item)"
>
{{ item.slice(0, 3) }}
</li>
</ul>
</div>
</div>
<div class="layui-laydate-footer">
<span class="layui-laydate-preview" title="当前选中的结果" style="color: rgb(102, 102, 102)">{{ dateValue }}</span>
<span
class="layui-laydate-preview"
title="当前选中的结果"
style="color: rgb(102, 102, 102)"
>{{ dateValue }}</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>
@ -123,13 +219,19 @@
<ul class="layui-laydate-list laydate-time-list">
<li class="num-list" v-for="item in els" :key="item.type">
<ol class="scroll" @click="choseTime">
<li v-for="(it, index) in item.count" :id="item.type + index.toString()"
:data-value="index.toString().padStart(2, '0')" :data-type="item.type" :key="it" :class="[
<li
v-for="(it, index) in item.count"
:id="item.type + index.toString()"
:data-value="index.toString().padStart(2, '0')"
:data-type="item.type"
:key="it"
:class="[
'num',
index.toString().padStart(2, '0') == hms[item.type]
? 'layui-this'
: '',
]">
]"
>
{{ index.toString().padStart(2, "0") }}
</li>
</ol>
@ -138,11 +240,22 @@
</div>
</div>
<div class="layui-laydate-footer">
<span @click="showPane = 'date'" v-if="type != 'time'" class="laydate-btns-time">返回日期</span>
<span
@click="showPane = 'date'"
v-if="type != 'time'"
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>
@ -232,7 +345,9 @@ watch(
);
onMounted(() => {
currentDay.value = props.modelValue ? new Date(props.modelValue).getTime() : -1;
currentDay.value = props.modelValue
? new Date(props.modelValue).getTime()
: -1;
if (currentDay.value == -1) {
setTimeout(() => {
now();
@ -338,12 +453,15 @@ watch(
},
{ immediate: true }
);
const unWatch = ref(true)
watch(() => props.modelValue, () => {
if (!unWatch.value) {
currentDay.value = new Date(props.modelValue).getTime();
const unWatch = ref(true);
watch(
() => props.modelValue,
() => {
if (!unWatch.value) {
currentDay.value = new Date(props.modelValue).getTime();
}
}
})
);
//
const ok = () => {
if (dropdownRef.value)
@ -353,7 +471,7 @@ const ok = () => {
//
const now = () => {
unWatch.value = true
unWatch.value = true;
currentDay.value = dayjs().valueOf();
hms.value.hh = dayjs().hour();
hms.value.mm = dayjs().minute();
@ -362,7 +480,7 @@ const now = () => {
//
const clear = () => {
unWatch.value = true
unWatch.value = true;
currentDay.value = -1;
};
@ -390,7 +508,7 @@ const showYearPanel = () => {
//
const handleYearClick = (item: any) => {
unWatch.value = true
unWatch.value = true;
currentYear.value = item;
if (props.type === "year") {
currentDay.value = dayjs().year(item).valueOf();
@ -404,7 +522,7 @@ const handleYearClick = (item: any) => {
//
const handleMonthClick = (item: any) => {
unWatch.value = true
unWatch.value = true;
currentMonth.value = MONTH_NAME.indexOf(item);
if (props.type === "month") {
currentDay.value = dayjs(currentDay.value)
@ -421,7 +539,7 @@ const handleMonthClick = (item: any) => {
//
const handleDayClick = (item: any) => {
unWatch.value = true
unWatch.value = true;
currentDay.value = item.value;
if (item.type !== "current") {
currentMonth.value =
@ -431,7 +549,7 @@ const handleDayClick = (item: any) => {
// - hms
const choseTime = (e: any) => {
unWatch.value = true
unWatch.value = true;
if (e.target.nodeName == "LI") {
let { value, type } = e.target.dataset;
hms.value[type as keyof typeof hms.value] = value;

View File

@ -42,7 +42,7 @@ export interface LayFormItemProps {
const props = withDefaults(defineProps<LayFormItemProps>(), {
mode: "block",
labelPosition: "right",
labelWidth: 95
labelWidth: 95,
});
const layForm = inject("LayForm", {} as LayFormContext);
@ -166,24 +166,34 @@ onMounted(() => {
});
const getMarginLeft = computed(() => {
if (props.mode === 'block') {
let labelWidth = typeof props.labelWidth === "string" ? parseFloat(props.labelWidth) : props.labelWidth;
labelWidth+=15;
return{
marginLeft:labelWidth+'px'
}
if (props.mode === "block") {
let labelWidth =
typeof props.labelWidth === "string"
? parseFloat(props.labelWidth)
: props.labelWidth;
labelWidth += 15;
return {
marginLeft: labelWidth + "px",
};
}
})
});
</script>
<template>
<div class="layui-form-item" :class="[`layui-form-item-${labelPosition}`]" ref="formItemRef">
<div
class="layui-form-item"
:class="[`layui-form-item-${labelPosition}`]"
ref="formItemRef"
>
<label class="layui-form-label" :style="{ width: labelWidth + 'px' }">
<span v-if="props.prop && isRequired" :class="
['layui-required', 'layui-icon'].concat(layForm.requiredIcons ?? '')
">
<span
v-if="props.prop && isRequired"
:class="
['layui-required', 'layui-icon'].concat(layForm.requiredIcons ?? '')
"
>
<slot name="required" :props="{ ...props, model: layForm.model }">{{
layForm.requiredIcons ? "" : "*"
layForm.requiredIcons ? "" : "*"
}}</slot>
</span>
<slot name="label" :props="{ ...props, model: layForm.model }">
@ -194,10 +204,14 @@ const getMarginLeft = computed(() => {
<div ref="slotParent">
<slot :props="{ ...props, model: layForm.model }"></slot>
</div>
<span v-if="errorStatus" :class="[
'layui-error-message',
{ 'layui-error-message-anim': errorStatus },
]">{{ errorMsg }}</span>
<span
v-if="errorStatus"
:class="[
'layui-error-message',
{ 'layui-error-message-anim': errorStatus },
]"
>{{ errorMsg }}</span
>
</div>
</div>
</template>

View File

@ -63,19 +63,19 @@ const tempValue = ref(0);
let timer: any = 0;
const minControl = computed(() => {
if(props.disabled){
if (props.disabled) {
return true;
}
if(props.min !== -Infinity){
if (props.min !== -Infinity) {
return Number(props.min) >= num.value;
}
});
const maxControl = computed(() => {
if(props.disabled){
if (props.disabled) {
return true;
}
if(props.max !== Infinity ){
if (props.max !== Infinity) {
return Number(props.max) <= num.value;
}
});
@ -137,7 +137,7 @@ const isNumber = function (num: any) {
type="number"
:name="name"
@change="inputChange"
:disabled="disabledInput||disabled"
:disabled="disabledInput || disabled"
/>
</div>
<lay-button

View File

@ -63,8 +63,8 @@ const totalPage = computed(() => {
maxPage.value <= props.pages
? 1
: currentPage.value > pages
? currentPage.value - pages
: 1;
? currentPage.value - pages
: 1;
for (let i = start; ; i++) {
if (r.length >= props.pages || i > maxPage.value) {
break;
@ -77,7 +77,7 @@ const totalPage = computed(() => {
const currentPage: Ref<number> = ref(props.modelValue);
const currentPageShow: Ref<number> = ref(currentPage.value);
const emit = defineEmits(["jump", "limit", 'update:modelValue']);
const emit = defineEmits(["jump", "limit", "update:modelValue"]);
const prev = function () {
if (currentPage.value === 1) {
@ -114,39 +114,62 @@ watch(currentPage, function () {
}
currentPageShow.value = currentPage.value;
emit("jump", { current: currentPage.value });
emit('update:modelValue', currentPage.value)
emit("update:modelValue", currentPage.value);
});
watch(() => props.modelValue, function () {
currentPage.value = props.modelValue
currentPageShow.value = currentPage.value
})
watch(
() => props.modelValue,
function () {
currentPage.value = props.modelValue;
currentPageShow.value = currentPage.value;
}
);
</script>
<template>
<div class="layui-laypage layui-laypage-default">
<span v-if="showCount" class="layui-laypage-count"> {{ total }} {{ maxPage }} </span>
<a href="javascript:;" class="layui-laypage-prev" :class="[
currentPage === 1 ? 'layui-disabled' : '',
theme && currentPage !== 1 ? 'layui-laypage-a-' + theme : '',
]" @click="prev()">
<span v-if="showCount" class="layui-laypage-count"
> {{ total }} {{ maxPage }} </span
>
<a
href="javascript:;"
class="layui-laypage-prev"
:class="[
currentPage === 1 ? 'layui-disabled' : '',
theme && currentPage !== 1 ? 'layui-laypage-a-' + theme : '',
]"
@click="prev()"
>
<slot v-if="slots.prev" name="prev"></slot>
<template v-else>{{ t("page.prev") }}</template>
</a>
<template v-if="showPage">
<template v-for="index of totalPage" :key="index">
<span v-if="index === currentPage" class="layui-laypage-curr">
<em class="layui-laypage-em" :class="[theme ? 'layui-bg-' + theme : '']"></em>
<em
class="layui-laypage-em"
:class="[theme ? 'layui-bg-' + theme : '']"
></em>
<em>{{ index }}</em>
</span>
<a v-else href="javascript:;" @click="jump(index)" :class="[theme ? 'layui-laypage-a-' + theme : '']">{{ index
}}</a>
<a
v-else
href="javascript:;"
@click="jump(index)"
:class="[theme ? 'layui-laypage-a-' + theme : '']"
>{{ index }}</a
>
</template>
</template>
<a href="javascript:;" class="layui-laypage-next" :class="[
currentPage === maxPage ? 'layui-disabled' : '',
theme && currentPage !== maxPage ? 'layui-laypage-a-' + theme : '',
]" @click="next()">
<a
href="javascript:;"
class="layui-laypage-next"
:class="[
currentPage === maxPage ? 'layui-disabled' : '',
theme && currentPage !== maxPage ? 'layui-laypage-a-' + theme : '',
]"
@click="next()"
>
<slot v-if="slots.next" name="next"></slot>
<template v-else>{{ t("page.next") }}</template>
</a>
@ -162,9 +185,18 @@ watch(() => props.modelValue, function () {
</a>
<span v-if="props.showSkip" class="layui-laypage-skip">
到第
<input v-model="currentPageShow" @keypress.enter="jumpPage()" type="number"
class="layui-input layui-input-number" />
<button type="button" class="layui-laypage-btn" @click="jumpPage()" :disabled="currentPageShow > maxPage">
<input
v-model="currentPageShow"
@keypress.enter="jumpPage()"
type="number"
class="layui-input layui-input-number"
/>
<button
type="button"
class="layui-laypage-btn"
@click="jumpPage()"
:disabled="currentPageShow > maxPage"
>
确定
</button>
</span>

View File

@ -7,7 +7,7 @@ export default {
<script setup lang="ts">
import "./index.less";
import { disable } from '@umijs/ssr-darkreader';
import { disable } from "@umijs/ssr-darkreader";
export interface LayRadioProps {
modelValue?: string | boolean;
@ -64,21 +64,27 @@ const ifDisabled = computed(() => {
if (props.disabled) {
return true;
}
if (radioGroup.hasOwnProperty('disabled')&&radioGroup.disabled.value) {
if (radioGroup.hasOwnProperty("disabled") && radioGroup.disabled.value) {
return true;
}
return false;
})
});
</script>
<template>
<span class="layui-radio">
<input type="radio" :value="value" :name="naiveName" />
<div class="layui-unselect layui-form-radio" :class="{
'layui-form-radioed': isChecked,
'layui-radio-disabled layui-disabled': ifDisabled,
}" @click.stop="handleClick">
<i v-if="isChecked" class="layui-anim layui-icon layui-anim-scaleSpring">&#xe643;</i>
<div
class="layui-unselect layui-form-radio"
:class="{
'layui-form-radioed': isChecked,
'layui-radio-disabled layui-disabled': ifDisabled,
}"
@click.stop="handleClick"
>
<i v-if="isChecked" class="layui-anim layui-icon layui-anim-scaleSpring"
>&#xe643;</i
>
<i v-else class="layui-icon layui-form-radioed">&#xe63f;</i>
<span>
<slot>{{ label }}</slot>

View File

@ -10,22 +10,22 @@ import { provide, ref, watch } from "vue";
export interface LayRadioGroupProps {
modelValue?: string | boolean;
name?: string;
disabled?:boolean;
disabled?: boolean;
}
const props = withDefaults(defineProps<LayRadioGroupProps>(), {
disabled:false
disabled: false,
});
const emit = defineEmits(["update:modelValue", "change"]);
const modelValue = ref(props.modelValue);
const disabled=ref(props.disabled)
const disabled = ref(props.disabled);
provide("radioGroup", {
name: "LayRadioGroup",
modelValue: modelValue,
naiveName: props.name,
disabled:disabled
disabled: disabled,
});
watch(