mirror of
https://github.com/anatolykopyl/vue-three-d-mockup.git
synced 2026-03-26 12:55:08 +00:00
16 lines
6.5 KiB
JavaScript
16 lines
6.5 KiB
JavaScript
import{M as l}from"./chunks/Mockup.5c49fc9b.js";import{s as o}from"./chunks/screen.fc899083.js";import{r as p,o as d,c,a as s,g as r,u as f,f as e,t as v,_ as b,d as D,p as F,h as y}from"./app.06d4fed4.js";const i=t=>(F("data-v-06f8abd3"),t=t(),y(),t),C=i(()=>s("h1",{id:"theming",tabindex:"-1"},[e("Theming "),s("a",{class:"header-anchor",href:"#theming","aria-hidden":"true"},"#")],-1)),u=D(`<p data-v-06f8abd3>The <code data-v-06f8abd3>phoneClr</code> and <code data-v-06f8abd3>lightClr</code> props are not reactive, and are intended to be set when the component is mounted. But if you want to you still can force a rerender by giving the <code data-v-06f8abd3>Mockup</code> a key.</p><h2 id="code-example" tabindex="-1" data-v-06f8abd3>Code example <a class="header-anchor" href="#code-example" aria-hidden="true" data-v-06f8abd3>#</a></h2><div class="language-vue" data-v-06f8abd3><span class="copy" data-v-06f8abd3></span><pre data-v-06f8abd3><code data-v-06f8abd3><span class="line" data-v-06f8abd3><span style="color:#89DDFF;" data-v-06f8abd3><</span><span style="color:#F07178;" data-v-06f8abd3>template</span><span style="color:#89DDFF;" data-v-06f8abd3>></span></span>
|
|
<span class="line" data-v-06f8abd3><span style="color:#A6ACCD;" data-v-06f8abd3> </span><span style="color:#89DDFF;" data-v-06f8abd3><</span><span style="color:#FFCB6B;" data-v-06f8abd3>Mockup</span><span style="color:#89DDFF;" data-v-06f8abd3> </span></span>
|
|
<span class="line" data-v-06f8abd3><span style="color:#89DDFF;" data-v-06f8abd3> </span><span style="color:#C792EA;" data-v-06f8abd3>screen</span><span style="color:#89DDFF;" data-v-06f8abd3>=</span><span style="color:#89DDFF;" data-v-06f8abd3>"</span><span style="color:#C3E88D;" data-v-06f8abd3>screen.png</span><span style="color:#89DDFF;" data-v-06f8abd3>"</span><span style="color:#89DDFF;" data-v-06f8abd3> </span></span>
|
|
<span class="line" data-v-06f8abd3><span style="color:#89DDFF;" data-v-06f8abd3> :</span><span style="color:#C792EA;" data-v-06f8abd3>phoneClr</span><span style="color:#89DDFF;" data-v-06f8abd3>=</span><span style="color:#89DDFF;" data-v-06f8abd3>"</span><span style="color:#A6ACCD;" data-v-06f8abd3>darkTheme</span><span style="color:#89DDFF;" data-v-06f8abd3> ? </span><span style="color:#89DDFF;" data-v-06f8abd3>'</span><span style="color:#C3E88D;" data-v-06f8abd3>#fff</span><span style="color:#89DDFF;" data-v-06f8abd3>'</span><span style="color:#89DDFF;" data-v-06f8abd3> : </span><span style="color:#89DDFF;" data-v-06f8abd3>'</span><span style="color:#C3E88D;" data-v-06f8abd3>#222</span><span style="color:#89DDFF;" data-v-06f8abd3>'"</span></span>
|
|
<span class="line" data-v-06f8abd3><span style="color:#89DDFF;" data-v-06f8abd3> :</span><span style="color:#C792EA;" data-v-06f8abd3>key</span><span style="color:#89DDFF;" data-v-06f8abd3>=</span><span style="color:#89DDFF;" data-v-06f8abd3>"</span><span style="color:#A6ACCD;" data-v-06f8abd3>darkTheme</span><span style="color:#89DDFF;" data-v-06f8abd3>"</span></span>
|
|
<span class="line" data-v-06f8abd3><span style="color:#89DDFF;" data-v-06f8abd3> /></span></span>
|
|
<span class="line" data-v-06f8abd3><span style="color:#89DDFF;" data-v-06f8abd3></</span><span style="color:#F07178;" data-v-06f8abd3>template</span><span style="color:#89DDFF;" data-v-06f8abd3>></span></span>
|
|
<span class="line" data-v-06f8abd3></span>
|
|
<span class="line" data-v-06f8abd3><span style="color:#89DDFF;" data-v-06f8abd3><</span><span style="color:#F07178;" data-v-06f8abd3>script</span><span style="color:#A6ACCD;" data-v-06f8abd3> </span><span style="color:#C792EA;" data-v-06f8abd3>setup</span><span style="color:#89DDFF;" data-v-06f8abd3>></span></span>
|
|
<span class="line" data-v-06f8abd3><span style="color:#89DDFF;font-style:italic;" data-v-06f8abd3>import</span><span style="color:#A6ACCD;" data-v-06f8abd3> </span><span style="color:#89DDFF;" data-v-06f8abd3>{</span><span style="color:#F07178;" data-v-06f8abd3> </span><span style="color:#A6ACCD;" data-v-06f8abd3>ref</span><span style="color:#F07178;" data-v-06f8abd3> </span><span style="color:#89DDFF;" data-v-06f8abd3>}</span><span style="color:#A6ACCD;" data-v-06f8abd3> </span><span style="color:#89DDFF;font-style:italic;" data-v-06f8abd3>from</span><span style="color:#A6ACCD;" data-v-06f8abd3> </span><span style="color:#89DDFF;" data-v-06f8abd3>'</span><span style="color:#C3E88D;" data-v-06f8abd3>vue</span><span style="color:#89DDFF;" data-v-06f8abd3>'</span><span style="color:#89DDFF;" data-v-06f8abd3>;</span></span>
|
|
<span class="line" data-v-06f8abd3><span style="color:#89DDFF;font-style:italic;" data-v-06f8abd3>import</span><span style="color:#A6ACCD;" data-v-06f8abd3> Mockup </span><span style="color:#89DDFF;font-style:italic;" data-v-06f8abd3>from</span><span style="color:#A6ACCD;" data-v-06f8abd3> </span><span style="color:#89DDFF;" data-v-06f8abd3>'</span><span style="color:#C3E88D;" data-v-06f8abd3>vue-three-d-mockup</span><span style="color:#89DDFF;" data-v-06f8abd3>'</span><span style="color:#89DDFF;" data-v-06f8abd3>;</span></span>
|
|
<span class="line" data-v-06f8abd3></span>
|
|
<span class="line" data-v-06f8abd3><span style="color:#C792EA;" data-v-06f8abd3>const</span><span style="color:#A6ACCD;" data-v-06f8abd3> darkTheme </span><span style="color:#89DDFF;" data-v-06f8abd3>=</span><span style="color:#A6ACCD;" data-v-06f8abd3> </span><span style="color:#82AAFF;" data-v-06f8abd3>ref</span><span style="color:#A6ACCD;" data-v-06f8abd3>(</span><span style="color:#FF9CAC;" data-v-06f8abd3>true</span><span style="color:#A6ACCD;" data-v-06f8abd3>)</span><span style="color:#89DDFF;" data-v-06f8abd3>;</span></span>
|
|
<span class="line" data-v-06f8abd3><span style="color:#89DDFF;" data-v-06f8abd3></</span><span style="color:#F07178;" data-v-06f8abd3>script</span><span style="color:#89DDFF;" data-v-06f8abd3>></span></span>
|
|
<span class="line" data-v-06f8abd3></span></code></pre></div>`,3),x=JSON.parse('{"title":"Theming","description":"","frontmatter":{},"headers":[{"level":2,"title":"Code example","slug":"code-example"}],"relativePath":"guide/theming.md","lastUpdated":1676666925000}'),h={name:"guide/theming.md"},m=Object.assign(h,{setup(t){const a=p(!0);return(_,n)=>(d(),c("div",null,[C,s("p",null,[(d(),r(l,{style:{width:"100%",height:"400px"},screen:f(o),phoneClr:a.value?"#fff":"#222",key:a.value},null,8,["screen","phoneClr"]))]),s("div",null,[s("button",{class:"button",onClick:n[0]||(n[0]=A=>a.value=!a.value)}," Toggle theme "),e(" Theme: "+v(a.value?"dark":"light"),1)]),u]))}});var E=b(m,[["__scopeId","data-v-06f8abd3"]]);export{x as __pageData,E as default};
|