logo
<h3>定义示例</h3>
<pre><code class="language-js">// 文件 '@/lib/fabric/src/zGroup/qrcode/qrcode-default.js
import { fabric } from '@/lib/fabric'
const defaultOpts = {
scheme: 'default',
name: 'qrcode',
autoPosition: true,
top: 0,
left: 0,
width: 500,
height: 200
}
const qrcode = function (datas, options) {
const { text } = datas
if (!text || typeof text!=='string' || text.length == 0) return
const opt = { ...defaultOpts ,...options }
const { scheme, name, autoPosition, left, top, width, height } = opt
// some code...
}
export default qrcode
</code></pre>
<h3>使用示例</h3>
<pre><code class="language-javascript">import { fabric } from '@/lib/fabric'
const qrcodeObj = fabric.zGroup.qrcode(datas, options)</code></pre>
<h3>数据参数 datas</h3>
<pre><code class="language-json">//options 默认值
{
text: '文字内容'
}</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left;">属性</th>
<th style="text-align: left;">名称</th>
<th style="text-align: left;">默认</th>
<th style="text-align: left;">值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;"><strong>text</strong></td>
<td style="text-align: left;">文字内容</td>
<td style="text-align: left;">“”</td>
<td style="text-align: left;">String</td>
</tr>
</tbody>
</table>
<h3>选项参数 options</h3>
<pre><code class="language-json">//options 默认值
{
name: 'qrcode',
scheme: 'default',
autoPosition: true,
top: 100,
left: 100,
width: 200,
height: 200
}</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left;">属性</th>
<th style="text-align: left;">名称</th>
<th style="text-align: left;">默认</th>
<th style="text-align: left;">值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;"><strong>name</strong></td>
<td style="text-align: left;">fabric对象名</td>
<td style="text-align: left;">qrcode</td>
<td style="text-align: left;">String</td>
</tr>
<tr>
<td style="text-align: left;"><strong>scheme</strong></td>
<td style="text-align: left;">样式方案名</td>
<td style="text-align: left;">default</td>
<td style="text-align: left;">String</td>
</tr>
<tr>
<td style="text-align: left;"><strong>autoPosition</strong></td>
<td style="text-align: left;">自动定位</td>
<td style="text-align: left;">true</td>
<td style="text-align: left;">Boolean</td>
</tr>
<tr>
<td style="text-align: left;"><strong>top</strong></td>
<td style="text-align: left;">顶距</td>
<td style="text-align: left;">100</td>
<td style="text-align: left;">Number</td>
</tr>
<tr>
<td style="text-align: left;"><strong>left</strong></td>
<td style="text-align: left;">左距</td>
<td style="text-align: left;">100</td>
<td style="text-align: left;">Number</td>
</tr>
<tr>
<td style="text-align: left;"><strong>width</strong></td>
<td style="text-align: left;">宽</td>
<td style="text-align: left;">200</td>
<td style="text-align: left;">Number</td>
</tr>
<tr>
<td style="text-align: left;"><strong>height</strong></td>
<td style="text-align: left;">高</td>
<td style="text-align: left;">200</td>
<td style="text-align: left;">Number</td>
</tr>
</tbody>
</table>