Merge branch 'develop' of https://gitee.com/lockingreal/layui-vue into develop
This commit is contained in:
lockingreal
commit
77ca42867c
@ -261,6 +261,7 @@ export default {
|
||||
<lay-button size="sm">删除</lay-button>
|
||||
</template>
|
||||
<template v-slot:username="{ data }"> {{data.username}} </template>
|
||||
<template v-slot:username-title>😊</template>
|
||||
<template v-slot:password="{ data }"> {{data.password}} </template>
|
||||
<template v-slot:operator="{ data }">
|
||||
<lay-button >修改</lay-button>
|
||||
@ -283,6 +284,7 @@ export default {
|
||||
{
|
||||
title:"账户",
|
||||
width:"200px",
|
||||
titleSlot: "username-title",
|
||||
customSlot:"username",
|
||||
key:"username"
|
||||
},{
|
||||
@ -385,7 +387,7 @@ export default {
|
||||
| customSlot | 自定义插槽 | -- |
|
||||
| width | 宽度 | -- |
|
||||
| sort | 排序 | -- |
|
||||
|
||||
| titleSlot | 标题插槽 | -- |
|
||||
:::
|
||||
|
||||
::: comment
|
||||
|
||||
@ -16,9 +16,16 @@
|
||||
<li>
|
||||
<h3>0.4.3 <span class="layui-badge-rim">2022-03-27</span></h3>
|
||||
<ul>
|
||||
<li>[新增] upload 文件上传组件。</li>
|
||||
<li>[新增] date-picker 组件 name 属性, 等同原生 name 属性。</li>
|
||||
<li>[新增] date-picker 组件 type 属性 date 值, 支持日期选择。 </li>
|
||||
<li>[新增] date-picker 组件 type 属性 datetime 值, 支持日期时间选择。</li>
|
||||
<li>[新增] date-picker 组件 now 操作, 将 年 月 日 重置为当前日期。</li>
|
||||
<li>[新增] table 组件 data 属性 titleSlot 选项, 自定义标题插槽。</li>
|
||||
<li>[修复] menu 组件 level 属性的语义与实际功能相悖。</li>
|
||||
<li>[修复] input 组件 height 高度固定 38 px。</li>
|
||||
<li>[修复] step 组件 line 样式。</li>
|
||||
<li>[依赖] monent 日期 js 框架。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -212,7 +212,7 @@
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:void(0)"> 0.4.2 </a>
|
||||
<a href="javascript:void(0)"> 0.4.3 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-header>
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
>
|
||||
</div>
|
||||
<div class="site-version">
|
||||
<span>{{ t('home.version') }}：v<cite class="site-showv">0.4.2</cite></span>
|
||||
<span>{{ t('home.version') }}：v<cite class="site-showv">0.4.3</cite></span>
|
||||
<span
|
||||
><router-link
|
||||
class="layui-inline site-down"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@layui/layui-vue",
|
||||
"version": "0.4.2",
|
||||
"version": "0.4.3",
|
||||
"author": "就眠儀式",
|
||||
"license": "MIT",
|
||||
"description": "a component library for Vue 3 base on layui-vue",
|
||||
@ -41,10 +41,11 @@
|
||||
"@vueuse/core": "^7.6.2",
|
||||
"async-validator": "^4.0.7",
|
||||
"evtd": "^0.2.3",
|
||||
"moment": "^2.29.1",
|
||||
"uuid": "^8.3.2",
|
||||
"vue": "^3.2.31",
|
||||
"vue-i18n": "^9.2.0-beta.33",
|
||||
"vue-router": "^4.0.12",
|
||||
"uuid": "^8.3.2",
|
||||
"xlsx": "^0.18.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,10 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<lay-dropdown>
|
||||
<lay-input :value="dateValue || modelValue" readonly />
|
||||
<lay-input :name="name" :value="dateValue || modelValue" readonly>
|
||||
<template #prefix>
|
||||
<lay-icon type="layui-icon-date"></lay-icon>
|
||||
</template>
|
||||
</lay-input>
|
||||
<template #content>
|
||||
<!-- 日期选择 -->
|
||||
<div class="layui-laydate" v-show="showPanel === 'date'">
|
||||
<div class="layui-laydate" v-show="showPane === 'date'">
|
||||
<div class="layui-laydate-main laydate-main-list-0">
|
||||
<div class="layui-laydate-header">
|
||||
<i
|
||||
@ -18,7 +22,7 @@
|
||||
>
|
||||
<div class="laydate-set-ym">
|
||||
<span @click="showYearPanel">{{ currentYear }} 年</span
|
||||
><span @click="showPanel = 'month'"
|
||||
><span @click="showPane = 'month'"
|
||||
>{{ currentMonth + 1 }} 月</span
|
||||
>
|
||||
</div>
|
||||
@ -56,7 +60,7 @@
|
||||
:data-unix="item.value"
|
||||
:class="{
|
||||
'laydate-day-prev': item.type !== 'current',
|
||||
'layui-this': item.value === selectedDay,
|
||||
'layui-this': item.value === currentDay,
|
||||
}"
|
||||
@click="handleDayClick(item)"
|
||||
>
|
||||
@ -71,23 +75,21 @@
|
||||
<div class="layui-laydate-footer">
|
||||
<span
|
||||
v-if="type === 'datetime'"
|
||||
@click="showPanel = 'time'"
|
||||
class="layui-laydate-preview"
|
||||
style="color: rgb(102, 102, 102)"
|
||||
@click="showPane = 'time'"
|
||||
class="laydate-btns-time"
|
||||
>选择时间</span
|
||||
>
|
||||
{{ `${hms.hh}:${hms.mm}:${hms.ss}` }}
|
||||
</span>
|
||||
|
||||
<div class="laydate-footer-btns">
|
||||
<span lay-type="clear" class="laydate-btns-clear">清空</span
|
||||
><span lay-type="now" class="laydate-btns-now">现在</span
|
||||
><span lay-type="now" class="laydate-btns-now" @click="now"
|
||||
>现在</span
|
||||
><span lay-type="confirm" class="laydate-btns-confirm">确定</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 年份选择器 -->
|
||||
<div class="layui-laydate" v-show="showPanel === 'year'">
|
||||
<div class="layui-laydate" v-show="showPane === 'year'">
|
||||
<div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
|
||||
<div class="layui-laydate-header">
|
||||
<div class="laydate-set-ym">
|
||||
@ -105,7 +107,7 @@
|
||||
:class="[{ 'layui-this': currentYear === item }]"
|
||||
@click="
|
||||
currentYear = item;
|
||||
showPanel = 'date';
|
||||
showPane = 'date';
|
||||
"
|
||||
>
|
||||
{{ item }}
|
||||
@ -122,14 +124,15 @@
|
||||
>
|
||||
<div class="laydate-footer-btns">
|
||||
<span lay-type="clear" class="laydate-btns-clear">清空</span
|
||||
><span lay-type="now" class="laydate-btns-now">现在</span
|
||||
><span lay-type="now" class="laydate-btns-now" @click="now"
|
||||
>现在</span
|
||||
><span lay-type="confirm" class="laydate-btns-confirm">确定</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 月份选择器 -->
|
||||
<div class="layui-laydate" v-show="showPanel === '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-header">
|
||||
<i
|
||||
@ -139,7 +142,7 @@
|
||||
>
|
||||
<div class="laydate-set-ym">
|
||||
<span @click="showYearPanel">{{ currentYear }} 年</span
|
||||
><span @click="showPanel = 'month'"
|
||||
><span @click="showPane = 'month'"
|
||||
>{{ currentMonth + 1 }} 月</span
|
||||
>
|
||||
</div>
|
||||
@ -159,7 +162,7 @@
|
||||
]"
|
||||
@click="
|
||||
currentMonth = MONTH_NAME.indexOf(item);
|
||||
showPanel = 'date';
|
||||
showPane = 'date';
|
||||
"
|
||||
>
|
||||
{{ item.slice(0, 3) }}
|
||||
@ -176,14 +179,15 @@
|
||||
>
|
||||
<div class="laydate-footer-btns">
|
||||
<span lay-type="clear" class="laydate-btns-clear">清空</span
|
||||
><span lay-type="now" class="laydate-btns-now">现在</span
|
||||
><span lay-type="now" class="laydate-btns-now" @click="now"
|
||||
>现在</span
|
||||
><span lay-type="confirm" class="laydate-btns-confirm">确定</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 时间选择器 -->
|
||||
<div class="layui-laydate" v-if="showPanel == 'time'">
|
||||
<div class="layui-laydate" v-if="showPane == 'time'">
|
||||
<div class="layui-laydate-main laydate-main-list-0 laydate-time-show">
|
||||
<div class="layui-laydate-header">
|
||||
<div class="laydate-set-ym">
|
||||
@ -215,12 +219,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-laydate-footer">
|
||||
<span @click="showPanel = 'date'" class="layui-laydate-preview"
|
||||
>返回</span
|
||||
<span @click="showPane = 'date'" class="laydate-btns-time"
|
||||
>返回日期</span
|
||||
>
|
||||
<div class="laydate-footer-btns">
|
||||
<span lay-type="clear" class="laydate-btns-clear">清空</span
|
||||
><span lay-type="now" class="laydate-btns-now">现在</span
|
||||
><span lay-type="now" class="laydate-btns-now" @click="now"
|
||||
>现在</span
|
||||
><span lay-type="confirm" class="laydate-btns-confirm">确定</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -231,15 +236,10 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
computed,
|
||||
nextTick,
|
||||
ref,
|
||||
watch,
|
||||
defineProps,
|
||||
defineEmits,
|
||||
onMounted,
|
||||
} from "vue";
|
||||
import { computed, nextTick, ref, watch, defineProps, defineEmits } from "vue";
|
||||
|
||||
import moment from "moment";
|
||||
import LayIcon from "../icon/index";
|
||||
import LayInput from "../input/index.vue";
|
||||
import LayDropdown from "../dropdown/index.vue";
|
||||
import { getDayLength, getYears, getDate, getMonth, getYear } from "./day";
|
||||
@ -262,7 +262,7 @@ const MONTH_NAME = [
|
||||
"12月",
|
||||
];
|
||||
|
||||
const hms = ref({ hh: "00", mm: "00", ss: "00" });
|
||||
const hms = ref({ hh: 0, mm: 0, ss: 0 });
|
||||
const els = [
|
||||
{ count: 24, type: "hh" },
|
||||
{ count: 60, type: "mm" },
|
||||
@ -272,6 +272,7 @@ const els = [
|
||||
export interface LayDatePickerProps {
|
||||
modelValue?: string;
|
||||
type: "date" | "datetime" | "year" | "time" | "month";
|
||||
name: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LayDatePickerProps>(), {
|
||||
@ -279,25 +280,39 @@ const props = withDefaults(defineProps<LayDatePickerProps>(), {
|
||||
type: "date",
|
||||
});
|
||||
|
||||
const currentDate = getDate();
|
||||
const currentYear = ref(getYear());
|
||||
const currentMonth = ref(getMonth());
|
||||
const currentDay = ref<number>();
|
||||
|
||||
const yearList = ref<number[]>(getYears());
|
||||
const dateList = ref<any[]>([]);
|
||||
const showPanel = ref("date");
|
||||
const selectedDay = ref<number>();
|
||||
const showPane = ref("date");
|
||||
|
||||
// 最终结果
|
||||
// 计算结果日期
|
||||
const dateValue = computed<string>(() => {
|
||||
if (!selectedDay.value) return "";
|
||||
const d = new Date(selectedDay.value);
|
||||
const y = d.getFullYear();
|
||||
const m = (d.getMonth() + 1).toString().padStart(2, "0");
|
||||
const day = d.getDate().toString().padStart(2, "0");
|
||||
const currentValue = `${y}-${m}-${day} ${hms.value.hh}:${hms.value.mm}:${hms.value.ss}`;
|
||||
$emits("update:modelValue", currentValue);
|
||||
return currentValue;
|
||||
let momentVal;
|
||||
let momentObj = moment(currentDay.value)
|
||||
.hour(hms.value.hh)
|
||||
.minute(hms.value.mm)
|
||||
.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);
|
||||
return momentVal;
|
||||
});
|
||||
|
||||
// 设置日期列表
|
||||
@ -353,7 +368,7 @@ watch(
|
||||
|
||||
// 点击日期
|
||||
const handleDayClick = (item: any) => {
|
||||
selectedDay.value = item.value;
|
||||
currentDay.value = item.value;
|
||||
if (item.type !== "current") {
|
||||
currentMonth.value =
|
||||
item.type === "prev" ? currentMonth.value - 1 : currentMonth.value + 1;
|
||||
@ -363,6 +378,14 @@ const handleDayClick = (item: any) => {
|
||||
// 确认事件
|
||||
const ok = () => {};
|
||||
|
||||
// 现在时间
|
||||
const now = () => {
|
||||
currentDay.value = moment().valueOf();
|
||||
};
|
||||
|
||||
// 清空日期
|
||||
const clear = () => {};
|
||||
|
||||
// 切换年月
|
||||
const changeYearOrMonth = (type: "year" | "month", num: number) => {
|
||||
if (type === "year") {
|
||||
@ -382,7 +405,7 @@ const changeYearOrMonth = (type: "year" | "month", num: number) => {
|
||||
|
||||
// 显示年列表面板
|
||||
const showYearPanel = () => {
|
||||
showPanel.value = "year";
|
||||
showPane.value = "year";
|
||||
nextTick(() => {
|
||||
(
|
||||
document.querySelector(".year-panel-item.active") as HTMLElement
|
||||
|
||||
@ -93,12 +93,16 @@ const change = function (page: any) {
|
||||
emit("change", page);
|
||||
};
|
||||
|
||||
const rowClick = function (data: any) {
|
||||
emit("row", data);
|
||||
const rowClick = function (data: any,evt:MouseEvent) {
|
||||
emit("row", data,evt);
|
||||
};
|
||||
|
||||
const rowDoubleClick = function (data: any) {
|
||||
emit("row-double", data);
|
||||
const rowDoubleClick = function (data: any,evt:MouseEvent) {
|
||||
emit("row-double", data,evt);
|
||||
};
|
||||
|
||||
const contextmenu = function (data: any,evt:MouseEvent) {
|
||||
emit("contextmenu", data,evt);
|
||||
};
|
||||
|
||||
// 打印 table 数据
|
||||
@ -246,12 +250,19 @@ onMounted(() => {
|
||||
</th>
|
||||
<template v-for="column in columns" :key="column">
|
||||
<th v-if="tableColumnKeys.includes(column.key)">
|
||||
<!-- TODO Table header slot -->
|
||||
<div
|
||||
class="layui-table-cell"
|
||||
:style="{ width: column.width }"
|
||||
>
|
||||
<span>{{ column.title }}</span>
|
||||
<span v-if="column.titleSlot">
|
||||
<template v-if="column.titleSlot">
|
||||
<slot :name="column.titleSlot"></slot>
|
||||
</template>
|
||||
<template>
|
||||
{{ column.title }}
|
||||
</template>
|
||||
</span>
|
||||
<span v-else>{{ column.title }}</span>
|
||||
<span
|
||||
v-if="column.sort"
|
||||
class="layui-table-sort layui-inline"
|
||||
@ -281,8 +292,9 @@ onMounted(() => {
|
||||
<tbody>
|
||||
<template v-for="data in tableDataSource" :key="data">
|
||||
<tr
|
||||
@click.stop="rowClick(data)"
|
||||
@dblclick.stop="rowDoubleClick(data)"
|
||||
@click.stop="rowClick(data,$event)"
|
||||
@dblclick.stop="rowDoubleClick(data,$event)"
|
||||
@contextmenu.stop="contextmenu(data,$event)"
|
||||
>
|
||||
<!-- 复选框 -->
|
||||
<td v-if="checkbox" class="layui-table-col-special">
|
||||
|
||||
@ -7,7 +7,7 @@ export default {
|
||||
import "./index.less";
|
||||
import { Recordable } from "../../types";
|
||||
import { layer } from "@layui/layer-vue";
|
||||
import { ref, useSlots, withDefaults, onMounted, defineExpose } from "vue";
|
||||
import { ref, useSlots, withDefaults } from "vue";
|
||||
import { templateRef } from "@vueuse/core";
|
||||
|
||||
// 组件的参数字段类型
|
||||
@ -32,6 +32,7 @@ const props = withDefaults(defineProps<LayUploadProps>(), {
|
||||
number: 0,
|
||||
drag: false,
|
||||
});
|
||||
|
||||
const slot = useSlots();
|
||||
const slots = slot.default && slot.default();
|
||||
const emit = defineEmits(["choose", "before", "done", "error"]);
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
|
||||
/* 主体结构 */
|
||||
.layui-laydate, .layui-laydate *{box-sizing: border-box;}
|
||||
.layui-laydate{position: absolute; z-index: 66666666; margin: 5px 0; border-radius: 2px; font-size: 14px; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
|
||||
.layui-laydate{ z-index: 66666666; border-radius: 2px; font-size: 14px; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
|
||||
.layui-laydate-main{width: 272px;}
|
||||
.layui-laydate-header *,
|
||||
.layui-laydate-content td,
|
||||
@ -92,7 +92,7 @@
|
||||
.laydate-time-list ol li{width: 130%; padding-left: 4px; height: 30px; line-height: 30px; text-align: left; cursor: pointer;}
|
||||
|
||||
/* 提示 */
|
||||
.layui-laydate-hint{position: absolute; top: 115px; left: 50%; width: 250px; margin-left: -125px; line-height: 20px; padding: 15px; text-align: center; font-size: 12px; color: #FF5722;}
|
||||
.layui-laydate-hint{ top: 115px; left: 50%; width: 250px; margin-left: -125px; line-height: 20px; padding: 15px; text-align: center; font-size: 12px; color: #FF5722;}
|
||||
|
||||
|
||||
/* 双日历 */
|
||||
@ -103,7 +103,7 @@
|
||||
|
||||
|
||||
/* 默认简约主题 */
|
||||
.layui-laydate, .layui-laydate-hint{border: 1px solid #d2d2d2; box-shadow: 0 2px 4px rgba(0,0,0,.12); background-color: #fff; color: #666;}
|
||||
.layui-laydate, .layui-laydate-hint{background-color: #fff; color: #666;}
|
||||
.layui-laydate-header{border-bottom: 1px solid #e2e2e2;}
|
||||
.layui-laydate-header i:hover,
|
||||
.layui-laydate-header span:hover{color: #5FB878;}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user