<template> <div class="root"> <div> <div class="button1" @click="pickImagesOrSelect()"> 写真選択 or 写真撮影 </div> <div class="resetButton" @click="captures = []">リセット</div> <div class="captureWrap"> <div class="capture" v-for="c in captures" v-bind:key="c.d"> <img v-bind:src="c" /> </div> <p>{{ dataUrlStr…</p></div></div></div></template>

<template> <div class="root"> <q-dialog v-model="seamless" seamless position="bottom"> <div class="dialog"> <div class="container"> <div class="stepbar"> <div class="stepbarwrap"> <div class="steptitle"> <div class="stepcircle"> <span>STEP<br />1</span> </div> <p class="title">テキスト1</p> </div> </div></div></div></div></q-dialog></div></template>

完成形 コード <template> <div class="root"> <div class="photo"> <video ref="video" id="video"></video> <canvas ref="canvas" id="canvas"></canvas> <div class="l2"> <canvas id="camera_record_box"></canvas> </div> </div> <div> <div class="button1" @click="capture()">写真を撮影</div> </div></div></template>