✨(component): update
This commit is contained in:
parent
2911c00d10
commit
07b11011b1
@ -23,7 +23,7 @@ const props = withDefaults(defineProps<LayCheckboxProps>(), {
|
|||||||
isIndeterminate: false,
|
isIndeterminate: false,
|
||||||
modelValue: false,
|
modelValue: false,
|
||||||
disabled: false,
|
disabled: false,
|
||||||
label:''
|
label: "",
|
||||||
});
|
});
|
||||||
|
|
||||||
const checkboxGroup: any = inject("checkboxGroup", {});
|
const checkboxGroup: any = inject("checkboxGroup", {});
|
||||||
@ -100,11 +100,14 @@ const ifDisabled = computed(() => {
|
|||||||
if (props.disabled) {
|
if (props.disabled) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
if (checkboxGroup.hasOwnProperty('disabled')&&checkboxGroup.disabled.value) {
|
if (
|
||||||
|
checkboxGroup.hasOwnProperty("disabled") &&
|
||||||
|
checkboxGroup.disabled.value
|
||||||
|
) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
})
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -118,7 +121,9 @@ const ifDisabled = computed(() => {
|
|||||||
}"
|
}"
|
||||||
:lay-skin="skin"
|
:lay-skin="skin"
|
||||||
>
|
>
|
||||||
<span><slot>{{label}}</slot></span>
|
<span
|
||||||
|
><slot>{{ label }}</slot></span
|
||||||
|
>
|
||||||
<lay-icon
|
<lay-icon
|
||||||
:type="
|
:type="
|
||||||
props.isIndeterminate && isChecked
|
props.isIndeterminate && isChecked
|
||||||
|
@ -10,19 +10,23 @@ import { Recordable } from "../../types";
|
|||||||
|
|
||||||
export interface LayCheckboxGroupProps {
|
export interface LayCheckboxGroupProps {
|
||||||
modelValue?: Recordable[];
|
modelValue?: Recordable[];
|
||||||
disabled?:boolean
|
disabled?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<LayCheckboxGroupProps>(), {
|
const props = withDefaults(defineProps<LayCheckboxGroupProps>(), {
|
||||||
modelValue: () => [],
|
modelValue: () => [],
|
||||||
disabled:false
|
disabled: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(["update:modelValue", "change"]);
|
const emit = defineEmits(["update:modelValue", "change"]);
|
||||||
|
|
||||||
const modelValue = ref(props.modelValue);
|
const modelValue = ref(props.modelValue);
|
||||||
const disabled=ref(props.disabled)
|
const disabled = ref(props.disabled);
|
||||||
provide("checkboxGroup", { name: "LayCheckboxGroup", modelValue: modelValue,disabled:disabled });
|
provide("checkboxGroup", {
|
||||||
|
name: "LayCheckboxGroup",
|
||||||
|
modelValue: modelValue,
|
||||||
|
disabled: disabled,
|
||||||
|
});
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => modelValue,
|
() => modelValue,
|
||||||
@ -42,11 +46,13 @@ watch(
|
|||||||
() => props.disabled,
|
() => props.disabled,
|
||||||
(val) => (disabled.value = val)
|
(val) => (disabled.value = val)
|
||||||
);
|
);
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<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>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -1,22 +1,48 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<lay-dropdown ref="dropdownRef" :disabled="props.disabled">
|
<lay-dropdown ref="dropdownRef" :disabled="props.disabled">
|
||||||
<lay-input readonly :name="name" :model-value="dateValue || modelValue" :placeholder="placeholder"
|
<lay-input
|
||||||
prefix-icon="layui-icon-date">
|
readonly
|
||||||
|
:name="name"
|
||||||
|
:model-value="dateValue || modelValue"
|
||||||
|
:placeholder="placeholder"
|
||||||
|
prefix-icon="layui-icon-date"
|
||||||
|
>
|
||||||
</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 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>
|
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">
|
<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 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>
|
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>
|
||||||
<div class="layui-laydate-content">
|
<div class="layui-laydate-content">
|
||||||
<table>
|
<table>
|
||||||
@ -26,17 +52,26 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<template v-for="(o, i) of dateList.length % 7 == 0
|
<template
|
||||||
? dateList.length / 7
|
v-for="(o, i) of dateList.length % 7 == 0
|
||||||
: Math.floor(dateList.length / 7) + 1" :key="i">
|
? dateList.length / 7
|
||||||
|
: Math.floor(dateList.length / 7) + 1"
|
||||||
|
:key="i"
|
||||||
|
>
|
||||||
<tr>
|
<tr>
|
||||||
<td v-for="(item, index) of dateList.slice(
|
<td
|
||||||
i * 7,
|
v-for="(item, index) of dateList.slice(
|
||||||
i * 7 + 7
|
i * 7,
|
||||||
)" :key="index" :data-unix="item.value" :class="{
|
i * 7 + 7
|
||||||
'laydate-day-prev': item.type !== 'current',
|
)"
|
||||||
'layui-this': item.value === currentDay,
|
:key="index"
|
||||||
}" @click="handleDayClick(item)">
|
:data-unix="item.value"
|
||||||
|
:class="{
|
||||||
|
'laydate-day-prev': item.type !== 'current',
|
||||||
|
'layui-this': item.value === currentDay,
|
||||||
|
}"
|
||||||
|
@click="handleDayClick(item)"
|
||||||
|
>
|
||||||
{{ item.day }}
|
{{ item.day }}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -46,37 +81,69 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-laydate-footer">
|
<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">
|
<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>
|
||||||
<!-- 年份选择器 -->
|
<!-- 年份选择器 -->
|
||||||
<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-main laydate-main-list-0 laydate-ym-show">
|
||||||
<div class="layui-laydate-header">
|
<div class="layui-laydate-header">
|
||||||
<div class="laydate-set-ym">
|
<div class="laydate-set-ym">
|
||||||
<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 v-for="item of yearList" :key="item" :class="[{ 'layui-this': currentYear === item }]"
|
<li
|
||||||
@click="handleYearClick(item)">
|
v-for="item of yearList"
|
||||||
|
:key="item"
|
||||||
|
:class="[{ 'layui-this': currentYear === item }]"
|
||||||
|
@click="handleYearClick(item)"
|
||||||
|
>
|
||||||
{{ item }}
|
{{ item }}
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-laydate-footer">
|
<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">
|
<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>
|
||||||
@ -84,30 +151,59 @@
|
|||||||
<div class="layui-laydate" v-show="showPane === 'month'">
|
<div class="layui-laydate" v-show="showPane === 'month'">
|
||||||
<div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
|
<div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
|
||||||
<div class="layui-laydate-header">
|
<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">
|
<div class="laydate-set-ym">
|
||||||
<span @click="showYearPanel" v-if="showPane === 'date' || showPane === 'datetime'">{{ currentYear }}
|
<span
|
||||||
年</span>
|
@click="showYearPanel"
|
||||||
<span @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
|
v-if="showPane === 'date' || showPane === 'datetime'"
|
||||||
|
>{{ currentYear }} 年</span
|
||||||
|
>
|
||||||
|
<span @click="showPane = 'month'"
|
||||||
|
>{{ currentMonth + 1 }} 月</span
|
||||||
|
>
|
||||||
</div>
|
</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>
|
||||||
<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">
|
||||||
<li v-for="item of MONTH_NAME" :key="item" :class="[
|
<li
|
||||||
{ 'layui-this': MONTH_NAME.indexOf(item) === currentMonth },
|
v-for="item of MONTH_NAME"
|
||||||
]" @click="handleMonthClick(item)">
|
:key="item"
|
||||||
|
:class="[
|
||||||
|
{ 'layui-this': MONTH_NAME.indexOf(item) === currentMonth },
|
||||||
|
]"
|
||||||
|
@click="handleMonthClick(item)"
|
||||||
|
>
|
||||||
{{ item.slice(0, 3) }}
|
{{ item.slice(0, 3) }}
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-laydate-footer">
|
<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">
|
<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>
|
||||||
@ -123,13 +219,19 @@
|
|||||||
<ul class="layui-laydate-list laydate-time-list">
|
<ul class="layui-laydate-list laydate-time-list">
|
||||||
<li class="num-list" v-for="item in els" :key="item.type">
|
<li class="num-list" v-for="item in els" :key="item.type">
|
||||||
<ol class="scroll" @click="choseTime">
|
<ol class="scroll" @click="choseTime">
|
||||||
<li v-for="(it, index) in item.count" :id="item.type + index.toString()"
|
<li
|
||||||
:data-value="index.toString().padStart(2, '0')" :data-type="item.type" :key="it" :class="[
|
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',
|
'num',
|
||||||
index.toString().padStart(2, '0') == hms[item.type]
|
index.toString().padStart(2, '0') == hms[item.type]
|
||||||
? 'layui-this'
|
? 'layui-this'
|
||||||
: '',
|
: '',
|
||||||
]">
|
]"
|
||||||
|
>
|
||||||
{{ index.toString().padStart(2, "0") }}
|
{{ index.toString().padStart(2, "0") }}
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
@ -138,11 +240,22 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-laydate-footer">
|
<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">
|
<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>
|
||||||
@ -232,7 +345,9 @@ watch(
|
|||||||
);
|
);
|
||||||
|
|
||||||
onMounted(() => {
|
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) {
|
if (currentDay.value == -1) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
now();
|
now();
|
||||||
@ -338,12 +453,15 @@ watch(
|
|||||||
},
|
},
|
||||||
{ immediate: true }
|
{ immediate: true }
|
||||||
);
|
);
|
||||||
const unWatch = ref(true)
|
const unWatch = ref(true);
|
||||||
watch(() => props.modelValue, () => {
|
watch(
|
||||||
if (!unWatch.value) {
|
() => props.modelValue,
|
||||||
currentDay.value = new Date(props.modelValue).getTime();
|
() => {
|
||||||
|
if (!unWatch.value) {
|
||||||
|
currentDay.value = new Date(props.modelValue).getTime();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
);
|
||||||
// 确认事件
|
// 确认事件
|
||||||
const ok = () => {
|
const ok = () => {
|
||||||
if (dropdownRef.value)
|
if (dropdownRef.value)
|
||||||
@ -353,7 +471,7 @@ const ok = () => {
|
|||||||
|
|
||||||
// 现在时间
|
// 现在时间
|
||||||
const now = () => {
|
const now = () => {
|
||||||
unWatch.value = true
|
unWatch.value = true;
|
||||||
currentDay.value = dayjs().valueOf();
|
currentDay.value = dayjs().valueOf();
|
||||||
hms.value.hh = dayjs().hour();
|
hms.value.hh = dayjs().hour();
|
||||||
hms.value.mm = dayjs().minute();
|
hms.value.mm = dayjs().minute();
|
||||||
@ -362,7 +480,7 @@ const now = () => {
|
|||||||
|
|
||||||
// 清空日期
|
// 清空日期
|
||||||
const clear = () => {
|
const clear = () => {
|
||||||
unWatch.value = true
|
unWatch.value = true;
|
||||||
currentDay.value = -1;
|
currentDay.value = -1;
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -390,7 +508,7 @@ const showYearPanel = () => {
|
|||||||
|
|
||||||
// 点击年份
|
// 点击年份
|
||||||
const handleYearClick = (item: any) => {
|
const handleYearClick = (item: any) => {
|
||||||
unWatch.value = true
|
unWatch.value = true;
|
||||||
currentYear.value = item;
|
currentYear.value = item;
|
||||||
if (props.type === "year") {
|
if (props.type === "year") {
|
||||||
currentDay.value = dayjs().year(item).valueOf();
|
currentDay.value = dayjs().year(item).valueOf();
|
||||||
@ -404,7 +522,7 @@ const handleYearClick = (item: any) => {
|
|||||||
|
|
||||||
// 点击月份
|
// 点击月份
|
||||||
const handleMonthClick = (item: any) => {
|
const handleMonthClick = (item: any) => {
|
||||||
unWatch.value = true
|
unWatch.value = true;
|
||||||
currentMonth.value = MONTH_NAME.indexOf(item);
|
currentMonth.value = MONTH_NAME.indexOf(item);
|
||||||
if (props.type === "month") {
|
if (props.type === "month") {
|
||||||
currentDay.value = dayjs(currentDay.value)
|
currentDay.value = dayjs(currentDay.value)
|
||||||
@ -421,7 +539,7 @@ const handleMonthClick = (item: any) => {
|
|||||||
|
|
||||||
// 点击日期
|
// 点击日期
|
||||||
const handleDayClick = (item: any) => {
|
const handleDayClick = (item: any) => {
|
||||||
unWatch.value = true
|
unWatch.value = true;
|
||||||
currentDay.value = item.value;
|
currentDay.value = item.value;
|
||||||
if (item.type !== "current") {
|
if (item.type !== "current") {
|
||||||
currentMonth.value =
|
currentMonth.value =
|
||||||
@ -431,7 +549,7 @@ const handleDayClick = (item: any) => {
|
|||||||
|
|
||||||
// 点击时间 - hms
|
// 点击时间 - hms
|
||||||
const choseTime = (e: any) => {
|
const choseTime = (e: any) => {
|
||||||
unWatch.value = true
|
unWatch.value = true;
|
||||||
if (e.target.nodeName == "LI") {
|
if (e.target.nodeName == "LI") {
|
||||||
let { value, type } = e.target.dataset;
|
let { value, type } = e.target.dataset;
|
||||||
hms.value[type as keyof typeof hms.value] = value;
|
hms.value[type as keyof typeof hms.value] = value;
|
||||||
|
@ -42,7 +42,7 @@ export interface LayFormItemProps {
|
|||||||
const props = withDefaults(defineProps<LayFormItemProps>(), {
|
const props = withDefaults(defineProps<LayFormItemProps>(), {
|
||||||
mode: "block",
|
mode: "block",
|
||||||
labelPosition: "right",
|
labelPosition: "right",
|
||||||
labelWidth: 95
|
labelWidth: 95,
|
||||||
});
|
});
|
||||||
|
|
||||||
const layForm = inject("LayForm", {} as LayFormContext);
|
const layForm = inject("LayForm", {} as LayFormContext);
|
||||||
@ -166,24 +166,34 @@ onMounted(() => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const getMarginLeft = computed(() => {
|
const getMarginLeft = computed(() => {
|
||||||
if (props.mode === 'block') {
|
if (props.mode === "block") {
|
||||||
let labelWidth = typeof props.labelWidth === "string" ? parseFloat(props.labelWidth) : props.labelWidth;
|
let labelWidth =
|
||||||
labelWidth+=15;
|
typeof props.labelWidth === "string"
|
||||||
return{
|
? parseFloat(props.labelWidth)
|
||||||
marginLeft:labelWidth+'px'
|
: props.labelWidth;
|
||||||
}
|
labelWidth += 15;
|
||||||
|
return {
|
||||||
|
marginLeft: labelWidth + "px",
|
||||||
|
};
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<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' }">
|
<label class="layui-form-label" :style="{ width: labelWidth + 'px' }">
|
||||||
<span v-if="props.prop && isRequired" :class="
|
<span
|
||||||
['layui-required', 'layui-icon'].concat(layForm.requiredIcons ?? '')
|
v-if="props.prop && isRequired"
|
||||||
">
|
:class="
|
||||||
|
['layui-required', 'layui-icon'].concat(layForm.requiredIcons ?? '')
|
||||||
|
"
|
||||||
|
>
|
||||||
<slot name="required" :props="{ ...props, model: layForm.model }">{{
|
<slot name="required" :props="{ ...props, model: layForm.model }">{{
|
||||||
layForm.requiredIcons ? "" : "*"
|
layForm.requiredIcons ? "" : "*"
|
||||||
}}</slot>
|
}}</slot>
|
||||||
</span>
|
</span>
|
||||||
<slot name="label" :props="{ ...props, model: layForm.model }">
|
<slot name="label" :props="{ ...props, model: layForm.model }">
|
||||||
@ -194,10 +204,14 @@ const getMarginLeft = computed(() => {
|
|||||||
<div ref="slotParent">
|
<div ref="slotParent">
|
||||||
<slot :props="{ ...props, model: layForm.model }"></slot>
|
<slot :props="{ ...props, model: layForm.model }"></slot>
|
||||||
</div>
|
</div>
|
||||||
<span v-if="errorStatus" :class="[
|
<span
|
||||||
'layui-error-message',
|
v-if="errorStatus"
|
||||||
{ 'layui-error-message-anim': errorStatus },
|
:class="[
|
||||||
]">{{ errorMsg }}</span>
|
'layui-error-message',
|
||||||
|
{ 'layui-error-message-anim': errorStatus },
|
||||||
|
]"
|
||||||
|
>{{ errorMsg }}</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -63,19 +63,19 @@ const tempValue = ref(0);
|
|||||||
let timer: any = 0;
|
let timer: any = 0;
|
||||||
|
|
||||||
const minControl = computed(() => {
|
const minControl = computed(() => {
|
||||||
if(props.disabled){
|
if (props.disabled) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
if(props.min !== -Infinity){
|
if (props.min !== -Infinity) {
|
||||||
return Number(props.min) >= num.value;
|
return Number(props.min) >= num.value;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const maxControl = computed(() => {
|
const maxControl = computed(() => {
|
||||||
if(props.disabled){
|
if (props.disabled) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
if(props.max !== Infinity ){
|
if (props.max !== Infinity) {
|
||||||
return Number(props.max) <= num.value;
|
return Number(props.max) <= num.value;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -137,7 +137,7 @@ const isNumber = function (num: any) {
|
|||||||
type="number"
|
type="number"
|
||||||
:name="name"
|
:name="name"
|
||||||
@change="inputChange"
|
@change="inputChange"
|
||||||
:disabled="disabledInput||disabled"
|
:disabled="disabledInput || disabled"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<lay-button
|
<lay-button
|
||||||
|
@ -63,8 +63,8 @@ const totalPage = computed(() => {
|
|||||||
maxPage.value <= props.pages
|
maxPage.value <= props.pages
|
||||||
? 1
|
? 1
|
||||||
: currentPage.value > pages
|
: currentPage.value > pages
|
||||||
? currentPage.value - pages
|
? currentPage.value - pages
|
||||||
: 1;
|
: 1;
|
||||||
for (let i = start; ; i++) {
|
for (let i = start; ; i++) {
|
||||||
if (r.length >= props.pages || i > maxPage.value) {
|
if (r.length >= props.pages || i > maxPage.value) {
|
||||||
break;
|
break;
|
||||||
@ -77,7 +77,7 @@ const totalPage = computed(() => {
|
|||||||
const currentPage: Ref<number> = ref(props.modelValue);
|
const currentPage: Ref<number> = ref(props.modelValue);
|
||||||
const currentPageShow: Ref<number> = ref(currentPage.value);
|
const currentPageShow: Ref<number> = ref(currentPage.value);
|
||||||
|
|
||||||
const emit = defineEmits(["jump", "limit", 'update:modelValue']);
|
const emit = defineEmits(["jump", "limit", "update:modelValue"]);
|
||||||
|
|
||||||
const prev = function () {
|
const prev = function () {
|
||||||
if (currentPage.value === 1) {
|
if (currentPage.value === 1) {
|
||||||
@ -114,39 +114,62 @@ watch(currentPage, function () {
|
|||||||
}
|
}
|
||||||
currentPageShow.value = currentPage.value;
|
currentPageShow.value = currentPage.value;
|
||||||
emit("jump", { current: currentPage.value });
|
emit("jump", { current: currentPage.value });
|
||||||
emit('update:modelValue', currentPage.value)
|
emit("update:modelValue", currentPage.value);
|
||||||
});
|
});
|
||||||
watch(() => props.modelValue, function () {
|
watch(
|
||||||
currentPage.value = props.modelValue
|
() => props.modelValue,
|
||||||
currentPageShow.value = currentPage.value
|
function () {
|
||||||
})
|
currentPage.value = props.modelValue;
|
||||||
|
currentPageShow.value = currentPage.value;
|
||||||
|
}
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="layui-laypage layui-laypage-default">
|
<div class="layui-laypage layui-laypage-default">
|
||||||
<span v-if="showCount" class="layui-laypage-count">共 {{ total }} 条 {{ maxPage }} 页</span>
|
<span v-if="showCount" class="layui-laypage-count"
|
||||||
<a href="javascript:;" class="layui-laypage-prev" :class="[
|
>共 {{ total }} 条 {{ maxPage }} 页</span
|
||||||
currentPage === 1 ? 'layui-disabled' : '',
|
>
|
||||||
theme && currentPage !== 1 ? 'layui-laypage-a-' + theme : '',
|
<a
|
||||||
]" @click="prev()">
|
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>
|
<slot v-if="slots.prev" name="prev"></slot>
|
||||||
<template v-else>{{ t("page.prev") }}</template>
|
<template v-else>{{ t("page.prev") }}</template>
|
||||||
</a>
|
</a>
|
||||||
<template v-if="showPage">
|
<template v-if="showPage">
|
||||||
<template v-for="index of totalPage" :key="index">
|
<template v-for="index of totalPage" :key="index">
|
||||||
<span v-if="index === currentPage" class="layui-laypage-curr">
|
<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>
|
<em>{{ index }}</em>
|
||||||
</span>
|
</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>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<a href="javascript:;" class="layui-laypage-next" :class="[
|
<a
|
||||||
currentPage === maxPage ? 'layui-disabled' : '',
|
href="javascript:;"
|
||||||
theme && currentPage !== maxPage ? 'layui-laypage-a-' + theme : '',
|
class="layui-laypage-next"
|
||||||
]" @click="next()">
|
:class="[
|
||||||
|
currentPage === maxPage ? 'layui-disabled' : '',
|
||||||
|
theme && currentPage !== maxPage ? 'layui-laypage-a-' + theme : '',
|
||||||
|
]"
|
||||||
|
@click="next()"
|
||||||
|
>
|
||||||
<slot v-if="slots.next" name="next"></slot>
|
<slot v-if="slots.next" name="next"></slot>
|
||||||
<template v-else>{{ t("page.next") }}</template>
|
<template v-else>{{ t("page.next") }}</template>
|
||||||
</a>
|
</a>
|
||||||
@ -162,9 +185,18 @@ watch(() => props.modelValue, function () {
|
|||||||
</a>
|
</a>
|
||||||
<span v-if="props.showSkip" class="layui-laypage-skip">
|
<span v-if="props.showSkip" class="layui-laypage-skip">
|
||||||
到第
|
到第
|
||||||
<input v-model="currentPageShow" @keypress.enter="jumpPage()" type="number"
|
<input
|
||||||
class="layui-input layui-input-number" />页
|
v-model="currentPageShow"
|
||||||
<button type="button" class="layui-laypage-btn" @click="jumpPage()" :disabled="currentPageShow > maxPage">
|
@keypress.enter="jumpPage()"
|
||||||
|
type="number"
|
||||||
|
class="layui-input layui-input-number"
|
||||||
|
/>页
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="layui-laypage-btn"
|
||||||
|
@click="jumpPage()"
|
||||||
|
:disabled="currentPageShow > maxPage"
|
||||||
|
>
|
||||||
确定
|
确定
|
||||||
</button>
|
</button>
|
||||||
</span>
|
</span>
|
||||||
|
@ -7,7 +7,7 @@ export default {
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import "./index.less";
|
import "./index.less";
|
||||||
import { disable } from '@umijs/ssr-darkreader';
|
import { disable } from "@umijs/ssr-darkreader";
|
||||||
|
|
||||||
export interface LayRadioProps {
|
export interface LayRadioProps {
|
||||||
modelValue?: string | boolean;
|
modelValue?: string | boolean;
|
||||||
@ -64,21 +64,27 @@ const ifDisabled = computed(() => {
|
|||||||
if (props.disabled) {
|
if (props.disabled) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
if (radioGroup.hasOwnProperty('disabled')&&radioGroup.disabled.value) {
|
if (radioGroup.hasOwnProperty("disabled") && radioGroup.disabled.value) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
})
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<span class="layui-radio">
|
<span class="layui-radio">
|
||||||
<input type="radio" :value="value" :name="naiveName" />
|
<input type="radio" :value="value" :name="naiveName" />
|
||||||
<div class="layui-unselect layui-form-radio" :class="{
|
<div
|
||||||
'layui-form-radioed': isChecked,
|
class="layui-unselect layui-form-radio"
|
||||||
'layui-radio-disabled layui-disabled': ifDisabled,
|
:class="{
|
||||||
}" @click.stop="handleClick">
|
'layui-form-radioed': isChecked,
|
||||||
<i v-if="isChecked" class="layui-anim layui-icon layui-anim-scaleSpring"></i>
|
'layui-radio-disabled layui-disabled': ifDisabled,
|
||||||
|
}"
|
||||||
|
@click.stop="handleClick"
|
||||||
|
>
|
||||||
|
<i v-if="isChecked" class="layui-anim layui-icon layui-anim-scaleSpring"
|
||||||
|
></i
|
||||||
|
>
|
||||||
<i v-else class="layui-icon layui-form-radioed"></i>
|
<i v-else class="layui-icon layui-form-radioed"></i>
|
||||||
<span>
|
<span>
|
||||||
<slot>{{ label }}</slot>
|
<slot>{{ label }}</slot>
|
||||||
|
@ -10,22 +10,22 @@ import { provide, ref, watch } from "vue";
|
|||||||
export interface LayRadioGroupProps {
|
export interface LayRadioGroupProps {
|
||||||
modelValue?: string | boolean;
|
modelValue?: string | boolean;
|
||||||
name?: string;
|
name?: string;
|
||||||
disabled?:boolean;
|
disabled?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<LayRadioGroupProps>(), {
|
const props = withDefaults(defineProps<LayRadioGroupProps>(), {
|
||||||
disabled:false
|
disabled: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(["update:modelValue", "change"]);
|
const emit = defineEmits(["update:modelValue", "change"]);
|
||||||
|
|
||||||
const modelValue = ref(props.modelValue);
|
const modelValue = ref(props.modelValue);
|
||||||
const disabled=ref(props.disabled)
|
const disabled = ref(props.disabled);
|
||||||
provide("radioGroup", {
|
provide("radioGroup", {
|
||||||
name: "LayRadioGroup",
|
name: "LayRadioGroup",
|
||||||
modelValue: modelValue,
|
modelValue: modelValue,
|
||||||
naiveName: props.name,
|
naiveName: props.name,
|
||||||
disabled:disabled
|
disabled: disabled,
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
|
Loading…
Reference in New Issue
Block a user