From ed2c6daad113e2ecdbeb593eb8bda6a4b88a5071 Mon Sep 17 00:00:00 2001 From: erkelost <1256029807@qq.com> Date: Wed, 22 Dec 2021 16:37:49 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix(color-picker):=20'=E4=BC=98=E5=8C=96pal?= =?UTF-8?q?ette=E6=8B=96=E6=8B=BD=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/color-palette/color-palette.tsx | 2 +- .../devui/color-picker/src/utils/domDragger.ts | 14 ++++++++------ 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/devui-vue/devui/color-picker/src/components/color-palette/color-palette.tsx b/packages/devui-vue/devui/color-picker/src/components/color-palette/color-palette.tsx index 1bd6e577eb..882d8f8746 100644 --- a/packages/devui-vue/devui/color-picker/src/components/color-palette/color-palette.tsx +++ b/packages/devui-vue/devui/color-picker/src/components/color-palette/color-palette.tsx @@ -97,7 +97,7 @@ export default defineComponent({ onMounted(() => { renderCanvas() if (paletteInstance && paletteInstance.vnode.el && handlerElement.value) { - DOMUtils.triggerDragEvent(handlerElement.value, { + DOMUtils.triggerDragEvent(paletteInstance.vnode.el as HTMLElement, { drag: (event: Event) => { clickTransfrom.value = null handleDrag(event as MouseEvent) diff --git a/packages/devui-vue/devui/color-picker/src/utils/domDragger.ts b/packages/devui-vue/devui/color-picker/src/utils/domDragger.ts index e39258faf0..5e520c8073 100644 --- a/packages/devui-vue/devui/color-picker/src/utils/domDragger.ts +++ b/packages/devui-vue/devui/color-picker/src/utils/domDragger.ts @@ -82,26 +82,28 @@ export class DOMUtils { const upFn = (event: Event) => { DOMUtils.removeEventListener(document, 'mousemove', moveFn) DOMUtils.removeEventListener(document, 'mouseup', upFn) + DOMUtils.removeEventListener(document, 'touchmove', moveFn) + DOMUtils.removeEventListener(document, 'touchend', upFn) document.onselectstart = null document.ondragstart = null isDragging = false - options.end?.(event) } - - DOMUtils.addEventListener(element, 'mousedown', (event) => { + const downFn = (event: Event) => { if (isDragging) return document.onselectstart = () => false document.ondragstart = () => false DOMUtils.addEventListener(document, 'mousemove', moveFn) DOMUtils.addEventListener(document, 'mouseup', upFn) - + DOMUtils.addEventListener(document, 'touchmove', moveFn) + DOMUtils.addEventListener(document, 'touchend', upFn) isDragging = true options.start?.(event) - }) - + } + DOMUtils.addEventListener(element, 'mousedown', downFn) + DOMUtils.addEventListener(element, 'touchstart', downFn) return } From b2a1cf17979832dd5b9e9a625a02496260f824da Mon Sep 17 00:00:00 2001 From: erkelost <1256029807@qq.com> Date: Sat, 25 Dec 2021 16:22:10 +0800 Subject: [PATCH 2/2] =?UTF-8?q?docs(colorpicker,=20statistic,=20ripple):?= =?UTF-8?q?=20'=E4=BC=98=E5=8C=96=E6=96=87=E6=A1=A3=20'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../docs/components/color-picker/index.md | 14 +- .../devui-vue/docs/components/ripple/index.md | 2 +- .../docs/components/statistic/index.md | 17 +- .../en-US/components/color-picker/index.md | 158 ++++++++++++++++++ .../docs/en-US/components/ripple/index.md | 4 +- .../docs/en-US/components/statistic/index.md | 2 +- 6 files changed, 172 insertions(+), 25 deletions(-) create mode 100644 packages/devui-vue/docs/en-US/components/color-picker/index.md diff --git a/packages/devui-vue/docs/components/color-picker/index.md b/packages/devui-vue/docs/components/color-picker/index.md index 8e2f49be5f..5b4ba31257 100644 --- a/packages/devui-vue/docs/components/color-picker/index.md +++ b/packages/devui-vue/docs/components/color-picker/index.md @@ -109,7 +109,7 @@ export default defineComponent({ ::: ### 基础面板自定义 -设置可供选择的基础面板颜色样本 +设置可自定义配置的基础面板颜色样本 :::demo ```vue @@ -151,20 +151,10 @@ export default defineComponent({ d-color-picker 参数 | 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| ------------ | --------- | ------ | ------------------------------------------- | --------------------------- | +| :---: | :---: | :---: | :---: | :---: | | mode | `String` | `rgb` | 切换颜色模式 | [颜色模式](#颜色模式) | | | dotSize | `Number` | `15` | 调色板圆点大小 | | | | swatches | `Array` | | 预定义样本面板 | [色块样本](#基础面板自定义) | | | show-alpha | `Boolean` | `true` | 是否展示透明度进度条 | [透明度展示](#颜色透明度) | | | show-history | `Boolean` | `true` | 是否展示历史颜色 | [历史颜色展示](#历史颜色) | | | v-model | `String` | | 绑定颜色Value支持（hex , rgb , hsl , hsv ） | | | - - - -d-color-picker 事件 - -| 事件 | 类型 | 说明 | 跳转 Demo | -| ---- | ---- | ---- | --------- | -| | | | | -| | | | | -| | | | | diff --git a/packages/devui-vue/docs/components/ripple/index.md b/packages/devui-vue/docs/components/ripple/index.md index 3bd30f57eb..b5b9f491a0 100644 --- a/packages/devui-vue/docs/components/ripple/index.md +++ b/packages/devui-vue/docs/components/ripple/index.md @@ -200,7 +200,7 @@ Card 组件 ### API | 参数 | 类型 | 默认 | 说明 | -| :-------------: | :-------: | :---------: | :-------------------------------- | +| :---: | :---: | :---: | :---: | | color | `string` | `#00000050` | 可选，默认当前文本颜色 | | initial-opacity | `number` | `0.1` | 可选，初始交互效果透明度大小 | | final-opacity | `number` | `0.1` | 可选，结束交互效果长按透明度大小 | diff --git a/packages/devui-vue/docs/components/statistic/index.md b/packages/devui-vue/docs/components/statistic/index.md index f3f020d62e..1fa5cbc798 100644 --- a/packages/devui-vue/docs/components/statistic/index.md +++ b/packages/devui-vue/docs/components/statistic/index.md @@ -164,14 +164,14 @@ export default { ### d-statistic -| 参数 | 类型 | 默认 | 说明 | -| ------------------ | ------------------ | -------- | ---------------- | -| title | `string \| v-slot` | - | 数值的标题 | -| extra | `string \| v-slot` | - | 额外内容 | -| value | `number \| string` | - | 数值内容 | -| group-separator | `string` | , | 设置千分位标识符 | -| precision | `number` | - | 设置数值精度 | -| suffix | `string \| v-slot` | - | 设置数值的后缀 | +| 参数 | 类型 | 默认 | 说明 | +| :---: | :---: | :---: | :---: | +| title | `string \| v-slot` | - | 数值的标题 | +| extra | `string \| v-slot` | - | 额外内容 | +| value | `number \| string` | - | 数值内容 | +| group-separator | `string` | - | 设置千分位标识符 | +| precision | `number` | - | 设置数值精度 | +| suffix | `string \| v-slot` | - | 设置数值的后缀 | | prefix | `string \| v-slot` | - | 设置数值的前缀 | | title-style | `style` | - | 标题样式 | | content-style | `style` | - | 内容样式 | @@ -182,4 +182,3 @@ export default { | easing | `string` | quartOut | 数字动画效果 | | start | `boolean` | false | 是否开始动画 | - diff --git a/packages/devui-vue/docs/en-US/components/color-picker/index.md b/packages/devui-vue/docs/en-US/components/color-picker/index.md new file mode 100644 index 0000000000..f1761e0487 --- /dev/null +++ b/packages/devui-vue/docs/en-US/components/color-picker/index.md @@ -0,0 +1,158 @@ +# ColorPicker + +### When to use + +Allows users to use various interactive methods to select colors + +### Basic Usage + +:::demo + +```vue + +``` + +::: + +### Color transparency + +Allows users to dynamically adjust the display alpha mode, which is true by default +:::demo + +```vue + + + +``` + +::: + +### Color mode + +Set dynamic output color mode +:::demo + +```vue + + + +``` + +::: + +### Historical color + +Customize whether to display historical colors. By default, it is true +:::demo + +```vue + + + +``` + +::: + +### Foundation panel customization +Sets a customizable base panel color swatch +:::demo + +```vue + + + +``` + +::: + +### d-color-picker + +| parameter | type | default | introduce | Jump Demo | +| :---: | :---: | :---: | :---: | :---: | +| mode | `String` | `rgb` | Toggle color mode | [mode](#color-mode) | | +| dotSize | `Number` | `15` | Palette dot size | | | +| swatches | `Array` | | Predefined sample panels | [swatches](#foundation-panel-customization) | | +| show-alpha | `Boolean` | `true` | Show transparency progress bar | [Color transparency](#color-transparency) | | +| show-history | `Boolean` | `true` | Show historical colors | [show-history](#historical-color) | | +| v-model | `String` | | Binding color value support（hex , rgb , hsl , hsv ） | | | diff --git a/packages/devui-vue/docs/en-US/components/ripple/index.md b/packages/devui-vue/docs/en-US/components/ripple/index.md index dfae7982b3..c8992dce49 100644 --- a/packages/devui-vue/docs/en-US/components/ripple/index.md +++ b/packages/devui-vue/docs/en-US/components/ripple/index.md @@ -200,8 +200,8 @@ Card Component ### API -| 参数 | 类型 | 默认 | 说明 | -| :-------------: | :-------: | :---------: | :---------------------------------------------------------------------------- | +| parameter | type | default | introduce | +| :---: | :---: | :---: | :---: | | color | `string` | `#00000050` | Choose Default current text color | | initial-opacity | `number` | `0.1` | Choose Initial interaction Opacity size | | final-opacity | `number` | `0.1` | Choose, end the interactive effect and press the Opacity size for a long time | diff --git a/packages/devui-vue/docs/en-US/components/statistic/index.md b/packages/devui-vue/docs/en-US/components/statistic/index.md index e15adb35a3..ba256b4143 100644 --- a/packages/devui-vue/docs/en-US/components/statistic/index.md +++ b/packages/devui-vue/docs/en-US/components/statistic/index.md @@ -165,7 +165,7 @@ Prefix and suffix slots ### d-statistic | parameter | type | default | introduce | -| ------------------ | ------------------ | -------- | ---------------------------- | +| :---: | :---: | :---: | :---: | | title | `string \| v-slot` | - | Title of value | | extra | `string \| v-slot` | - | Extra content | | value | `number \| string` | - | Value content |