@watone/wt-cli/client/assets/html-5bb7276c.js

watone tools

import{h as j,j as z,c as B,s as E,a as R}from"./index-74e805a1.js";import{q as U,r as x,u as J}from"./index-ac612723.js";import{r as n,P as N,o as P,a as V,c as q,l,m as s,d as e,U as D,g as y,v as w,x as g,W,p as $,q as A,b as H}from"./index-c614ad14.js";import{o as S}from"./index-57422ffb.js";import{_ as F}from"./_plugin-vue_export-helper-c27b6911.js";const M=f=>($("data-v-6aebfb61"),f=f(),A(),f),G={class:"html"},K=M(()=>H("h3",null,"在线编写HTML",-1)),O=M(()=>H("iframe",{id:"iframeResult",frameborder:"0",height:"100%",width:"100%",src:"iframe.html"},null,-1)),Q={__name:"html",setup(f){let c=n(!0),r=n(!0),u=n(!0),v=n(!0),T=N(()=>[{label:"布局",icon:"i-uil-google-play",items:[{label:c.value?"HTML 隐藏":"HTML 显示",icon:"i-uil-html5-alt",command:h=>{c.value=!c.value}},{label:r.value?"JS 隐藏":"JS 显示",icon:"i-uil-java-script",command:h=>{r.value=!r.value}},{label:u.value?"CSS 隐藏":"CSS 显示",icon:"i-uil-css3-simple",command:h=>{u.value=!u.value}},{label:v.value?"结果 隐藏":"结果 显示",icon:"i-uil-brackets-curly",command:h=>{v.value=!v.value}}]}]);const C=[j(),S],L=[z(),S],k=[B(),S];let d=n(`<h1>我的第一个HTML页面</h1>
我的第一个段落。`),m=n("console.log(1);"),p=n(`body {
  background: #000;
  color: #fff;
}`);function I(){let a=document.getElementById("iframeResult").contentWindow.document;const _=document.createElement("style");_.type="text/css",_.innerHTML=p.value;const b=document.createElement("script");b.innerHTML=m.value;const o=a.head;o.innerHTML="",o.appendChild(_);const i=a.body,t=document.createElement("div");t.innerHTML=d.value,i.innerHTML="",i.appendChild(t),i.appendChild(b)}return P(()=>{}),(h,a)=>{const _=J,b=U,o=R,i=E;return V(),q("div",G,[l(b,{model:e(T)},{start:s(()=>[K]),end:s(()=>[l(_,{label:"运行",onClick:I,icon:"i-uil-arrow-right text-3xl",iconPos:"right"})]),_:1},8,["model"]),l(i,{style:{height:"90vh"}},{default:s(()=>[!e(r)&&!e(c)&&!e(u)?W("",!0):(V(),D(o,{key:0},{default:s(()=>[l(i,{layout:"vertical"},{default:s(()=>[y(l(o,{size:20,minSize:5},{default:s(()=>[l(e(x),{modelValue:e(d),"onUpdate:modelValue":a[0]||(a[0]=t=>g(d)?d.value=t:d=t),placeholder:"请输入html",style:{height:"100%",width:"100%"},autofocus:!0,"indent-with-tab":!0,"tab-size":2,extensions:C},null,8,["modelValue"])]),_:1},512),[[w,e(c)]]),y(l(o,{class:"flex align-items-center justify-content-center",size:10},{default:s(()=>[l(e(x),{modelValue:e(m),"onUpdate:modelValue":a[1]||(a[1]=t=>g(m)?m.value=t:m=t),placeholder:"请输入javascript",style:{height:"100%",width:"100%"},"indent-with-tab":!0,"tab-size":2,extensions:L},null,8,["modelValue"])]),_:1},512),[[w,e(r)]]),y(l(o,{class:"flex align-items-center justify-content-center",size:10},{default:s(()=>[l(e(x),{modelValue:e(p),"onUpdate:modelValue":a[2]||(a[2]=t=>g(p)?p.value=t:p=t),placeholder:"请输入css",style:{height:"100%",width:"100%"},"indent-with-tab":!0,"tab-size":2,extensions:k},null,8,["modelValue"])]),_:1},512),[[w,e(u)]])]),_:1})]),_:1})),y(l(o,null,{default:s(()=>[O]),_:1},512),[[w,e(v)]])]),_:1})])}}},le=F(Q,[["__scopeId","data-v-6aebfb61"]]);export{le as default};