0.1.9 • Published 11 months ago

fg-diy v0.1.9

Weekly downloads
-
License
-
Repository
-
Last release
11 months ago

fg-diy

方果定制组件(当前仅试用于移动端定制)

技术栈

安装

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 = () => {
    /* 选中图层时触发 */
}

版本号

稳定版本

测试版本

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

11 months ago

0.1.88

1 year ago

0.1.86

1 year ago

0.1.85

1 year ago

0.1.84

1 year ago

0.1.83

1 year ago

0.1.82

1 year ago

0.1.81

1 year ago

0.1.8

1 year ago

0.1.76

1 year ago

0.1.75

1 year ago

0.1.74

1 year ago

0.1.73

1 year ago

0.1.72

1 year ago

0.1.71

1 year ago

0.1.7

1 year ago

0.1.69

1 year ago

0.1.68

1 year ago

0.1.67

1 year ago

0.1.66

1 year ago

0.1.64

1 year ago

0.1.63

1 year ago

0.1.62

1 year ago

0.1.61

1 year ago

0.1.6

1 year ago

0.1.5

1 year ago

0.1.4

1 year ago

0.1.3111

1 year ago

0.1.311

1 year ago

0.1.31

1 year ago

0.1.3

1 year ago

0.1.2

1 year ago

0.1.1

1 year ago

0.1.0

1 year ago