安装

npm install @xintao1105/text-checkbox

or

yarn add @xintao1105/text-checkbox

示例代码

import TextCheckbox from '@xintao1105/text-checkbox';
import type { interProps } from '@xintao1105/text-checkbox';

const ars:interProps = {
    onClick: (e) => { console.log("onClick", e) }
  }

<TextCheckbox {...ars}/>

参数类型

interface dataProps {
  s: string | number;
  content: string | number;
}

interface style {
  fontFamily: string;
  fontSize: number;
  color: string;
  fontWeight: string | number;
  letterSpacing: number;
  lineHeight: number;
  fontStyle: string;
}

interface offset {
  x: number;
  y: number;
}

interface fillColor {
  startVal: string;
  endVal: string;
  direction: number;
}

export interface styleProps extends style {
  /**
   * 文本偏移
   * @default offset = {x:0,y:0}
   */
  offset: offset;
  /**
   * 开启文本阴影
   * @default shadow = false
   */
  shadow: boolean;
  /**
   * 文本阴影
   * @default textShadow = {"shadowColor": "#0075ff","shadowOffsetX": 0,"shadowOffsetY": 0,"shadowBlur": 8,"extend": 0}
   */
  textShadow?: {
    shadowColor: string;
    shadowOffsetX: number;
    shadowOffsetY: number;
    shadowBlur: number;
    extend: number;
  };
  /**
   * 文本背景填充类型 默认颜色填充
   * @default fillStyle = "color"
   */
  fillStyle: "color" | "image";
  /**
   * 文本背景颜色填充 fillStyle = "color" 时生效 开始色值 | 结束色值 | 角度
   * @default fillColor = {"startVal": "rgba(15,22,34,0.6)","endVal": "rgba(15,22,34,0.6)","direction": 0}
   */
  fillColor: fillColor;
  /**
   * 文本背景图片填充 fillStyle = "image" 时生效
   * @default fillImage = ""
   */
  fillImage: string;
  /**
   * 文本框描边
   * @default stroke = false
   */
  stroke: boolean;
  /**
   * 文本框描边粗细
   * @default strokeWidth = 2
   */
  strokeWidth: number;
  /**
   * 文本框描边颜色
   * @default strokeColor = "rgba(160,169,184,0.3)"
   */
  strokeColor: string;
  /**
   * 文本框图标
   * @default icon = false | {
        src: "",
        size: {
          w: 20,
          h: 20,
        },
        margin: {
          left: 0,
          right: 10,
        }
      }
   */
  icon:
    | boolean
    | {
        src: string;
        size: {
          w: number;
          h: number;
        };
        margin: {
          left: number;
          right: number;
        };
      };
}

export interface seriesListProps {
  /**
   * 选项字段值 根据 数据项 字段 s 映射
   */
  fieldValue?: string | number;
  /**
   * 默认样式
   */
  style?: styleProps;
  /**
   * 选中样式
   */
  selectStyle?: styleProps;
  /**
   * 整体偏移
   */
  allOffset?: offset;
}

export interface interProps {
  /**
   * 唯一标识ID 默认使用系统生成的32位uuid
   */
  id?: string;
  /**
   * 宽
   */
  width?: number;
  /**
   * 高
   */
  height?: number;
  /**
   * 默认选中 格式: 从1开始,以逗号分隔默认选中的选项（例如: 1,2,3 ）
   * @default selectedDefault = "1,2"
   */
  selectedDefault?: string;
  /**
   * 文字对齐 "flex-start" | "center" | "flex-end";
   * @default alignment = "center"
   */
  alignment?: "flex-start" | "center" | "flex-end";
  /**
   * 网格布局 布局
   */
  layout?: {
    rows: number;
    column: number;
  };
  /**
   * 网格布局 间距
   */
  spacing?: {
    rows: number;
    column: number;
  };
  /**
   * 默认回调 页面初始化时组件会默认传出回调参数
   * @default defaultCallback = true
   */
  defaultCallback?: boolean;
  /**
   * 默认样式
   */
  style?: styleProps;
  /**
   * 选中样式
   */
  selectStyle?: styleProps;
  /**
   * 系列配置
   */
  seriesList?: Array<seriesListProps>;
  /**
   * 数据
   */
  data?: Array<dataProps>;
  /**
   * 点击回调
   */
  readonly onClick?: (e: any) => void;
  /**
   * 点击回调
   */
  readonly callbackParams?: (e: any) => void;
}