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

ci: merge feat-ripple-dev

Browse Source
This commit is contained in:
就眠儀式 2022-04-15 09:00:15 +08:00
parent 92360fb035
commit 8ad11a94e4
9 changed files with 4681 additions and 1041 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package/component/src/component/area/index.ts
View File

@ -5,4 +5,4 @@ Component.install = (app: App) => {
app.component(Component.name, Component);
};
export default Component;
export default Component;

5199
package/component/src/component/area/index.vue
View File

File diff suppressed because it is too large Load Diff

202
package/component/src/component/datePicker/index.vue
View File

@ -8,17 +8,38 @@
</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>
@ -28,17 +49,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>
@ -48,37 +78,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>
@ -86,30 +148,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>
@ -125,13 +216,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>
@ -140,11 +237,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>

38
package/component/src/component/noticeBar/index.vue
View File

@ -18,14 +18,22 @@
>
{{ text }}
</div>
<div class="notice-bar-warp-slot " v-else>
<lay-carousel v-model="active4" :interval="3000" :autoplay="true" anim="updown" indicator="none" arrow="none" style="height:40px;">
<lay-carousel-item :id="ind" v-for="(item,ind) in arrays">
<div>{{ item }}</div>
</lay-carousel-item>
</lay-carousel>
<!-- <slot /> -->
</div>
<div class="notice-bar-warp-slot" v-else>
<lay-carousel
v-model="active4"
:interval="3000"
:autoplay="true"
anim="updown"
indicator="none"
arrow="none"
style="height: 40px"
>
<lay-carousel-item :id="ind" v-for="(item, ind) in arrays">
<div>{{ item }}</div>
</lay-carousel-item>
</lay-carousel>
<!-- <slot /> -->
</div>
</div>
<lay-icon
:type="rightIcon"
@ -46,13 +54,13 @@ import {
onMounted,
nextTick,
} from "vue";
import LayCarousel from '../carousel/index.vue'
import LayCarouselItem from '../carouselItem/index.vue'
import LayCarousel from "../carousel/index.vue";
import LayCarouselItem from "../carouselItem/index.vue";
export default defineComponent({
name: "LayNoticeBar",
components: {
LayCarousel,
LayCarouselItem
LayCarouselItem,
},
props: {
mode: {
@ -220,7 +228,13 @@ export default defineComponent({
width: 100%;
white-space: nowrap;
}
.notice-bar .notice-bar-warp .notice-bar-warp-text-box .notice-bar-warp-slot .layui-carousel >[carousel-item] * {
.notice-bar
.notice-bar-warp
.notice-bar-warp-text-box
.notice-bar-warp-slot
.layui-carousel
> [carousel-item]
* {
display: flex;
align-items: center;
}

2
package/component/src/component/ripple/index.ts
View File

@ -5,4 +5,4 @@ Component.install = (app: App) => {
app.component(Component.name, Component);
};
export default Component;
export default Component;

70
package/component/src/component/ripple/index.vue
View File

@ -9,12 +9,12 @@ import { computed, onMounted, ref, watch } from "vue";
import "./index.less";
export interface LayRippletProps {
type?: 'out' | 'inset';
type?: "out" | "inset";
color?: string;
borderRadius?: string;
spreadWidth?: string;
spreadSize?: string;
trigger?: 'always' | 'mouseenter' | 'click';
trigger?: "always" | "mouseenter" | "click";
center?: boolean;
}
@ -29,13 +29,13 @@ const props = withDefaults(defineProps<LayRippletProps>(), {
const isActiveRef = ref(false);
// 波纹宽高
const spreadSizeRef = ref<string>("0px")
const spreadSizeRef = ref<string>("0px");
const ripplesRefEl = ref<HTMLElement | null>(null);
const waterRipplesContainerRefEl = ref<HTMLElement | null>(null);
const isOut = computed(() => {
return props.type === "out"
})
return props.type === "out";
});
const rippleX = ref<string | number | undefined>(undefined);
const rippleY = ref<string | number | undefined>(undefined);
@ -45,17 +45,17 @@ const onActive = function (event: Event) {
// 跟随鼠标点击
if (props.type === "inset" && !props.spreadSize && !props.center) {
const el = event.currentTarget
const el = event.currentTarget;
const rect = el.getBoundingClientRect();
const rippleOffsetLeft = event.clientX - rect.left;
const rippleOffsetTop = event.clientY - rect.top;
const sizeX = Math.max(rippleOffsetLeft, rect.width - rippleOffsetLeft);
const sizeY = Math.max(rippleOffsetTop, rect.height - rippleOffsetTop);
rippleX.value = rippleOffsetLeft + 'px';
rippleY.value = rippleOffsetTop + 'px';
spreadSizeRef.value = Math.sqrt(sizeX ** 2 + sizeY ** 2) * 2 + 'px'
rippleX.value = rippleOffsetLeft + "px";
rippleY.value = rippleOffsetTop + "px";
spreadSizeRef.value = Math.sqrt(sizeX ** 2 + sizeY ** 2) * 2 + "px";
}
}
};
const initWidth = function () {
let container = waterRipplesContainerRefEl.value;
@ -66,40 +66,54 @@ const initWidth = function () {
} else {
container.style.overflow = "hidden";
if (!props.spreadSize || props.center) {
spreadSizeRef.value = container.clientWidth * 1.1 + "px"
spreadSizeRef.value = container.clientWidth * 1.1 + "px";
} else {
spreadSizeRef.value = props.spreadSize
spreadSizeRef.value = props.spreadSize;
}
}
ripples.addEventListener('animationend', () => {
isActiveRef.value = false
}, false);
}
ripples.addEventListener(
"animationend",
() => {
isActiveRef.value = false;
},
false
);
};
onMounted(() => {
initWidth();
})
});
watch(
() => props.trigger,
(val) => isActiveRef.value = (val === 'always'),
(val) => (isActiveRef.value = val === "always"),
{ immediate: true }
)
);
</script>
<template>
<div class="layui-water-ripples-container" ref="waterRipplesContainerRefEl" @[trigger]="onActive">
<div
class="layui-water-ripples-container"
ref="waterRipplesContainerRefEl"
@[trigger]="onActive"
>
<div
ref="ripplesRefEl"
:class="{
'layui-out-ripples': isOut,
'layui-out-ripples': isOut,
'layui-inset-ripples': type == 'inset',
'layui-animate-always--out': isActiveRef && trigger == 'always' && type == 'out',
'layui-animate-once--out': isActiveRef && (trigger == 'mouseenter' || trigger == 'click') && type == 'out',
'layui-animate-always--inset': isActiveRef && trigger == 'always' && type == 'inset',
'layui-animate-once--inset': isActiveRef && (trigger == 'mouseenter' || trigger == 'click') && type == 'inset',
'layui-animate-always--out':
isActiveRef && trigger == 'always' && type == 'out',
'layui-animate-once--out':
isActiveRef &&
(trigger == 'mouseenter' || trigger == 'click') &&
type == 'out',
'layui-animate-always--inset':
isActiveRef && trigger == 'always' && type == 'inset',
'layui-animate-once--inset':
isActiveRef &&
(trigger == 'mouseenter' || trigger == 'click') &&
type == 'inset',
}"
:style="{
borderRadius: isOut ? borderRadius : '50%',
@ -112,4 +126,4 @@ watch(
></div>
<slot></slot>
</div>
</template>
</template>

201
package/component/src/component/slider/sliderVerify.vue
View File

@ -1,22 +1,29 @@
<template>
<div id="sliderVerify" class="slider-item">
<div class="slider-bg layui-bg-green"></div>
<div class="slider-text">{{ prototype.isOk == false ? prototype.text : prototype.success}}</div>
<div :class="prototype.isOk == false ? 'slider-btn layui-icon layui-icon-next' : 'slider-btn layui-icon layui-icon-ok-circle slider-btn-success'"
@mousedown.stop="down"></div>
<div id="sliderVerify" class="slider-item">
<div class="slider-bg layui-bg-green"></div>
<div class="slider-text">
{{ prototype.isOk == false ? prototype.text : prototype.success }}
</div>
<div
:class="
prototype.isOk == false
? 'slider-btn layui-icon layui-icon-next'
: 'slider-btn layui-icon layui-icon-ok-circle slider-btn-success'
"
@mousedown.stop="down"
></div>
</div>
</template>
<script setup lang='ts'>
import { reactive, ref, defineProps } from 'vue'
<script setup lang="ts">
import { reactive, ref, defineProps } from "vue";
import { on, off } from "evtd";
import { throttle, handle_select } from "./utils/index";
interface Prop {
disabled?: boolean;
bg?: string,
text?: string,
end?: string,
success?: Function
interface Prop {
disabled?: boolean;
bg?: string;
text?: string;
end?: string;
success?: Function;
}
const props = withDefaults(defineProps<Prop>(), {
@ -25,14 +32,13 @@ const props = withDefaults(defineProps<Prop>(), {
//默认配置
const prototype = reactive({
isOk: false,
bg: props.bg, //默认滑块颜色
text: props.text ? props.text : '请拖动滑块验证',
success: props.end ? props.end : '验证通过',
ok: props.success
isOk: false,
bg: props.bg, //默认滑块颜色
text: props.text ? props.text : "请拖动滑块验证",
success: props.end ? props.end : "验证通过",
ok: props.success,
});
//是否为移动端
/* prototype.isMobile = function () {
return (
@ -45,123 +51,118 @@ const prototype = reactive({
}; */
const moveAction = throttle(move);
let distance
let downX
let distance;
let downX;
//按下
const down = function (e) {
e = e || window.event
console.log(e.path)
distance = e.path[1].offsetWidth - e.path[0].offsetWidth
//按下的坐标
downX = e.clientX;
on("selectstart", window, handle_select, { once: true });
on("mouseup", window, stop);
on("mousemove", window, moveAction);
e = e || window.event;
console.log(e.path);
distance = e.path[1].offsetWidth - e.path[0].offsetWidth;
//按下的坐标
downX = e.clientX;
on("selectstart", window, handle_select, { once: true });
on("mouseup", window, stop);
on("mousemove", window, moveAction);
};
//移动
function move(e) {
e = e || window.event
let moveX = e.clientX;
//鼠标水平位置的偏移量（鼠标移动时的位置 - 鼠标按下时的位置）
let offsetX = moveX - downX;
if (offsetX > 0) {
e.path[0].style.left = offsetX + "px";
e.path[1].childNodes[0].style.width = offsetX + "px";
//鼠标的水平移动距离 >= 滑动成功的宽度
if (offsetX >= distance) {
prototype.isOk = true
//成功后，清除掉鼠标按下事件和移动事件（因为移动时并不会涉及到鼠标松开事件）
off("mousedown", window, down);
off("mousemove", window, moveAction);
//最后调用回调
if (prototype.ok) prototype.ok()
}
e = e || window.event;
let moveX = e.clientX;
//鼠标水平位置的偏移量（鼠标移动时的位置 - 鼠标按下时的位置）
let offsetX = moveX - downX;
if (offsetX > 0) {
e.path[0].style.left = offsetX + "px";
e.path[1].childNodes[0].style.width = offsetX + "px";
//鼠标的水平移动距离 >= 滑动成功的宽度
if (offsetX >= distance) {
prototype.isOk = true;
//成功后，清除掉鼠标按下事件和移动事件（因为移动时并不会涉及到鼠标松开事件）
off("mousedown", window, down);
off("mousemove", window, moveAction);
//最后调用回调
if (prototype.ok) prototype.ok();
}
};
}
}
//放开
const stop = function (e) {
//鼠标松开，如果滑到了终点，则验证通过
if (prototype.isOk === true) {
return;
} else {
e.path[0].style.left = 0;
e.path[1].childNodes[0].style.width = 0;
}
//鼠标松开，如果滑到了终点，则验证通过
if (prototype.isOk === true) {
return;
} else {
e.path[0].style.left = 0;
e.path[1].childNodes[0].style.width = 0;
}
//鼠标松开了，不需要拖动就清除鼠标移动和松开事件。
off("selectstart", document, handle_select);
off("mouseup", window, stop);
off("mousemove", window, moveAction);
//鼠标松开了，不需要拖动就清除鼠标移动和松开事件。
off("selectstart", document, handle_select);
off("mouseup", window, stop);
off("mousemove", window, moveAction);
};
</script>
<style scoped >
<style scoped>
.slider-item {
height: 38px;
line-height: 38px;
background-color: #d0d0d0;
position: relative;
border: 1px solid white;
height: 38px;
line-height: 38px;
background-color: #d0d0d0;
position: relative;
border: 1px solid white;
}
.slider-bg {
position: absolute;
width: 40px;
height: 100%;
z-index: 100
position: absolute;
width: 40px;
height: 100%;
z-index: 100;
}
.slider-btn {
width: 40px;
height: 96%;
position: absolute;
border: 1px solid #ccc;
cursor: move;
text-align: center;
background-color: #fff;
user-select: none;
color: #666;
z-index: 120;
width: 40px;
height: 96%;
position: absolute;
border: 1px solid #ccc;
cursor: move;
text-align: center;
background-color: #fff;
user-select: none;
color: #666;
z-index: 120;
}
.slider-btn:hover {
cursor: pointer
cursor: pointer;
}
.slider-btn-success {
font-size: 22px
font-size: 22px;
}
.slider-text {
position: absolute;
text-align: center;
width: 100%;
height: 100%;
user-select: none;
font-size: 14px;
color: #fff;
z-index: 120
position: absolute;
text-align: center;
width: 100%;
height: 100%;
user-select: none;
font-size: 14px;
color: #fff;
z-index: 120;
}
.slider-error {
animation: glow 800ms ease-out infinite alternate;
animation: glow 800ms ease-out infinite alternate;
}
@keyframes glow {
0% {
border-color: #e6e6e6
}
0% {
border-color: #e6e6e6;
}
100% {
border-color: #ff5722
}
100% {
border-color: #ff5722;
}
}
</style>

6
package/document/src/router/zh-CN.ts
View File

@ -385,14 +385,12 @@ const zhCN = [
},
{
path: "/zh-CN/components/ripple",
component: () =>
import("../document/zh-CN/components/ripple.md"),
component: () => import("../document/zh-CN/components/ripple.md"),
meta: { title: "水波纹" },
},
{
path: "/zh-CN/components/area",
component: () =>
import("../document/zh-CN/components/area.md"),
component: () => import("../document/zh-CN/components/area.md"),
meta: { title: "地址选择器" },
},
],

2
package/document/src/view/utils/menus.ts
View File

@ -44,7 +44,7 @@ const menus = [
title: "水波纹",
subTitle: "ripple",
path: "/zh-CN/components/ripple",
},
},
],
},
{