<div class="utility-11 p-2">
<div class="field has-addons">
<div class="control is-expanded"><input class="input" id="js-utility-11-input" type="text" placeholder="QRコードに変換する文字を入力してください" /></div>
<div class="control"><button class="button is-primary" id="js-utility-11-button">QRコード変換</button></div>
</div><canvas id="js-utility-11-canvas"></canvas>
</div>
.utility-11.p-2
.field.has-addons
.control.is-expanded
input#js-utility-11-input.input(type='text', placeholder='QRコードに変換する文字を入力してください')
.control
button#js-utility-11-button.button.is-primary QRコード変換
canvas#js-utility-11-canvas
/* No context defined. */
$BLOCK_NAME: '.utility-11';
// 変数
#{ $BLOCK_NAME } {
//
}
'use strict';
// @ts-ignore
import QRCode from 'qrcode';
export const utility11 = () => {
const utility = new Utility11();
utility.init();
}
class Utility11 {
canvasEl: HTMLElement;
inputEl: HTMLInputElement;
buttonEl: HTMLElement;
options: Object;
constructor() {
this.canvasEl = document.getElementById('js-utility-11-canvas');
this.inputEl = <HTMLInputElement>document.getElementById('js-utility-11-input');
this.buttonEl = document.getElementById('js-utility-11-button');
this.options = {
errorCorrectionLevel: 'H',
margin: 0,
width: 240,
color: {
dark: '#010599FF',
light: '#FFBF60FF'
},
};
}
/**
* 初期化
*/
init(): Promise<void> {
if (!this.canvasEl) return;
this.onClickButton();
}
/**
* QRコード生成
* @param text QRコードにする文字列
*/
makeQRCode(text: string) {
return new Promise((resolve, reject) => {
QRCode.toCanvas(this.canvasEl, text, this.options, (error: Error) => {
if (error) console.error(error);
});
});
}
/**
* ボタンクリック時の挙動設定
*/
onClickButton(): void {
this.buttonEl.addEventListener('click', async () => {
const inputText = this.inputEl.value;
if (!inputText) {
// 入力がない場合、アラートを表示して処理を終了
alert('QRコードに変換する文字を入力してください');
return;
}
await this.makeQRCode(inputText);
});
}
}