(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, 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

View File

@ -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>

View File

@ -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;

View File

@ -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>

View File

@ -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

View File

@ -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>

View File

@ -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">&#xe643;</i> '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> <i v-else class="layui-icon layui-form-radioed">&#xe63f;</i>
<span> <span>
<slot>{{ label }}</slot> <slot>{{ label }}</slot>

View File

@ -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(