fg-diy

方果定制组件（当前仅试用于移动端定制）

技术栈

• Vite5
• Vue3
• TypeScript
• Fabricjs

安装

npm i fg-diy

引入

引入组件

import Draw from 'fg-diy'
// 或
import { Draw } from 'fg-diy'

引入样式

@import "fg-diy/css";

Draw组件

使用组件

<Draw ref="drawRef" :layerList="layerList" />

组件props

defineProps({
    /**
     * @desc layerList 图层数据
     */
    layerList: {
        type: Array as PropType<LayerType[]>,
        require: true,
        default: () => ([])
    },
    /**
     * @desc mask 型号孔位图链接
     */
    mask: {
        type: String,
        default: ''
    },
    /**
     * @desc diyBg 定制区域背景色
     */
    diyBg: {
        type: String,
        default: ''
    },
    /**
     * @desc wrapBg 画布缓冲区背景色
     */
    wrapBg: {
        type: String,
        default: '#EFEFEF'
    },
    /**
     * @desc scale 画布缩放（css缩放）
     */
    scale: {
        type: Number,
        require: false,
        default: () => 1
    },
    /**
     * @desc isStatic 是否为静态画布
     */
    isStatic: {
        type: Boolean,
        require: false,
        default: () => false
    },
    /**
     * @desc isMobile 是否为移动端
     */
    isMobile: {
        type: Boolean,
        require: false,
        default: () => true
    },
    /**
     * @desc saveBg 导出图片是否保存背景色
     */
    saveBg: {
        type: Boolean,
        default: () => false
    },
    /**
     * @desc productWidth 目标生产宽度
     */
    productWidth: {
        type: Number,
        require: false,
        default: () => 1000
    }
});

组件通信

父子通信

<Draw ref="drawRef" />

const drawRef = ref()

{  setLayerLevel, setImgLayerScale, save }
/**
 * addDrawLayer({...}) 新增图层
 */
drawRef.addDrawLayer()

/**
 * editLayer({...}) 修改图片图层
 */
drawRef.editLayer()

/**
 * editTextLayer({...}) 修改文本图层
 */
drawRef.editTextLayer()

/**
 * setLayerLevel({...}) 修改图层层级
 */
drawRef.setLayerLevel()

/**
 * setLayerLevel({...}) 修改图层层级
 */
drawRef.setLayerLevel()

/**
 * save({...}) 保存
 * { scale, saveEffectUrl } scale-缩放比例, saveEffectUrl-是否保存效果图
 */
drawRef.save()

子父通信

<Draw @updateLayer="updateLayer" @selectLayer="selectLayer" />

/**
 * updateLayer 更新图层数据
 */
const updateLayer = () => {
    /* 图层操作后触发 */
}

/**
 * selectLayer 选中当前图层
 */
const selectLayer = () => {
    /* 选中图层时触发 */
}

版本号

稳定版本

测试版本

• [x] v0.1.8 测试版本
• [x] v0.1.88 修复自定义控件失效，优化新增/替换算法
• [x] v0.1.9 新增取消选中图层方法