From d0f890f1daf69b91832dbec015d8c17e02070f73 Mon Sep 17 00:00:00 2001 From: hisoka0728 <1399952343@qq.com> Date: Tue, 3 Sep 2024 20:52:33 +0800 Subject: [PATCH 1/3] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=BE=93=E5=85=A5?= =?UTF-8?q?=E6=A1=86=E5=9B=9E=E8=BD=A6=E6=97=B6=E6=8E=A7=E5=88=B6=E5=8F=B0?= =?UTF-8?q?=E6=8A=A5=E9=94=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/editor/text-box/input/input.tsx | 32 +++++++++++++++++++++++------ 1 file changed, 26 insertions(+), 6 deletions(-) diff --git a/src/editor/text-box/input/input.tsx b/src/editor/text-box/input/input.tsx index 905fbc208..0c37bbda7 100644 --- a/src/editor/text-box/input/input.tsx +++ b/src/editor/text-box/input/input.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-nested-ternary */ import { computed, defineComponent, onUnmounted, ref, watch } from 'vue'; +import { debounce } from 'lodash-es'; import { getEditorEmits, getInputProps, @@ -125,6 +126,8 @@ export const IBizInput = defineComponent({ } }; + let isDebounce = false; + let awaitSearch: () => void; let blurCacheValue: string | undefined; // 值变更 const handleChange = (val: string | number) => { @@ -135,18 +138,35 @@ export const IBizInput = defineComponent({ blurCacheValue = undefined; }; + const debounceChange = debounce( + (val: string | number) => { + // 拦截掉blur触发后change + if (blurCacheValue !== val) { + onEmit(val, 'input'); + } + blurCacheValue = undefined; + isDebounce = false; + if (awaitSearch) { + awaitSearch(); + } + }, + 300, + { leading: true }, + ); + const handleInput = (val: string | number) => { - // 拦截掉blur触发后change - if (blurCacheValue !== val) { - onEmit(val, 'input'); - } - blurCacheValue = undefined; + isDebounce = true; + debounceChange(val); }; const handleKeyUp = (e: KeyboardEvent) => { if (e && e.code === 'Enter') { emit('enter', e); - editorRef.value.$el.dispatchEvent(e); + if (isDebounce) { + awaitSearch = () => { + editorRef.value.$el.dispatchEvent(e); + }; + } } }; -- Gitee From 50b7de5535e8f07a4b72c8b19d44e88bd145fb47 Mon Sep 17 00:00:00 2001 From: hisoka0728 <1399952343@qq.com> Date: Tue, 10 Sep 2024 19:42:20 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E8=BE=93?= =?UTF-8?q?=E5=85=A5=E6=A1=86=E8=AE=A1=E6=95=B0=E6=96=87=E6=9C=AC=E4=BD=8D?= =?UTF-8?q?=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/editor/text-box/input/input.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/editor/text-box/input/input.scss b/src/editor/text-box/input/input.scss index fe08edf67..7b962b7c7 100644 --- a/src/editor/text-box/input/input.scss +++ b/src/editor/text-box/input/input.scss @@ -47,6 +47,10 @@ $input: ( @include overflow-wrap; } + .el-input__count{ + bottom: 0; + } + @include b(input-input) { height: 100%; -- Gitee From 29496aec353ea6a651d9ed844e2291371f34b878 Mon Sep 17 00:00:00 2001 From: hisoka0728 <1399952343@qq.com> Date: Tue, 10 Sep 2024 20:26:32 +0800 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=E8=BF=9B=E5=BA=A6=E6=9D=A1?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E9=A5=BC=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../slider/ibiz-slider/ibiz-slider.scss | 43 ++++++++++++++++ src/editor/slider/ibiz-slider/ibiz-slider.tsx | 51 +++++++++++++++++++ 2 files changed, 94 insertions(+) diff --git a/src/editor/slider/ibiz-slider/ibiz-slider.scss b/src/editor/slider/ibiz-slider/ibiz-slider.scss index 588036e6c..5e91c1e24 100644 --- a/src/editor/slider/ibiz-slider/ibiz-slider.scss +++ b/src/editor/slider/ibiz-slider/ibiz-slider.scss @@ -1,6 +1,14 @@ $editor-slider: ( trigger-width: rem(6px), text-width: rem(38px), + pie-bg:rgba( + var(#{getCssVarName(blue, 4)}), + 1 + ), + pie-percent-bg:rgba( + var(#{getCssVarName(teal, 4)}), + 1 + ), ); @include b('slider') { @@ -48,9 +56,44 @@ $editor-slider: ( } } } + @include e('pie'){ + width: 100%; + } + + @keyframes spin { + to { transform: rotate(.5turn); } + } + + @keyframes bg { + 50% { background: getCssVar('editor-slider', 'pie-percent-bg'); } + } + + @include e('pie-content'){ + background: getCssVar('editor-slider', 'pie-bg'); + background-image:linear-gradient(to right, transparent 50%, getCssVar('editor-slider', 'pie-percent-bg') 0); + border-radius: 50%; + @include when(hundred-percent){ + background: getCssVar('editor-slider', 'pie-percent-bg'); + } + + &::before { + display: block; + height: 100%; + margin-left: 50%; + content: ''; + background-color: inherit; + border-radius: 0 100% 100% 0 / 50%; + transform-origin: left; + animation: spin 50s linear infinite, + bg 100s step-end infinite; + animation-play-state: paused; + animation-delay: inherit; + } + } } + @include b(form-item){ @include b(slider) { diff --git a/src/editor/slider/ibiz-slider/ibiz-slider.tsx b/src/editor/slider/ibiz-slider/ibiz-slider.tsx index 2e9afa2d7..ea70c4773 100644 --- a/src/editor/slider/ibiz-slider/ibiz-slider.tsx +++ b/src/editor/slider/ibiz-slider/ibiz-slider.tsx @@ -1,3 +1,4 @@ +/* eslint-disable no-use-before-define */ import { computed, defineComponent, ref, watch } from 'vue'; import { getEditorEmits, @@ -25,6 +26,9 @@ export const IBizSlider = defineComponent({ emit, ); + // 饼图样式 + const pieStyle = ref(''); + // 步长 let step = 1; // 设置滑动输入条允许的最大值 @@ -45,6 +49,10 @@ export const IBizSlider = defineComponent({ let type = 'line'; // 文本显示属性 let textItem = ''; + // 饼图背景色 + let pieBg = ''; + // 饼图占比背景色 + let piePercentBg = ''; if (editorModel.editorParams) { if (editorModel.editorParams.stepvalue) { step = toNumber(editorModel.editorParams.stepvalue); @@ -76,6 +84,12 @@ export const IBizSlider = defineComponent({ if (editorModel.editorParams.textItem) { textItem = editorModel.editorParams.textItem; } + if (editorModel.editorParams.pieBg) { + pieBg = editorModel.editorParams.pieBg; + } + if (editorModel.editorParams.piePercentBg) { + piePercentBg = editorModel.editorParams.piePercentBg; + } } // 是否显示表单默认内容 @@ -105,6 +119,8 @@ export const IBizSlider = defineComponent({ return Number(val) * 100; }; + const width = ref(126); + // 处理当前值 const handleCurVal = (val: string | number) => { switch (type) { @@ -112,11 +128,26 @@ export const IBizSlider = defineComponent({ return handleLineVal(val); case 'circle': return handleCircleVal(val); + case 'pie': + return handleCircleVal(val); default: return val; } }; + // 计算饼图行内样式 + const caclPieStyle = () => { + pieStyle.value = ''; + pieStyle.value = `height:${width.value}px;width:${width.value}px;`; + if (pieBg) { + pieStyle.value += `--ibiz-editor-slider-pie-bg:${pieBg};`; + } + if (piePercentBg) { + pieStyle.value += `--ibiz-editor-slider-pie-percent-bg:${piePercentBg};`; + } + pieStyle.value += `animation-delay:-${currentVal.value}s;`; + }; + // 当前值 const currentVal = ref>(); watch( @@ -130,8 +161,14 @@ export const IBizSlider = defineComponent({ } else { currentVal.value = 0; } + if (type === 'pie') { + caclPieStyle(); + } } else { currentVal.value = handleCurVal(newVal); + if (type === 'pie') { + caclPieStyle(); + } } } }, @@ -181,6 +218,8 @@ export const IBizSlider = defineComponent({ showText, textVal, showFormDefaultContent, + width, + pieStyle, }; }, render() { @@ -228,6 +267,18 @@ export const IBizSlider = defineComponent({ ); } + if (this.type === 'pie') { + content = ( +
+ ); + } + return (