You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

38 lines
2.4 KiB

<div class="preview-panel-root">
<div class="preview-toolbar">
<span class="p-online" :class="{ ok: !!previewLoaded }">
<i class="dot"></i>{{ previewLoaded ? '在线' : (previewOnline === false ? '未启动' : '') }}
</span>
<span class="p-sep"></span>
<span class="p-group" title="设备 / 分辨率">
<ui-select class="p-device" :value="previewDevice" @confirm="onPreviewDevice($event.target.value)">
<option value="Default">设计分辨率</option>
<option value="FullScreen">全屏</option>
<option value="WebpageFullScreen">视口</option>
<option value="Xiaomi Redmi 8">Redmi8 (360x760)</option>
</ui-select>
</span>
<button class="pbtn" :class="{ on: previewRotated }" @click="onPreviewRotate" title="横竖屏切换"><ui-icon value="rotate"></ui-icon></button>
<span class="p-group p-fps" title="帧率上限">
<ui-icon value="setting"></ui-icon>
<ui-num-input class="p-fps-in" :value="String(previewFps)" @confirm="onPreviewFps($event.target.value)"></ui-num-input>
</span>
<span class="p-sep"></span>
<button class="pbtn" :class="{ on: previewPaused }" @click="onPreviewPause" :title="previewPaused ? '继续' : '暂停'"><ui-icon :value="previewPaused ? 'play' : 'pause'"></ui-icon></button>
<button class="pbtn" :class="{ on: previewMuted }" @click="onPreviewMute" title="静音 / 取消静音"><ui-icon value="music"></ui-icon></button>
<span class="spacer"></span>
<button class="pbtn major" @click="onLoadPreview" title="重新加载预览"><ui-icon value="refresh"></ui-icon></button>
</div>
<div class="preview-frame-wrap">
<div v-show="showPreview" ref="gameView" class="game-view"></div>
<div class="p-zoom" v-show="showPreview && previewZoom !== 1">{{ Math.round(previewZoom * 100) }}%</div>
<div class="preview-err" v-if="showPreview && previewRenderErr" @click="onLoadPreview" title="点击重新加载">{{ previewRenderErr }}</div>
<div class="preview-cover" v-if="showPreview && previewOnline === false">
<div class="cover-box">
<b>预览服务未启动</b>
<div>请在 Cocos Creator 中点击「浏览器预览」启动预览服务。</div>
<button @click="onLoadPreview">重试</button>
</div>
</div>
</div>
</div>