mirror of
https://github.com/anatolykopyl/vue-three-d-mockup.git
synced 2026-03-26 12:55:08 +00:00
96 lines
29 KiB
HTML
96 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Guide | Vue 3D Mockup</title>
|
|
<meta name="description" content="📱 A 3D phone mockup component to showcase your apps">
|
|
<link rel="stylesheet" href="/vue-three-d-mockup/assets/style.986ff2fd.css">
|
|
<link rel="modulepreload" href="/vue-three-d-mockup/assets/chunks/screen.f0e1a01d.js">
|
|
<link rel="modulepreload" href="/vue-three-d-mockup/assets/app.b6ea30b2.js">
|
|
<link rel="modulepreload" href="/vue-three-d-mockup/assets/guide.md.c2b95ef9.lean.js">
|
|
|
|
<script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
|
</head>
|
|
<body>
|
|
<div id="app"><div class="Layout" data-v-6b5fd0a9><!--[--><!--]--><!--[--><span tabindex="-1" data-v-45f6ae50></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-45f6ae50> Skip to content </a><!--]--><!----><header class="VPNav no-sidebar" data-v-6b5fd0a9 data-v-0e356168><div class="VPNavBar" data-v-0e356168 data-v-8856f192><div class="container" data-v-8856f192><div class="VPNavBarTitle" data-v-8856f192 data-v-6a6f7ff6><a class="title" href="/vue-three-d-mockup/" data-v-6a6f7ff6><!----><!--[-->Vue 3D Mockup<!--]--></a></div><div class="content" data-v-8856f192><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-8856f192 data-v-a30758ee><span id="main-nav-aria-label" class="visually-hidden" data-v-a30758ee>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/vue-three-d-mockup/guide.html" data-v-a30758ee data-v-8fba5fa8 data-v-5704c677><!--[-->Guide<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="https://github.com/anatolykopyl/vue-three-d-mockup" target="_blank" rel="noopener noreferrer" data-v-a30758ee data-v-8fba5fa8 data-v-5704c677><!--[-->Github<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-8856f192 data-v-311055f2><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-311055f2 data-v-781f9d1b data-v-1dda4c9c><span class="check" data-v-1dda4c9c><span class="icon" data-v-1dda4c9c><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-781f9d1b><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-781f9d1b><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-8856f192 data-v-0562f5c0 data-v-8dccea88><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-8dccea88><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-8dccea88><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-8dccea88><div class="VPMenu" data-v-8dccea88 data-v-e73581a2><!----><!--[--><!--[--><!----><div class="group" data-v-0562f5c0><div class="item appearance" data-v-0562f5c0><p class="label" data-v-0562f5c0>Appearance</p><div class="appearance-action" data-v-0562f5c0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-0562f5c0 data-v-781f9d1b data-v-1dda4c9c><span class="check" data-v-1dda4c9c><span class="icon" data-v-1dda4c9c><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-781f9d1b><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-781f9d1b><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-8856f192 data-v-6f008456><span class="container" data-v-6f008456><span class="top" data-v-6f008456></span><span class="middle" data-v-6f008456></span><span class="bottom" data-v-6f008456></span></span></button></div></div></div><!----></header><!----><!----><div class="VPContent" id="VPContent" data-v-6b5fd0a9 data-v-a4c57a06><div class="VPDoc" data-v-a4c57a06 data-v-79ca2460><div class="container" data-v-79ca2460><div class="aside" data-v-79ca2460><div class="aside-curtain" data-v-79ca2460></div><div class="aside-container" data-v-79ca2460><div class="aside-content" data-v-79ca2460><div class="VPDocAside" data-v-79ca2460 data-v-779d834d><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-779d834d data-v-51e5a8ce><div class="content" data-v-51e5a8ce><div class="outline-marker" data-v-51e5a8ce></div><div class="outline-title" data-v-51e5a8ce>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-51e5a8ce><span class="visually-hidden" id="doc-outline-aria-label" data-v-51e5a8ce> Table of Contents for current page </span><ul class="root" data-v-51e5a8ce><!--[--><li style="" data-v-51e5a8ce><a class="outline-link" href="#installation" data-v-51e5a8ce>Installation</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#usage" data-v-51e5a8ce>Usage</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#avaliable-props" data-v-51e5a8ce>Avaliable props</a><!----></li><li style="" data-v-51e5a8ce><a class="outline-link" href="#caveats" data-v-51e5a8ce>Caveats</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-779d834d></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-79ca2460><div class="content-container" data-v-79ca2460><!--[--><!--]--><main class="main" data-v-79ca2460><div style="position:relative;" class="vp-doc _vue-three-d-mockup_guide" data-v-79ca2460><div><h1 id="guide" tabindex="-1">Guide <a class="header-anchor" href="#guide" aria-hidden="true">#</a></h1><h2 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-hidden="true">#</a></h2><div class="language-bash"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">npm install vue-three-d-mockup</span></span>
|
|
<span class="line"></span></code></pre></div><h2 id="usage" tabindex="-1">Usage <a class="header-anchor" href="#usage" aria-hidden="true">#</a></h2><p><div style="width:100%;height:400px;"></div></p><h3 id="simple-example" tabindex="-1">Simple example <a class="header-anchor" href="#simple-example" aria-hidden="true">#</a></h3><p><code>screen.png</code> is a static asset in the public folder.</p><div class="language-vue"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#FFCB6B;">Mockup</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">screen</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">screen.png</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
|
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Mockup </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">vue-three-d-mockup</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"></span></code></pre></div><h3 id="using-assets-as-the-screen" tabindex="-1">Using assets as the screen <a class="header-anchor" href="#using-assets-as-the-screen" aria-hidden="true">#</a></h3><ul><li><h4 id="in-vite-powered-projects" tabindex="-1">In vite powered projects <a class="header-anchor" href="#in-vite-powered-projects" aria-hidden="true">#</a></h4></li></ul><div class="language-vue"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#FFCB6B;">Mockup</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">screen</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">screenImage</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
|
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Mockup </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">vue-three-d-mockup</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
|
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> screenImage </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./assets/screen.png</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"></span></code></pre></div><ul><li><h4 id="in-vue-cli-powered-projects" tabindex="-1">In vue-cli powered projects <a class="header-anchor" href="#in-vue-cli-powered-projects" aria-hidden="true">#</a></h4></li></ul><div class="language-vue"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#FFCB6B;">Mockup</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">screen</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#82AAFF;">require</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./assets/screen.png</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">)</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
|
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Mockup </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">vue-three-d-mockup</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"></span></code></pre></div><h3 id="multiple-phones" tabindex="-1">Multiple phones <a class="header-anchor" href="#multiple-phones" aria-hidden="true">#</a></h3><p><div style="width:100%;height:400px;"></div></p><div class="language-vue"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#FFCB6B;">Mockup</span><span style="color:#89DDFF;"> </span></span>
|
|
<span class="line"><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">screen</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">[</span><span style="color:#A6ACCD;">screenImage</span><span style="color:#89DDFF;">, </span><span style="color:#A6ACCD;">screenImage</span><span style="color:#89DDFF;">]</span><span style="color:#89DDFF;">"</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">position</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">[</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"> {</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#F07178;">x</span><span style="color:#89DDFF;">: -</span><span style="color:#F78C6C;">50</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"> },</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"> {</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#F07178;">x</span><span style="color:#89DDFF;">: </span><span style="color:#F78C6C;">50</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"> },</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"> ]</span><span style="color:#89DDFF;">"</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">rotation</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">[{}, {</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#F07178;">y</span><span style="color:#89DDFF;">: -</span><span style="color:#F78C6C;">0.3</span><span style="color:#89DDFF;">,</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#F07178;">z</span><span style="color:#89DDFF;">: -</span><span style="color:#F78C6C;">0.06</span><span style="color:#89DDFF;">,</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"> }]</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span></span>
|
|
<span class="line"><span style="color:#89DDFF;"> /></span></span>
|
|
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Mockup </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">vue-three-d-mockup</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
|
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> screenImage </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./assets/screen.png</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"></span></code></pre></div><h3 id="video" tabindex="-1">Video <a class="header-anchor" href="#video" aria-hidden="true">#</a></h3><p><!----></p><div><video src="/vue-three-d-mockup/assets/screen.273a9703.mp4" muted autoplay loop style="position:fixed;top:0;left:0;visibility:hidden;"></video></div><div class="language-vue"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#FFCB6B;">Mockup</span><span style="color:#89DDFF;"> </span></span>
|
|
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">v-if</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">vidReady</span><span style="color:#89DDFF;">"</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">screen</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">videoElement</span><span style="color:#89DDFF;">"</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"> /></span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">video</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">screenVideo</span><span style="color:#89DDFF;">"</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">ref</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">videoElement</span><span style="color:#89DDFF;">"</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">canplay</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">vidReady</span><span style="color:#89DDFF;"> = </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">"</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">muted</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">autoplay</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">loop</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span></span>
|
|
<span class="line"><span style="color:#C3E88D;"> position: fixed;</span></span>
|
|
<span class="line"><span style="color:#C3E88D;"> top: 0;</span></span>
|
|
<span class="line"><span style="color:#C3E88D;"> left: 0;</span></span>
|
|
<span class="line"><span style="color:#C3E88D;"> visibility: hidden;</span></span>
|
|
<span class="line"><span style="color:#C3E88D;"> </span><span style="color:#89DDFF;">"</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"> ></</span><span style="color:#F07178;">video</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ref</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
|
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Mockup </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">vue-three-d-mockup</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
|
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> screenVideo </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./assets/screen.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> videoElement </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">ref</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">null</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
|
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> vidReady </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">ref</span><span style="color:#A6ACCD;">(</span><span style="color:#FF9CAC;">false</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
|
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
|
<span class="line"></span></code></pre></div><h2 id="avaliable-props" tabindex="-1">Avaliable props <a class="header-anchor" href="#avaliable-props" aria-hidden="true">#</a></h2><table><thead><tr><th>Prop</th><th>Type</th><th>Required</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>screen</code></td><td>String | Element | Array</td><td><code>true</code></td><td>none</td><td>Path to an image that will be displayed on the phones screen or the <code><video></code> element displayed on the phones screen. When using the latter there are <a href="#caveats">caveats</a>. Can also be an array of any of the options above.</td></tr><tr><td><code>lightClr</code></td><td>String</td><td><code>false</code></td><td><code>"white"</code></td><td>Color of the light as a CSS-style string.</td></tr><tr><td><code>phoneClr</code></td><td>String</td><td><code>false</code></td><td><code>"white"</code></td><td>Color of the phone as a CSS-style string.</td></tr><tr><td><code>position</code></td><td>Object | Array</td><td><code>false</code></td><td><code>{ x: 0, y: 0, z: 0 }</code></td><td>The position of the phone. Can also be an array if multiple screens specified.</td></tr><tr><td><code>rotation</code></td><td>Object | Array</td><td><code>false</code></td><td><code>{ x: -0.2, y: 0.3, z: 0.06 }</code></td><td>The orientation of the phone described in rotation values arround the 3 axes. Can also be an array if multiple screens specified.</td></tr></tbody></table><h2 id="caveats" tabindex="-1">Caveats <a class="header-anchor" href="#caveats" aria-hidden="true">#</a></h2><ul><li>The <code>screen</code> prop is unreactive, so when using it as a video it's important to only render the <code>Mockup</code> element when the video is loaded. Check out the examples above to see how to do this.</li><li>The video on the model will not be shown if the original <code><video></code> element is hidden with <code>display: none</code>, so use <code>visibility: hidden</code> instead.</li><li>The video may not be autoplaying if the original <code><video></code> element is scrolled off screen.</li><li>Even with the mentioned above workarounds, the video may not be working in Safari.</li></ul></div></div></main><footer class="VPDocFooter" data-v-79ca2460 data-v-04568844><div class="edit-info" data-v-04568844><!----><!----></div><!----></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter" data-v-6b5fd0a9 data-v-5b331722><div class="container" data-v-5b331722><p class="message" data-v-5b331722>Released under the GPL-3.0 license.</p><p class="copyright" data-v-5b331722></p></div></footer><!--[--><!--]--></div></div>
|
|
<script>__VP_HASH_MAP__ = JSON.parse("{\"guide.md\":\"c2b95ef9\",\"index.md\":\"44663209\"}")</script>
|
|
<script type="module" async src="/vue-three-d-mockup/assets/app.b6ea30b2.js"></script>
|
|
|
|
</body>
|
|
</html> |