@wot-ui/ui 1.0.0 → 2.0.0-alpha.4

package/components/wd-img-cropper/index.scss

@@ -0,0 +1,259 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+// ============================================================
+// img-cropper 组件变量
+// ============================================================
+
+// 组件背景色
+$img-cropper-bg: var(--wot-img-cropper-bg, $base-black) !default;
+// 组件层级
+$img-cropper-z-index: var(--wot-img-cropper-z-index, 1) !default;
+// 包裹器蒙层背景色
+$img-cropper-wrapper-bg: var(--wot-img-cropper-wrapper-bg, $opac-7_45) !default;
+// 裁剪区遮罩背景色
+$img-cropper-overlay-bg: var(--wot-img-cropper-overlay-bg, $opac-10_85) !default;
+// 裁剪区遮罩高亮背景色
+$img-cropper-overlay-bg-highlight: var(--wot-img-cropper-overlay-bg-highlight, $base-transparent) !default;
+// 遮罩过渡时长
+$img-cropper-overlay-transition-duration: var(--wot-img-cropper-overlay-transition-duration, 0.2s) !default;
+// 裁剪框层级
+$img-cropper-cut-z-index: var(--wot-img-cropper-cut-z-index, 9) !default;
+// 裁剪框边框颜色
+$img-cropper-cut-border-color: var(--wot-img-cropper-cut-border-color, $base-white) !default;
+// 角标粗细
+$img-cropper-corner-size: var(--wot-img-cropper-corner-size, $stroke-blod) !default;
+// 角标长度
+$img-cropper-corner-length: var(--wot-img-cropper-corner-length, $n-20) !default;
+// 角标颜色
+$img-cropper-corner-color: var(--wot-img-cropper-corner-color, $base-white) !default;
+// 网格线边框颜色
+$img-cropper-gridline-border-color: var(--wot-img-cropper-gridline-border-color, $base-white) !default;
+// 图片层级
+$img-cropper-img-z-index: var(--wot-img-cropper-img-z-index, 2) !default;
+// 画布背景色
+$img-cropper-canvas-bg: var(--wot-img-cropper-canvas-bg, $base-white) !default;
+// 画布层级
+$img-cropper-canvas-z-index: var(--wot-img-cropper-canvas-z-index, 10) !default;
+// 底部操作栏层级
+$img-cropper-footer-z-index: var(--wot-img-cropper-footer-z-index, 10) !default;
+// 底部操作栏内边距
+$img-cropper-footer-padding: var(--wot-img-cropper-footer-padding, $padding-extra-loose) !default;
+// 底部按钮向上边距
+$img-cropper-footer-btn-margin: var(--wot-img-cropper-footer-btn-margin, $spacing-extra-spacious) !default;
+// 取消按钮文字颜色
+$img-cropper-cancel-color: var(--wot-img-cropper-cancel-color, $base-white) !default;
+// 取消按钮字号
+$img-cropper-cancel-font-size: var(--wot-img-cropper-cancel-font-size, $typography-body-size-extra-large) !default;
+// 旋转图标大小
+$img-cropper-icon-size: var(--wot-img-cropper-icon-size, $n-36) !default;
+// 旋转图标颜色
+$img-cropper-icon-color: var(--wot-img-cropper-icon-color, $base-white) !default;
+
+@include b(img-cropper) {
+  background: $img-cropper-bg;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: $img-cropper-z-index;
+
+  // 裁剪框包裹器
+  @include e(wrapper) {
+    position: relative;
+    background: $img-cropper-wrapper-bg;
+  }
+
+  @include e(cut) {
+    z-index: $img-cropper-cut-z-index;
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    pointer-events: none;
+  }
+
+  // 裁剪区上下左右遮罩
+  @include e(overlay) {
+    background-color: $img-cropper-overlay-bg;
+    transition: background $img-cropper-overlay-transition-duration;
+
+    @include when(highlight) {
+      background-color: $img-cropper-overlay-bg-highlight;
+    }
+  }
+
+  // 底部和右侧遮罩自动填充
+  @include e(overlay-bottom, overlay-right) {
+    flex: auto;
+  }
+
+  // 中间行容器
+  @include e(cut-middle) {
+    display: flex;
+  }
+
+  // 裁剪框主体
+  @include e(cut-body) {
+    background-color: $base-transparent;
+    position: relative;
+
+    // 裁剪框外边框
+    &::before {
+      content: "";
+      border: $stroke-main solid $img-cropper-cut-border-color;
+      width: calc(200% - 1px);
+      height: calc(200% - 1px);
+      position: absolute;
+      transform: scale(0.5) translate(-1px, -1px);
+      top: -50%;
+      left: -50%;
+    }
+  }
+
+  // 裁剪框四角共用样式
+  @include e(corner) {
+    &::before {
+      content: "";
+      position: absolute;
+      width: $img-cropper-corner-size;
+      height: $img-cropper-corner-length;
+      background-color: $img-cropper-corner-color;
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      width: $img-cropper-corner-length;
+      height: $img-cropper-corner-size;
+      background-color: $img-cropper-corner-color;
+    }
+
+    @include m(left-top) {
+
+      &::before,
+      &::after {
+        left: calc(-1 * $img-cropper-corner-size);
+        top: calc(-1 * $img-cropper-corner-size);
+      }
+    }
+
+    @include m(left-bottom) {
+
+      &::before,
+      &::after {
+        left: calc(-1 * $img-cropper-corner-size);
+        bottom: calc(-1 * $img-cropper-corner-size);
+      }
+    }
+
+    @include m(right-top) {
+
+      &::before,
+      &::after {
+        right: calc(-1 * $img-cropper-corner-size);
+        top: calc(-1 * $img-cropper-corner-size);
+      }
+    }
+
+    @include m(right-bottom) {
+
+      &::before,
+      &::after {
+        right: calc(-1 * $img-cropper-corner-size);
+        bottom: calc(-1 * $img-cropper-corner-size);
+      }
+    }
+  }
+
+  // 网格线共用样式
+  @include e(gridline) {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: flex;
+
+    @include m(x) {
+      justify-content: center;
+
+      &::before {
+        content: "";
+        display: inline-block;
+        width: 66.66%;
+        height: 200%;
+        border: $stroke-main solid $img-cropper-gridline-border-color;
+        border-top: none;
+        border-bottom: none;
+        transform: scale(0.5) translate(0, -50%);
+      }
+    }
+
+    @include m(y) {
+      align-items: center;
+
+      &::after {
+        content: "";
+        flex-shrink: 0;
+        display: inline-block;
+        width: 200%;
+        height: 66.66%;
+        border: $stroke-main solid $img-cropper-gridline-border-color;
+        border-left: none;
+        border-right: none;
+        transform: scale(0.5) translate(-50%, 0);
+      }
+    }
+  }
+
+  @include e(img) {
+    z-index: $img-cropper-img-z-index;
+    top: 0;
+    left: 0;
+    position: absolute;
+    border: none;
+    width: 100%;
+    backface-visibility: hidden;
+    transform-origin: center;
+  }
+
+  @include e(canvas) {
+    position: fixed;
+    background: $img-cropper-canvas-bg;
+    z-index: $img-cropper-canvas-z-index;
+    top: -200%;
+    pointer-events: none;
+  }
+
+  @include e(footer) {
+    position: fixed;
+    z-index: $img-cropper-footer-z-index;
+    padding: $img-cropper-footer-padding;
+    bottom: 0;
+    width: 100%;
+    box-sizing: border-box;
+    text-align: center;
+  }
+
+  @include e(footer-btn) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    margin-top: $img-cropper-footer-btn-margin;
+  }
+
+  @include edeep(cancel) {
+    &.is-text {
+      color: $img-cropper-cancel-color;
+    }
+  }
+
+  @include edeep(rotate) {
+    font-size: $img-cropper-icon-size;
+    color: $img-cropper-icon-color;
+  }
+}

package/components/wd-img-cropper/types.ts

@@ -0,0 +1,101 @@
+import type { ComponentPublicInstance, ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../../common/props'
+
+export const imgCropperProps = {
+  ...baseProps,
+  /**
+   * 打开图片裁剪组件
+   * 类型: boolean
+   * 默认值: false
+   */
+  modelValue: makeBooleanProp(false),
+  /**
+   * 取消按钮文案
+   * 类型: string
+   * 默认值: '取消'
+   */
+  cancelButtonText: String,
+  /**
+   * 确认按钮文案
+   * 类型: string
+   * 默认值: '确认'
+   */
+  confirmButtonText: String,
+  /**
+   * 是否禁用旋转功能
+   * 类型: boolean
+   * 默认值: false
+   */
+  disabledRotate: makeBooleanProp(false),
+  /**
+   * Canvas 输出文件类型
+   * 类型: string
+   * 可选值: 'png' | 'jpg' | 'jpeg'
+   * 默认值: 'png'
+   */
+  fileType: makeStringProp('png'),
+  /**
+   * Canvas 图片输出质量，范围 0-1
+   * 类型: number
+   * 默认值: 1
+   */
+  quality: makeNumberProp(1),
+  /**
+   * 导出图片的缩放倍数
+   * 类型: number
+   * 默认值: 2
+   */
+  exportScale: makeNumberProp(2),
+  /**
+   * 图片源路径
+   * 类型: string
+   * 默认值: ''
+   */
+  imgSrc: makeStringProp(''),
+  /**
+   * 图片初始宽度（支持 px 和 % 单位）
+   * 类型: string | number
+   * 默认值: ''
+   */
+  imgWidth: makeNumericProp(''),
+  /**
+   * 图片初始高度（支持 px 和 % 单位）
+   * 类型: string | number
+   * 默认值: ''
+   */
+  imgHeight: makeNumericProp(''),
+  /**
+   * 图片最大缩放倍数
+   * 类型: number
+   * 默认值: 3
+   */
+  maxScale: makeNumberProp(3),
+  /**
+   * 裁剪框宽高比
+   * 类型: string
+   * 格式: 'width:height' (如 '1:1', '16:9')
+   * 默认值: '1:1'
+   */
+  aspectRatio: makeStringProp('1:1')
+}
+
+export type ImgCropperProps = ExtractPropTypes<typeof imgCropperProps>
+
+export type ImgCropperExpose = {
+  /**
+   * 切换图片过渡动画效果
+   * @param animation 是否启用动画，或包含动画状态的对象
+   */
+  revertIsAnimation: (animation: boolean | { value: boolean }) => void
+  /**
+   * 重置图片的大小、角度和位置到初始状态
+   */
+  resetImg: () => void
+  /**
+   * 旋转图片
+   * @param angle 旋转角度（建议使用 90 的倍数）
+   */
+  setRotate: (angle: number) => void
+}
+
+export type ImgCropperInstance = ComponentPublicInstance<ImgCropperProps, ImgCropperExpose>