code-size 相关问题


VueJS [电子邮件受保护] 组件 v-model 最初不会更新父级

我有一个父子组件设置来测试 v-model。当您输入值时,子级会更新父级,但最初不会。 家长: 从“vue”导入{ref}; 导入文本输入...</desc> <question vote="0"> <p>我有一个父子组件设置来测试 v-model。当您输入值时,子级会更新父级,但最初不会。</p> <p>家长:</p> <pre><code>&lt;script setup&gt; import { ref } from &#39;vue&#39;; import TextInput from &#39;./TextInput.vue&#39;; const size = ref(1); const color = ref(&#39;red&#39;); &lt;/script&gt; &lt;template&gt; &lt;TextInput v-model:size=&#34;size&#34; v-model:color.capitalize=&#34;color&#34; /&gt; &lt;div :style=&#34;{ fontSize: size + &#39;em&#39;, color: color }&#34;&gt; &lt;!-- Question 1: this line shows &#34;red&#34; but &#34;Red&#34; is what I want initially --&gt; &lt;p&gt;{{ size }} {{ color }}&lt;/p&gt; &lt;/div&gt; &lt;/template&gt; </code></pre> <p>子:TextInput.vue</p> <pre><code>&lt;script setup&gt; import { ref } from &#39;vue&#39;; const size = defineModel(&#39;size&#39;); const [color, modifier] = defineModel(&#39;color&#39;, { set(value) { if(modifier.capitalize) { return value.charAt(0).toUpperCase() + value.slice(1); } return value; }, //only this forces color to upper case on start in the input get(value) { if(modifier.capitalize) { return value.charAt(0).toUpperCase() + value.slice(1); } return value; } }); &lt;/script&gt; &lt;template&gt; &lt;input v-model=&#34;size&#34;&gt; &lt;input v-model=&#34;color&#34;&gt; &lt;/template&gt; </code></pre> <p>问题2: 如果我在defineModel中省略“color”(“color”,{...,我会收到以下错误</p> <p>[Vue warn]:无关的非 props 属性(颜色、colorModifiers)被传递给组件但无法自动继承,因为组件渲染片段或文本根节点。</p> <pre><code>at &lt;TextInput size=1 onUpdate:size=fn color=&#34;red&#34; ... &gt; at &lt;ComponentVModel&gt; at &lt;App&gt; </code></pre> <p>如果我只保留</p> <pre><code>&lt;input v-model=&#34;color&#34;&gt; </code></pre> <p>line,为了让它不是片段,根本不更新。</p> </question> <answer tick="false" vote="0"> <p>问题 1:在调用子元素中的 v-model setter 之前,<pre><code>&lt;p&gt;</code></pre> 元素中的大写不会发生。 <strong>设置器是同步回父级的设置器</strong>。由于在输入接收到来自用户的一些文本之前不会调用设置器,因此父级中的 <pre><code>&lt;p&gt;</code></pre> 元素将显示初始值,在您的情况下为“红色”。</p> <p>问题 2:defineModel 根据第一个参数字符串“color”声明一个 prop。该道具旨在匹配父级<strong>上的</strong>v模型的参数,即<pre><code>v-model:color</code></pre>。从defineModel中删除“颜色”意味着父v模型必须从<pre><code>v-model:color</code></pre>更改为<pre><code>v-model</code></pre></p> </answer> </body></html>


为什么 .className = .... 不起作用,而 classList.add() 却起作用?

.youtube-文本{ 字体系列:Arial; 字体大小:更大; } .订阅按钮{ 字体系列...</desc> <question vote="0"> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; .youtube-text { font-family: Arial; font-size: larger; } .subscribe-button { font-family: &#39;Arial Narrow Bold&#39;; font-size: large; color: white; background-color: black; padding-left: 12px; padding-top: 12px ; padding-bottom: 12px ; padding-right: 12px; border-radius: 20px; } .is-subscribed { font-family: &#39;Arial Narrow Bold&#39;; font-size: large; color: black; background-color: white; padding-left: 12px; padding-top: 12px ; padding-bottom: 12px ; padding-right: 12px; border-radius: 20px; } &lt;/style&gt; &lt;title&gt; &lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;p2&gt;Youtube Subscribe Button&lt;/p2&gt;&lt;br&gt;&lt;Br&gt; &lt;button class = &#39;subscribe-button&#39; onclick=&#34; subscribeButton(); &#34;&gt;Subscribe&lt;/button&gt; &lt;script async&gt; function subscribeButton() { const subButton = document.querySelector(&#39;.subscribe-button&#39;); if (subButton.innerHTML === &#39;Subscribe&#39;){ subButton.innerHTML = &#39;Subscribed&#39;; subButton.classList.add(&#39;is-subscribed&#39;); } else { subButton.innerHTML = &#39;Subscribe&#39;; subButton.classList.remove(&#39;is-subscribed&#39;); } } &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; .youtube-text { font-family: Arial; font-size: larger; } .subscribe-button { font-family: &#39;Arial Narrow Bold&#39;; font-size: large; color: white; background-color: black; padding-left: 12px; padding-top: 12px ; padding-bottom: 12px ; padding-right: 12px; border-radius: 20px; } .is-subscribed { font-family: &#39;Arial Narrow Bold&#39;; font-size: large; color: black; background-color: white; padding-left: 12px; padding-top: 12px ; padding-bottom: 12px ; padding-right: 12px; border-radius: 20px; } &lt;/style&gt; &lt;title&gt; &lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;p2&gt;Youtube Subscribe Button&lt;/p2&gt;&lt;br&gt;&lt;Br&gt; &lt;button class = &#39;subscribe-button&#39; onclick=&#34; subscribeButton(); &#34;&gt;Subscribe&lt;/button&gt; &lt;script async&gt; function subscribeButton() { const subButton = document.querySelector(&#39;.subscribe-button&#39;); if (subButton.innerHTML === &#39;Subscribe&#39;){ subButton.innerHTML = &#39;Subscribed&#39;; subButton.className = &#39;is-subscribed&#39;; } else { subButton.innerHTML = &#39;Subscribe&#39;; subButton.className = &#39;subscribe-button&#39;; } } &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>你好, 我刚刚开始使用 JS,想知道我遇到的这个问题。顶部的代码有效,底部的代码无效,第一次单击时,它确实将类更改为已订阅,但是当我按下按钮,它给出了一个错误,并且不再改变它,我只是想知道为什么会这样。</p> </question> <answer tick="false" vote="0"> <p>默认的 DOM elemnt 对象没有名为 <pre><code>className</code></pre> 的属性。将 classList 属性与 <pre><code>.add()</code></pre> 和 <pre><code>.remove()</code></pre> 方法结合使用。</p> </answer> <answer tick="false" vote="0"> <blockquote> <p>但是当我按下按钮时,它给出了一个错误并且不再改变它</p> </blockquote> <p>当您按下按钮时,代码会按类查找元素:</p> <pre><code>const subButton = document.querySelector(&#39;.subscribe-button&#39;); </code></pre> <p>但是该类没有这样的元素。当您设置 <em><code>className</code></em> 时,您<pre>删除了</pre>该类:</p> <pre><code>subButton.className = &#39;is-subscribed&#39;; </code></pre> <p>这<em>用</em><code>class</code><pre>替换了</pre>整个<pre><code>is-subscribed</code></pre>,而不是<em>添加</em>到类列表中。</p> </answer> </body></html>


标签错误:渲染时出现 React JSX 样式标签错误

这是我的反应渲染函数 渲染:函数(){ 返回 ( 某事 .rr{ 红色; ...</desc> <question vote="94"> <p>这是我的反应渲染函数</p> <pre><code>render:function(){ return ( &lt;div&gt; &lt;p className=&#34;rr&#34;&gt;something&lt;/p&gt; &lt;style&gt; .rr{ color:red; } &lt;/style&gt; &lt;/div&gt; ) } </code></pre> <p>这给了我这个错误</p> <blockquote> <p>JSX:错误:解析错误:第 22 行:意外的标记:</p> </blockquote> <p>这里出了什么问题? 我可以将完整的普通 CSS 嵌入到 React 组件中吗?</p> </question> <answer tick="false" vote="130"> <p>使用 es6 模板字符串(允许换行)很容易做到。在你的渲染方法中:</p> <pre><code>const css = ` .my-element { background-color: #f00; } ` return ( &lt;div className=&#34;my-element&#34;&gt; &lt;style&gt;{css}&lt;/style&gt; some content &lt;/div&gt; ) </code></pre> <p>至于用例,我正在为一个 div 执行此操作,其中包含一些用于调试的复选框,我希望将其包含在一个文件中,以便稍后轻松删除。</p> </answer> <answer tick="true" vote="73"> <p>JSX 只是 javascript 的一个小扩展,它不是自己完整的模板语言。所以你会像在 javascript 中那样做:</p> <pre><code>return ( &lt;div&gt; &lt;p className=&#34;rr&#34;&gt;something&lt;/p&gt; &lt;style&gt;{&#34;\ .rr{\ color:red;\ }\ &#34;}&lt;/style&gt; &lt;/div&gt; ) </code></pre> <p><a href="http://jsfiddle.net/r6rqz068/" rel="noreferrer">http://jsfiddle.net/r6rqz068/</a></p> <p>但是根本没有充分的理由这样做。</p> </answer> <answer tick="false" vote="30"> <p>内联样式最好直接应用于组件 JSX 模板:</p> <pre><code>return ( &lt;div&gt; &lt;p style={{color: &#34;red&#34;}}&gt;something&lt;/p&gt; &lt;/div&gt; ); </code></pre> <p>演示:<a href="http://jsfiddle.net/chantastic/69z2wepo/329/" rel="noreferrer">http://jsfiddle.net/chantastic/69z2wepo/329/</a></p> <hr/> <p><strong>注意:JSX 不支持 style 属性的 HTML 语法</strong></p> <p>使用驼峰式属性名称声明属性,例如,</p> <pre><code>{ color: &#34;red&#34;, backgroundColor: &#34;white&#34; } </code></pre> <p>进一步阅读此处:<a href="http://facebook.github.io/react/tips/inline-styles.html" rel="noreferrer">http://facebook.github.io/react/tips/inline-styles.html</a></p> </answer> <answer tick="false" vote="20"> <p>这可以通过使用反引号“`”来完成,如下所示</p> <pre><code>return (&lt;div&gt; &lt;p className=&#34;rr&#34;&gt;something&lt;/p&gt; &lt;style&gt;{` .rr{ color:red; } `}&lt;/style&gt; &lt;/div&gt;) </code></pre> </answer> <answer tick="false" vote="10"> <p>“class”是 JavaScript 中的保留字。而是使用“className”。</p> <p>此外,您必须记住您使用的是 JSX,而不是 HTML。我不相信 jsx 会解析你的标签。更好的方法是使用您的样式创建一个对象,然后将其应用为样式(见下文)。</p> <pre><code>var styles = { color:&#34;red&#34;; } return ( &lt;div&gt; &lt;p style={styles}&gt;something&lt;/p&gt; &lt;/div&gt; ) </code></pre> </answer> <answer tick="false" vote="8"> <ol> <li>创建一个函数来处理插入样式标签。</li> <li>将所需的 CSS 添加到字符串变量中。</li> <li><p>将变量添加到 <pre><code>&lt;style&gt;</code></pre> 标记内返回的 JSX。</p> <pre><code>renderPaypalButtonStyle() { let styleCode = &#34;#braintree-paypal-button { margin: 0 auto; }&#34; return ( &lt;style&gt;{ styleCode }&lt;/style&gt; ) } </code></pre></li> </ol> </answer> <answer tick="false" vote="4"> <p>这就是我所做的:</p> <pre><code>render(){ var styleTagStringContent = &#34;.rr {&#34;+ &#34;color:red&#34;+ &#34;}&#34;; return ( &lt;style type=&#34;text/css&#34;&gt; {styleTagStringContent} &lt;/style&gt; ); </code></pre> </answer> <answer tick="false" vote="0"> <p>经过一番摸索和尝试,终于找到了解决方案。 关键是危险的SetInnerHTML。 代码如下:</p> <pre><code> &lt;script src=&#34;https://pie-meister.github.io/PieMeister-with Progress.min.js&#34;&gt;&lt;/script&gt; import React from &#39;react&#39; const style = ` &lt;pie-chart class=&#34;nested&#34; offset=&#34;top&#34;&gt; &lt;style&gt; path { stroke-linecap: round; stroke-width: 90; } [color1] { stroke: #BFBDB2; stroke-width: 50; } [color2] { stroke: #26BDD8; stroke-width: 60; } [color3] { stroke: #824BF1; } [part=&#34;path&#34;]:not([y]) { stroke: #BFBDB2; stroke-width: 60; opacity: 0.4; } &lt;/style&gt; &lt;slice color1 size=&#34;100%&#34; radius=&#34;200&#34;&gt;&lt;!--No label--&gt;&lt;/slice&gt; &lt;slice color1 size=&#34;88%&#34; radius=&#34;200&#34; y=&#34;65&#34;&gt;&lt;tspan&gt; $size&lt;/tspan&gt;&lt;/slice&gt; &lt;slice color2 size=&#34;100%&#34; radius=&#34;100&#34;&gt; &lt;/slice&gt; &lt;slice color2 size=&#34;40%&#34; radius=&#34;100&#34; y=&#34;165&#34;&gt;&lt;tspan&gt; $size&lt;/tspan&gt;&lt;/slice&gt; &lt;slice color3 size=&#34;100%&#34; radius=&#34;0&#34;&gt; &lt;/slice&gt; &lt;slice color3 size=&#34;10%&#34; radius=&#34;0&#34; y=&#34;265&#34;&gt;&lt;tspan&gt; $size&lt;/tspan&gt;&lt;/slice&gt; &lt;/pie-chart&gt;` export default function Styles() { return ( &lt;div dangerouslySetInnerHTML={{__html:style}}/&gt; ) } </code></pre> </answer> <answer tick="false" vote="-3"> <pre><code>import styled from &#39;styled-components; return ( &lt;div&gt; &lt;Test&gt;something&lt;/Test&gt; &lt;/div&gt; ) </code></pre> <p>下一步:</p> <pre><code>const Test = styled.p` color: red `; </code></pre> </answer> </body></html>


HTML如何使用javascript清除输入?

我有这个输入,每次我们点击它里面的时候它都会被清除。 问题: 我只想在 value = [email protected] 时清除 函数clearThis(tar...</desc> <question vote="47"> <p>我有这个INPUT,每次我们点击它里面它就会清除。</p> <p>问题: 我只想在值 = <a href="/cdn-cgi/l/email-protection" data-cfemail="2d485548405d41426d485548405d4142034e4240">[电子邮件受保护]</a></p> 时清除 <pre><code>&lt;script type=&#34;text/javascript&#34;&gt; function clearThis(target) { target.value= &#34;&#34;; } &lt;/script&gt; &lt;input type=&#34;text&#34; name=&#34;email&#34; value=&#34;<a href="/cdn-cgi/l/email-protection" data-cfemail="9cf9e4f9f1ecf0f3dcf9e4f9f1ecf0f3b2fff3f1">[email protected]</a>&#34; size=&#34;30&#34; onfocus=&#34;clearThis(this)&#34;&gt; </code></pre> <p>有人可以帮我做到这一点吗? 我不知道如何比较,我已经尝试过但没有成功。</p> </question> <answer tick="true" vote="57"> <pre><code>&lt;script type=&#34;text/javascript&#34;&gt; function clearThis(target) { if (target.value == &#39;<a href="/cdn-cgi/l/email-protection" data-cfemail="4a2f322f273a26250a2f322f273a262564292527">[email protected]</a>&#39;) { target.value = &#34;&#34;; } } &lt;/script&gt; </code></pre> <p>这真的是您想要的吗?</p> </answer> <answer tick="false" vote="18"> <p>对我来说这是最好的方法:</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code>&lt;form id=&#34;myForm&#34;&gt; First name: &lt;input type=&#34;text&#34; name=&#34;fname&#34; value=&#34;Demo&#34;&gt;&lt;br&gt; Last name: &lt;input type=&#34;text&#34; name=&#34;lname&#34;&gt;&lt;br&gt;&lt;br&gt; &lt;input type=&#34;button&#34; onclick=&#34;myFunction()&#34; value=&#34;Reset form&#34;&gt; &lt;/form&gt; &lt;script&gt; function myFunction() { document.getElementById(&#34;myForm&#34;).reset(); } &lt;/script&gt;</code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="4"> <p>您可以使用属性<pre><code>placeholder</code></pre></p> <pre><code>&lt;input type=&#34;text&#34; name=&#34;email&#34; placeholder=&#34;<a href="/cdn-cgi/l/email-protection" data-cfemail="42273a272f322e2d02273a272f322e2d6c212d2f">[email protected]</a>&#34; size=&#34;30&#34; /&gt; </code></pre> <p>或者在旧版浏览器上尝试这个</p> <pre><code>&lt;input type=&#34;text&#34; name=&#34;email&#34; value=&#34;<a href="/cdn-cgi/l/email-protection" data-cfemail="bdd8c5d8d0cdd1d2fdd8c5d8d0cdd1d293ded2d0">[email protected]</a>&#34; size=&#34;30&#34; onblur=&#34;if(this.value==&#39;&#39;){this.value=&#39;<a href="/cdn-cgi/l/email-protection" data-cfemail="aacfd2cfc7dac6c5eacfd2cfc7dac6c584c9c5c7">[email protected]</a>&#39;;}&#34; onfocus=&#34;if(this.value==&#39;<a href="/cdn-cgi/l/email-protection" data-cfemail="03667b666e736f6c43667b666e736f6c2d606c6e">[email protected]</a>&#39;){this.value=&#39;&#39;;}&#34;&gt; </code></pre> </answer> <answer tick="false" vote="4"> <p>您可以使用占位符,因为它可以为您做到这一点,但对于不支持占位符的旧浏览器,请尝试以下操作:</p> <pre><code>&lt;script&gt; function clearThis(target) { if (target.value == &#34;<a href="/cdn-cgi/l/email-protection" data-cfemail="402538252d302c2f002538252d302c2f6e232f2d">[email protected]</a>&#34;) { target.value = &#34;&#34;; } } function replace(target) { if (target.value == &#34;&#34; || target.value == null) { target.value == &#34;<a href="/cdn-cgi/l/email-protection" data-cfemail="73160b161e031f1c33160b161e031f1c5d101c1e">[email protected]</a>&#34;; } } &lt;/script&gt; &lt;input type=&#34;text&#34; name=&#34;email&#34; value=&#34;<a href="/cdn-cgi/l/email-protection" data-cfemail="ddb8a5b8b0adb1b29db8a5b8b0adb1b2f3beb2b0">[email protected]</a>&#34; size=&#34;x&#34; onfocus=&#34;clearThis(this)&#34; onblur=&#34;replace(this)&#34; /&gt; </code></pre> <p>代码说明:当文本框获得焦点时,清除该值。当文本框未聚焦且文本框为空时,替换值。</p> <p>我希望这有效,我一直遇到同样的问题,但后来我尝试了这个,它对我有用。</p> </answer> <answer tick="false" vote="0"> <p>试试这个:</p> <pre><code>&lt;script type=&#34;text/javascript&#34;&gt; function clearThis(target){ if(target.value == &#34;<a href="/cdn-cgi/l/email-protection" data-cfemail="67021f020a170b0827021f020a170b084904080a">[email protected]</a>&#34;) { target.value= &#34;&#34;; } } &lt;/script&gt; </code></pre> <p></p> </answer> <answer tick="false" vote="0"> <pre><code>&lt;script type=&#34;text/javascript&#34;&gt; function clearThis(target){ if (target.value === &#34;<a href="/cdn-cgi/l/email-protection" data-cfemail="a2c7dac7cfd2cecde2c7dac7cfd2cecd8cc1cdcf">[email protected]</a>&#34;) { target.value= &#34;&#34;; } } &lt;/script&gt; &lt;input type=&#34;text&#34; name=&#34;email&#34; value=&#34;<a href="/cdn-cgi/l/email-protection" data-cfemail="c7a2bfa2aab7aba887a2bfa2aab7aba8e9a4a8aa">[email protected]</a>&#34; size=&#34;30&#34; onfocus=&#34;clearThis(this)&#34;&gt; </code></pre> <p>在这里尝试一下:<a href="http://jsfiddle.net/2K3Vp/" rel="nofollow">http://jsfiddle.net/2K3Vp/</a></p> </answer> <answer tick="false" vote="0"> <p>你不需要为此烦恼。就写吧</p> <pre><code>&lt;input type=&#34;text&#34; name=&#34;email&#34; placeholder=&#34;<a href="/cdn-cgi/l/email-protection" data-cfemail="06637e636b766a6946637e636b766a692865696b">[email protected]</a>&#34; size=&#34;30&#34;&gt; </code></pre> <p>用占位符替换该值</p> </answer> <answer tick="false" vote="0"> <p>不要使用 <strong>placeholder</strong> 属性清除名称文本,这是一个很好的做法</p> <pre><code>&lt;input type=&#34;text&#34; placeholder=&#34;name&#34; name=&#34;name&#34;&gt; </code></pre> </answer> <answer tick="false" vote="0"> <p>我对所有这些答案感到惊讶,没有人提到最简单、现代的方法来做到这一点:</p> <pre><code>&lt;input type=&#34;text&#34; placeholder=&#34;Your Name&#34; onfocus=&#34;this.placeholder=&#39;&#39;&#34; onblur=&#34;this.placeholder=&#39;Your Name&#39;&#34; &gt; </code></pre> <p>仅当您想在用户单击远离输入后恢复原始占位符时,才需要 <pre><code>onblur</code></pre>。</p> </answer> </body></html>


在 HTML 文档中嵌入 TypeScript 代码

是否可以在网页中嵌入 TypeScript 代码?我想将 TypeScript 代码嵌入到脚本标签中,如下所示(以便它自动编译为 Javascript): <p>是否可以在网页中嵌入 TypeScript 代码?我想将 TypeScript 代码嵌入到脚本标签中,如下所示(以便它自动编译为 Javascript):</p> <pre><code>&lt;script type = &#34;text/typescript&#34;&gt; //TypeScript code goes here &lt;/script&gt; </code></pre> </question> <answer tick="true" vote="28"> <p>实际上有几个项目允许您使用类似的 TypeScript 代码 - <a href="https://github.com/niutech/typescript-compile" rel="noreferrer">TypeScript Compile</a>、<a href="https://github.com/ComFreek/ts-htaccess" rel="noreferrer">ts-htaccess</a>。</p> <p>这里的问题是 .ts 代码应该编译成 JavaScript - 它可以在客户端完成(速度慢;整个 TSC 也应该加载到客户端)或在服务器端完成(显然更快,而且它更快)在编译代码上利用缓存要容易得多)。</p> </answer> <answer tick="false" vote="18"> <p>这是我编写的版本,<strong>直接</strong>使用 Microsoft/TypeScript/master 的版本,因此它始终保持最新:<a href="https://github.com/basarat/typescript-script" rel="noreferrer">https://github.com/basarat/typescript-script</a></p> <p>您甚至可以将 <pre><code>ts</code></pre> 指向您可能拥有的任何其他 TypeScript 版本,它会正常工作 🌹</p> </answer> <answer tick="false" vote="6"> <p>已经为此目的开发了一个 JavaScript 库 - 它称为 <a href="https://github.com/niutech/typescript-compile" rel="noreferrer">TypeScript Compile</a>,它允许将 Typescript 嵌入到 HTML 中(如上所示。)</p> </answer> <answer tick="false" vote="0"> <p>我写这篇文章的目的是为了在浏览器中编译 TypeScript,以便我可以编写快速简单的示例来分享。</p> <p><a href="https://github.com/Sean-Bradley/text-typescript" rel="nofollow noreferrer">https://github.com/Sean-Bradley/text-typescript</a></p> <p>使用,</p> <pre><code>&lt;script type=&#34;text/typescript&#34;&gt; // Your TypeScript code here &lt;/script&gt; </code></pre> <p>并包含依赖项。</p> <pre><code>&lt;script src=&#34;https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="67131e17021404150e1713275249544954">[email protected]</a>&#34;&gt;&lt;/script&gt; &lt;script defer src=&#34;https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="3743524f431a434e47524454455e4743770619041907">[email protected]</a>&#34;&gt;&lt;/script&gt; </code></pre> <p>一个完整的示例,您可以复制/粘贴到 HTML 文档中并在本地尝试。</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang=&#34;en&#34;&gt; &lt;head&gt; &lt;meta charset=&#34;utf-8&#34; /&gt; &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1&#34; /&gt; &lt;title&gt;&#34;text/typescript&#34; example&lt;/title&gt; &lt;meta name=&#34;description&#34; content=&#34;Transpiling and executing TypeScript in the browser&#34; /&gt; &lt;style&gt; body { overflow: hidden; margin: 0px; font-size: 15vw; } &lt;/style&gt; &lt;script type=&#34;text/typescript&#34;&gt; function foo(bar: string) { return &#34;Hello &#34; + bar; } let baz = &#34;World!&#34;; document.getElementById(&#34;root&#34;).innerHTML = foo(baz); &lt;/script&gt; &lt;script src=&#34;https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="13676a63766070617a636753263d203d20">[email protected]</a>&#34;&gt;&lt;/script&gt; &lt;script defer src=&#34;https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="ec98899498c198959c899f8f9e859c98acddc2dfc2dc">[email protected]</a>&#34;&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&#34;root&#34;&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>你可以看到它在这里、现在、今天发挥作用。</p> <p><a href="https://editor.sbcode.net/f1f4b5a73ec40283d1ddb37bb1e71f7e4e31b487" rel="nofollow noreferrer">https://editor.sbcode.net/f1f4b5a73ec40283d1ddb37bb1e71f7e4e31b487</a></p> </answer> </body></html>


当我们在循环条件中使用 size() 函数时,它会计算每次迭代的大小吗?

例如, for(int i=1;i<=arr.size();i++) In the above example, does the arr.size() executes for every iteration or it calculates the size once and stores it somewhere for future iterations. I...


尝试在 /etc/docker/daemon.json 中设置 max-size 时 Docker 服务未启动

docker 服务似乎无法识别 daemon.json 文件中的 max-size log-opts 设置,因此无法启动。 /etc/docker/daemon.json { “日志驱动程序”:“系统日志”...


如何检查该值是否属于打字稿类型?

有这样的东西 类型大小 = '大' | '小的'; 如果值为 Size,如何测试“测试” const 测试 = '等于'; if(测试尺寸){ //不幸的是,“Size”仅指一种类型,但它是...


防止打开的窗口覆盖 opener 的 `close` 方法

我有一个 test1.html 文件,仅包含以下代码: janela = window.open("http://localhost/test2.html","_blank","width=1000,height=400,left=600,top=0"); </...</desc> <question vote="1"> <p>我有一个 <pre><code>test1.html</code></pre> 文件,其中仅包含以下代码:</p> <pre><code>&lt;script&gt; janela = window.open(&#34;http://localhost/test2.html&#34;,&#34;_blank&#34;,&#34;width=1000,height=400,left=600,top=0&#34;); &lt;/script&gt; </code></pre> <p>上面的代码将打开窗口<pre><code>test2.html</code></pre>,其中包含以下代码:</p> <pre><code>&lt;script&gt; opener.window.janela.close = null; &lt;/script&gt; </code></pre> <p>现在,在窗口 <pre><code>test1.html</code></pre> 上,如果我尝试关闭刚刚使用 <pre><code>janela.close()</code></pre> 打开的窗口,我将无法这样做。</p> <p>我知道在 <pre><code>noopener</code></pre> 方法中使用 <pre><code>window.open</code></pre> 会阻止 <pre><code>test2.html</code></pre> 访问 <pre><code>test1.html</code></pre> 但是它也会阻止我在 <pre><code>test1.html</code></pre> 关闭 <pre><code>test2.html</code></pre>。</p> <p>那么我怎样才能可靠地打开 <pre><code>window</code></pre> 并能够在将来自信地关闭它?</p> <p><strong>根据@mplungjan</strong></p>进行编辑 <p>在@mplungjan的帮助下,我做到了:</p> <pre><code>myClose = window.close; janela = window.open(&#34;https://a2eestrutural.eng.br/?fdfk&#34;,&#34;_blank&#34;,&#34;width=1000,height=400,left=600,top=20&#34;); janela.myClose = window.myClose; </code></pre> <p>窗口打开后,我尝试执行<pre><code>janela.myClose();</code></pre>并收到此错误消息:</p> <pre><code>An attempt was made to break through the security policy of the user agent. </code></pre> <p>知道我该如何继续吗?</p> </question> <answer tick="false" vote="0"> <p>为什么要有这个代码?如果您可以控制打开的内容...</p> <p>无论如何,请在打开窗口的脚本之前尝试此操作</p> <pre><code>const myClose = window.close; const janela = window.open(&#34;http://localhost/test2.html&#34;,&#34;_blank&#34;,&#34;width=1000,height=400,left=600,top=0&#34;); .... janela.myClose() </code></pre> </answer> </body></html>


WinUI 3 - 以编程方式滚动到 ItemsControl 中的虚拟化项目(不是 ListView)

我正在使用一个相当典型的模板创建一个自定义 ItemsControl 子类: <Setter Property="ItemsPanel"> <Setter....</desc> <question vote="0"> <p>我正在使用一个相当典型的模板创建一个自定义的 <pre><code>ItemsControl</code></pre> 子类:</p> <pre><code>&lt;Style TargetType=&#34;local:MyControl&#34;&gt; &lt;Setter Property=&#34;ItemsPanel&#34;&gt; &lt;Setter.Value&gt; &lt;ItemsPanelTemplate&gt; &lt;ItemsStackPanel Orientation=&#34;Vertical&#34; /&gt; &lt;!-- or VirtualizingStackPanel; not really sure why there are two different seemingly identical virtualization panels --&gt; &lt;/ItemsPanelTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;Setter Property=&#34;Template&#34;&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType=&#34;local:MyControl&#34;&gt; &lt;ScrollViewer x:Name=&#34;ScrollViewer&#34; VerticalScrollBarVisibility=&#34;Auto&#34; HorizontalScrollBarVisibility=&#34;Auto&#34;&gt; &lt;ItemsPresenter /&gt; &lt;/ScrollViewer&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; </code></pre> <p>其中 <pre><code>MyControl</code></pre> 是 <pre><code>ItemsControl</code></pre> 的子类。</p> <p>我需要一种通过内容甚至索引以编程方式滚动到项目的方法,这可能尚未在屏幕上实现,因为屏幕上的项目高度不统一。</p> <p>对于 <pre><code>ListView</code></pre>,我可以使用 <pre><code>ScrollIntoView</code></pre>,但我不想从 <pre><code>ListView</code></pre> 派生,因为它带有很多我想要替换/覆盖的功能。</p> <p>在WPF中<pre><code>VirtualizingStackPanel</code></pre>有<a href="https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.virtualizingpanel.bringindexintoviewpublic?view=windowsdesktop-8.0" rel="nofollow noreferrer">BringIndexIntoViewPublic</a>,但现在似乎不存在了,我在WinUI<pre><code>VirtualizingStackPanel</code></pre>或<pre><code>ItemsStackPanel</code></pre>中找不到任何等效的东西。</p> <p>在 WinUI 源代码中 <pre><code>ListView.ScrollIntoView</code></pre> 似乎在 <pre><code>ItemsPresenter</code></pre> 中使用了很多我无法访问的内部/本机功能。</p> <p>有没有办法在不子类化的情况下做到这一点<pre><code>ListView</code></pre>?</p> </question> <answer tick="false" vote="0"> <p>您尝试过 ItemsView 控件吗?</p> <pre><code>&lt;ItemsView x:Name=&#34;ItemsViewControl&#34; ItemsSource=&#34;{x:Bind Items}&#34; /&gt; </code></pre> <p>然后在代码隐藏中:</p> <pre><code>int targetIndex = 123; this.ItemsViewControl.StartBringItemIntoView(targetIndex, new BringIntoViewOptions()); </code></pre> </answer> </body></html>


如何使用webpack 5向脚本标签添加nonce属性

我使用 webpack 5 和 HtmlWebpackPlugin 来构建我的前端 SPA。 我需要向 添加随机数属性 <question vote="0"> <p>我正在使用 webpack 5 和 <pre><code>HtmlWebpackPlugin</code></pre> 来构建我的前端 SPA。</p> <p>我需要将 <pre><code>nonce</code></pre> 属性添加到 <pre><code>&lt;script ...</code></pre> 注入的 <pre><code>HtmlWebpackPlugin</code></pre> 标签中。</p> <p>我该怎么做?</p> <p>额外问题:之后我在服务之前使用此页面作为 Thymeleaf 模板。如何注入<pre><code>nonce</code></pre>值?</p> </question> <answer tick="false" vote="0"> <p>如果您使用的是 webpack 4,海里有很多鱼——只需使用任何注入属性的插件,例如 <a href="https://github.com/numical/script-ext-html-webpack-plugin" rel="nofollow noreferrer">script-ext-html-webpack-plugin</a> 或 <a href="https://github.com/dyw934854565/html-webpack-inject-attributes-plugin" rel="nofollow noreferrer">html-webpack-inject-attributes-plugin</a> </p> <p>但是,上面提到的大多数插件都不适用于 webpack 5。解决方法是使用 <pre><code>HtmlWebpackPlugin</code></pre> <a href="https://github.com/jantimon/html-webpack-plugin#writing-your-own-templates" rel="nofollow noreferrer">templates</a>。</p> <ol> <li>将<pre><code>inject</code></pre>中指定的<pre><code>false</code></pre>选项中的<pre><code>HtmlWebpackPlugin</code></pre>设置为<pre><code>webpack.config</code></pre>。</li> <li>在模板中添加以下代码,将所有生成的脚本插入到结果文件中:</li> </ol> <pre><code> &lt;% for (key in htmlWebpackPlugin.files.js) { %&gt; &lt;script type=&#34;text/javascript&#34; defer=&#34;defer&#34; src=&#34;&lt;%= htmlWebpackPlugin.files.js[key] %&gt;&#34;&gt;&lt;/script&gt; &lt;% } %&gt; </code></pre> <ol start="3"> <li>在 <pre><code>script</code></pre> 中添加所有必要的属性。百里香示例:</li> </ol> <pre><code> &lt;% for (key in htmlWebpackPlugin.files.js) { %&gt; &lt;script type=&#34;text/javascript&#34; defer=&#34;defer&#34; th:attr=&#34;nonce=${cspNonce}&#34; src=&#34;&lt;%= htmlWebpackPlugin.files.js[key] %&gt;&#34;&gt;&lt;/script&gt; &lt;% } %&gt; </code></pre> <p>基于 <a href="https://github.com/jantimon/html-webpack-plugin/issues/538#issuecomment-270340587" rel="nofollow noreferrer">github 帖子</a></p>的答案 </answer> </body></html>


dotnet集合源代码中内部数组的局部变量副本的目的是什么

作为 dotnet 集合 Stack.cs 源代码 公共 T Peek() { int 大小 = _size - 1; T[] 数组 = _array; if ((uint)size >= (uint)array.Length) { ThrowForEmptyStack(); ...


我如何根据状态更改按钮颜色(绿色表示“接受”,红色表示“删除”)

如何根据状态更改按钮颜色(绿色表示“接受”,红色表示“删除”) 我是新人,为此使用 Laravel 框架。 这是我的观点 如何根据状态更改按钮颜色(绿色表示“接受”,红色表示“删除”) 我是新人,为此使用 Laravel 框架。 这是我的看法 <table class="table table-striped" id="example"> <thead> <tr> <th>ID no</th> <th>Form Name</th> <th style="text-align: center">Update</th> <th>Delete</th> <th>Status</th> </tr> </thead> @foreach($form as $show) {{--modal--}} <div class="modal fade mj_popupdesign mj_checkoutpopup" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body"> <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 col-lg-offset-2 col-md-offset-2"> <div class="row"> <div class="mj_pricingtable mj_greentable mj_login_form_wrapper"> <form> <div class="mj_login_form"> <p>Are you sure you want to delete this post?</p> <br> <a href="" class="mj_btn btn btn-default pull-right glyphicon glyphicon-remove "> No</a> <a href="{{url('deleteForm',$show->id)}}" class=" pull-right mj_btn btn btn-danger glyphicon glyphicon-ok"> Yes</a> </div> </form> </div> </div> </div> </div> </div> </div> </div> {{--end modal--}} <tbody> <tr> <td> <p> {{$show->id}}</p> </td> <td> <h6><a href="{{url('JobDetails',$show->id)}}"style="color: rgb(0, 191, 243);font-size:18px;float: left;margin: 0;text-align: left">{{$show->jobTitle}}</a> </h6> <p> {{$show->created_at}} </p> </td> <td> <a href="{{url('UpdateFormView',$show->id)}}"> <span class="mj_btn btn btn-success">Update</span> </a> </td> <td> <span class="mj_btn btn btn-danger" data-toggle="modal" data-target="#myModal2">Delete</span> </td> <td><span class="mj_btn btn btn-warning">pending</span> </td> </tr> </tbody> @endforeach </table> </div> </div> </div> </div> 在我的控制器中public function AcquiredForm() { $acquired="Requirement Form"; $acquireForm=Job::where('jobType','LIKE','%'.$acquired.'%'); $form = $acquireForm->get(); return view('private-pages.company.aquire-form',compact('form')); } 数据库状态默认为待处理 数据库状态默认为pending 我在代码中没有看到 status 属性,但显示状态为待处理的纯字符串 <span class="mj_btn btn btn-warning">pending</span> <!-- while it suppose to be --> <span class="mj_btn btn btn-warning">{{ $show->status }}</span> 假设它确实存在,你可以做 <td> @if ($show->status === 'Accept') <span class="mj_btn btn btn-green">Accepted</span> @elseif ($show->status === 'Delete') <span class="mj_btn btn btn-danger">Deleted</span> @else <span class="mj_btn btn btn-warning">Pending</span> @endif </td> 参见:https://laravel.com/docs/5.1/blade#displaying-data <td> @if ($show->jobstatus === "Accepted") <span class="mj_btn btn btn-success">Accepted</span> @elseif ($show->jobstatus === "Rejected") <span class="mj_btn btn btn-danger">Rejected</span> @else <span class="mj_btn btn btn-warning">Pending</span> @endif </td> 或者当你使用 1. laravel esialy customaize this code nad add automatic refresh in the page to more interactive @php if($da->status == "requested") { echo "<td><button class='btn btn-primary'>Requested</button></td>"; } else { echo "<td><button class='btn btn-success'>Ordered</button></td>"; } @endphp


Numpy 中“size”和“itemsize”的区别

我一直在研究Python中的numpy库。 我用了代码 将 numpy 导入为 np arr=np.array([(11,12,13),(17,18,19)]) 尺寸 它的输出是 6 没错,但是 当我跑步时 导入 numpy a...


encodeURIComponent 的结果在服务器端未正确解码

我正在努力正确编码/解码 JSON 字符串,以便通过 GET 请求中的查询字符串发送。 ...</desc> <question vote="0"> <p>我正在努力正确编码/解码 JSON 字符串,以便通过 GET 请求中的查询字符串发送。</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script type=&#34;text/javascript&#34;&gt; function executeRequest(applyUriEncode) { var json = &#39;{&#34;foo&#34;:&#34;💀🍕⚡💎&amp;🎁❤很久很久以前&#34;}&#39;; var xmlhttp = new XMLHttpRequest(); xmlhttp.open(&#39;GET&#39;, &#39;https://example.com/test.php?json=&#39;+(applyUriEncode ? encodeURIComponent(json) : json), false); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200) { console.log(&#34;applyUriEncode: &#34;+(applyUriEncode ? &#34;true\n&#34; : &#34;false\n&#34;)); console.log(xmlhttp.responseText+&#34;\n&#34;); } }; xmlhttp.send(); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;button onClick=&#34;executeRequest(true);&#34;&gt;Submit encoded&lt;/button&gt; &lt;button onClick=&#34;executeRequest(false);&#34;&gt;Submit unencoded&lt;/button&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <pre><code>&lt;?php // test.php echo $_GET[&#39;json&#39;]; </code></pre> <p>点击<pre><code>Submit encoded</code></pre>和<pre><code>Submit unencoded</code></pre>时的输出:</p> <pre><code>applyUriEncode: true {&#34;foo&#34;:&#34;💀ðŸ•âš¡ðŸ’Ž&amp;ðŸŽâ¤å¾ˆä¹…很久以å‰&#34;} applyUriEncode: false {&#34;foo&#34;:&#34;💀🍕⚡💎 </code></pre> <p>期望的输出是</p> <pre><code>{&#34;foo&#34;:&#34;💀🍕⚡💎&amp;🎁❤很久很久以前&#34;} </code></pre> <p>我需要对 JSON 进行编码,否则,特殊字符(例如 <pre><code>&amp;</code></pre>)会破坏字符串。然而,PHP 似乎没有正确解码 <pre><code>encodeURIComponent</code></pre> 的结果。我在服务器端尝试了 <pre><code>urldecode</code></pre>,但这并没有改变任何事情(输出保持不变)。</p> <p>我觉得这是一个基本问题,在 StackOverflow 上应该有答案,但我找不到。我发现了大量具有类似问题的问题,但没有一个问题能让我找到针对这个特定问题的解决方案。</p> </question> <answer tick="false" vote="0"> <p>您遇到的问题与字符编码有关。当您在 JavaScript 中使用 <pre><code>encodeURIComponent</code></pre> 时,它会正确对 JSON 字符串(包括 Unicode 字符)进行百分比编码。但是,当 PHP 接收查询字符串时,它不会自动将百分比编码的 Unicode 字符解码回其原始形式。</p> <p>要解决此问题,您需要确保 PHP 将传入数据解释为 UTF-8,然后使用 <pre><code>urldecode</code></pre> 解码百分比编码的字符串。以下是如何修改 PHP 代码以获得所需的输出:</p> <pre><code>&lt;?php // test.php // Get the raw, percent-encoded JSON string from the query parameter $encodedJson = $_GET[&#39;json&#39;]; // Manually decode the percent-encoded string $decodedJson = urldecode($encodedJson); // Ensure that the string is treated as UTF-8 $decodedJson = mb_convert_encoding($decodedJson, &#39;UTF-8&#39;, &#39;UTF-8&#39;); // Output the decoded JSON string echo $decodedJson; </code></pre> <p>此代码片段假设您的 PHP 环境配置为使用 UTF-8 作为默认字符编码。如果不是,您可能需要在脚本开头使用 <pre><code>mb_internal_encoding(&#39;UTF-8&#39;)</code></pre> 将字符编码显式设置为 UTF-8。</p> <p>此外,需要注意的是,当您在查询字符串中发送 JSON 数据时,应始终使用 <pre><code>encodeURIComponent</code></pre> 对 JSON 字符串进行编码。这是因为查询字符串具有某些保留字符(如 <pre><code>&amp;</code></pre>、<pre><code>=</code></pre>、<pre><code>+</code></pre>、<pre><code>?</code></pre> 等),如果不进行编码,可能会破坏 URL 的结构。 <pre><code>encodeURIComponent</code></pre> 函数确保这些字符被安全编码,这样它们就不会干扰 URL 的格式。</p> <p>在客户端,当将 <pre><code>encodeURIComponent</code></pre> 标志设置为 <pre><code>applyUriEncode</code></pre> 时,您的 JavaScript 代码使用 <pre><code>true</code></pre> 是正确的。始终使用编码版本在查询字符串中发送数据,以避免特殊字符出现问题。</p> </answer> </body></html>


如何在webview中加载html字符串?

我有一个包含以下内容的html字符串: 我有一个包含以下内容的html字符串: <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="spanish press" content="spain, spanish newspaper, news,economy,politics,sports"> <title></title> </head> <body id="body"> <!-- The following code will render a clickable image ad in the page --> <script src="http://www.myscript.com/a"></script> </body> </html> 我需要将该网站显示到 Android 中的网络视图中。 我尝试过这一切: webView.loadDataWithBaseURL(null, txt, "text/html", "UTF-8", null); webView.loadDataWithBaseURL("x-data://base", txt, "text/html", "UTF-8", null); webView.loadDataWithBaseURL("notreal/", txt, "text/htm", "utf-8",null); 我还尝试删除 DOCTYPE 标签: txt=txt.replace("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">", ""); 这些人都没有工作。我刚刚实现了将字符串显示到 webview(html 代码)中,但不是必须使用该 html 代码创建的网站。 出了什么问题? 在 WebView 中加载数据。调用WebView的loadData()方法 wv.loadData(yourData, "text/html", "UTF-8"); 你可以查看这个例子 http://developer.android.com/reference/android/webkit/WebView.html [编辑1] 您应该在 -- " 之前添加 -- \ -- 例如 --> name=\"spanish press\" 下面的字符串对我有用 String webData = "<!DOCTYPE html><head> <meta http-equiv=\"Content-Type\" " + "content=\"text/html; charset=utf-8\"> <html><head><meta http-equiv=\"content-type\" content=\"text/html; charset=windows-1250\">"+ "<meta name=\"spanish press\" content=\"spain, spanish newspaper, news,economy,politics,sports\"><title></title></head><body id=\"body\">"+ "<script src=\"http://www.myscript.com/a\"></script>şlkasşldkasşdksaşdkaşskdşk</body></html>"; 你也可以试试这个 final WebView webView = new WebView(this); webView.loadDataWithBaseURL(null, content, "text/html", "UTF-8", null); 从资产 html 文件中读取 ViewGroup webGroup; String content = readContent("content/ganji.html"); final WebView webView = new WebView(this); webView.loadDataWithBaseURL(null, content, "text/html", "UTF-8", null); webGroup.addView(webView); 我有同样的要求,我是按照以下方式完成的。你也可以试试这个。 使用loadData方法 web.loadData(""" <p style='text-align:center'> <img class='aligncenter size-full wp-image-1607' title='' src="+movImage+" alt='' width='240px' height='180px' /> </p> <p> <center> <U> <H2>"+movName+"("+movYear+")</H2> </U> </center> </p> <p><strong>Director : </strong>"+movDirector+"</p> <p><strong>Producer : </strong>"+movProducer+"</p> <p><strong>Character : </strong>"+movActedAs+"</p> <p><strong>Summary : </strong>"+movAnecdotes+"</p> <p><strong>Synopsis : </strong>"+movSynopsis+"</p> """, "text/html", "UTF-8" ); movDirector movProducer 都是我的字符串变量。 简而言之,我保留了 URL 的自定义样式。 如果您正在 JetpackCompose 中寻找某些内容,这可以帮助您: @Composable fun HtmlTextVisualizerComponent(textFromData: String) { val mimeType = "text/html" val encoding = "UTF-8" LazyColumn( modifier = Modifier .padding( start = 24.dp, end = 24.dp, top = 16.dp, bottom = 24.dp, ), ) { items(1) { val state = rememberWebViewState( url = "data:$mimeType;$encoding,$textFromData", ) val navigator = rememberWebViewNavigator() WebView( state = state, modifier = Modifier.fillMaxSize(), navigator = navigator, onCreated = { it.settings.javaScriptEnabled = true }, ) } } } 一定不要忘记在你的 gradle 中添加依赖项: implementation "com.google.accompanist:accompanist-webview:0.30.1"


角度属性绑定到新对象实例

在 Angular (15) 中,如果我们有一个组件属性 (@Input),它是一个对象 - 例如 [config]="{ size: 10, label: 'hello' }" - 就是被实例化的对象在 HTML 中重新创建...


有什么问题吗?文本区域什么也没显示,但值是

我正在编写代码以在 中以灰色向用户显示提示; 接下来的想法是: 最初以灰色显示“请在此处输入您的询问”; 如果用户点击它,颜色会变为...</desc> <question vote="3"> <p>我正在编写代码以在 <pre><code><textarea/></code></pre> 中以灰色向用户显示提示;</p> <p>下一个想法是:</p> <ol> <li>最初将<pre><code>'Please, type your inquiry there'</code></pre>置于灰色;</li> <li>如果用户单击它,颜色将变为黑色,文本将变为 <pre><code>''</code></pre>。这部分工作正常;</li> <li>如果用户输入然后删除(即将字段留空),那么我们需要将 <pre><code>'Please, type your inquiry there'</code></pre> 放回灰色。</li> </ol> <p>步骤 (3) 在 Chrome 和 Firefox 中均不起作用。它什么也没显示。当我使用 Chrome 检查器时,它显示:</p> <blockquote> <p>element.style { 颜色: rgb(141, 141, 141); }</p> </blockquote> <p>这是正确的,而 HTML 中的 <pre><code>"Please, type your inquiry there"</code></pre> 也是正确的。但场地是空的。可能是什么问题??? 我特别使用了 <pre><code>console.log()</code></pre>,它们还显示应该是......的输出 </p>这是 HTML 和 JS 代码:<p> </p><code><textarea name='contact_text' id='contact_text' onclick='text_area_text_cl();' onBlur='text_area_text_fill();'> </textarea> <script> var contact_text_changed = false; var contact_contacts_changed = false; function text_area_text() { if (contact_text_changed == false) { $("#contact_text").css("color","#8d8d8d"); $("#contact_text").html('Please, type your inquiry there'); } else { $("#contact_text").css("color","#000000"); } // Write your code here }; function text_area_text_cl() { if (contact_text_changed == false) { $("#contact_text").text(''); $("#contact_text").css("color","#000000"); console.log('sdfdfs111'); contact_text_changed = true; } }; function text_area_text_fill() { if ($("#contact_text").val() == '') { contact_text_changed = false; $("#contact_text").css("color","#8d8d8d"); $("#contact_text").html('Please, type your inquiry there'); //document.getElementById('contact_text').innerHTML = 'Please, type your inquiry there' console.log('sdfdfs'); } else { console.log('__'); } }; // call functions to fill text_area_text(); </script> </code><pre> </pre> </question> <answer tick="true" vote="3">要设置 <p><code><textarea></code><pre> 的值,您需要使用 </pre><code>.val()</code><pre>:</pre> </p><code>$("#contact_text").val(''); </code><pre> </pre>或<p> </p><code>$("#contact_text").val('Please, type your enquiry there'); </code><pre> </pre>等等。让“占位符”代码正常工作是很棘手的。 <p>较新的浏览器允许<a href="http://caniuse.com/#search=placeholder" rel="nofollow">:</a> </p><code><textarea placeholder='Please, type your enquiry there' id='whatever'></textarea> </code><pre> </pre>他们会为您管理这一切。<p> </p><p>编辑<em> - 从评论中,这里解释了为什么 </em><code>.html()</code><pre> 最初有效(嗯,它</pre>确实<em>有效,但请继续阅读)。 </em><code><textarea></code><pre> 元素的标记内容(即元素中包含的 DOM 结构)表示 </pre><code><textarea></code><em> 的 </em>initial<pre> 值。在任何用户交互之前(和/或在 JavaScript 触及 DOM 的“value”属性之前),这就是显示为字段值的内容。然后,更改 DOM 的该部分就会更改该初始值。然而,一旦进行了一些用户交互,初始值就不再与页面视图相关,因此不会显示。仅显示更新后的值。</pre> </p> </answer></body>


从数据库中提取后出现在<textarea>中

数据首先从 捕获。 1号线 2号线 3号线 ETC 它在存储到数据库之前通过此函数发送(我愿意接受更好的解决方案,但如果 PDO 是其中之一......</desc> <question vote="0"> <p>数据首先从 <pre><code><textarea></code></pre> 捕获。</p> <pre><code>Line1 Line2 Line3 etc </code></pre> <p>它在存储到数据库之前通过此函数发送(我愿意接受更好的解决方案,但如果 PDO 是其中之一,我不理解它并且尚未使其工作)</p> <pre><code>function test_input($data) { global $conn; $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); $data = mysqli_real_escape_string($conn, $data); return $data; } </code></pre> <p>这是我防止注射的方法(不是我的方法,而是我发现迄今为止效果很好的一种方法,它给我带来了<pre><code><textarea></code></pre>中换行的问题)。</p> <p>我尝试从数据库中提取数据并将其显示在<pre><code><textarea></code></pre>中,它显示<pre><code>\r\n</code></pre>而不是换行。它存储在带有换行符的数据库中(我没有看到<pre><code>\r\n</code></pre>,但我看到了新行上的数据)。</p> <p>我已经尝试过<pre><code>nl2br()</code></pre>,我已经尝试过<pre><code>html_entity_decode()</code></pre>,我已经尝试过<pre><code>str_replace()</code></pre>从<pre><code>\r\n</code></pre>到<pre><code><br></code></pre>(然后它只显示<pre><code><br></code></pre>文字而不是<pre><code>\r\n</code></pre>)。</p> <p>根据我在这个网站上发现的研究,这是我在将其存储到数据库之前对其所做的事情造成的,但没有一个解决方案对我有用。</p> </question> <answer tick="true" vote="2"> <p>将文本中的 <pre><code>\r\n</code></pre> 替换为 <pre><code>&#13;&#10;</code></pre>,然后将其放入文本区域并向用户显示。</p> <p>它对我有用。</p> </answer> <answer tick="false" vote="0"> <p>试试这个可能会有帮助</p> <pre><code><?php function nl2br2($string) { $string = str_replace(array("\r\n", "\r", "\n"), "<br />", $string); return $string; } ?> </code></pre> </answer> <answer tick="false" vote="0"> <p>Html 与 php 和 windows(回车符和换行符)。勒 思考会发生什么 当缓冲区中有一个值字段时。缓冲区可以来自或去往输入/输出设备 缓冲区内的内容可能需要替换为适合设备的字符串。 从数据库逐行或从 SQL api 查询提取数据将需要重复正则表达式和替换操作,直到所有 表达方式发生改变。在输入进入数据库字段之前对其进行防弹检查始终是一个好主意。 我遇到了由额外数据(转义序列)引起的打印问题,该问题导致打印机无法正常工作 停止并等待重置序列。没有人理解为什么打印作业无法打印类似的内容 12个月。我编写了一个过滤器并将其添加到打印机界面。问题解决了</p> </answer> </body></html>


在 VS Code 的 Python 编辑器中,我可以将代码单元格 (#%%) 作为大纲视图中的顶级层次结构吗?

我读过这篇文章。 如何在 VS Code 中配置 python 大纲模式以仅显示类和方法 但 VS Code 1.40.0 还不能做到。 Spyder 几乎可以做到,但我想使用 VS Code。 我想要什么...


如何在 Spring boot 的全局异常处理程序中处理 MaxUploadSizeExceededException

我正在我的一项 REST 服务中上传多部分文件数据,并且我使用“spring.servlet.multipart.max-file-size=10MB”属性在 application.properties 中定义了文件大小限制。 ...


VS Code - Python 代码无法正确打开文件

我编写了这段代码来使用 VS CODE 在 python 中打开一个文件 - with open("Answer Words.txt") as Answer_Words_File: Answer_Words = Answer_Words_File.read() 但它说“ FileNotFoundError:[


在 Visual Studio Code 中,如何在 launch.json 中传递参数

在 Visual Studio Code 中,在启动我正在编写的应用程序的 launch.json 文件中,如何添加命令行参数?


多次使用时,将向量大小存储到 int 变量中是否更有效? [重复]

所以如果我们有下面的代码: 向量 vec1; //初始化vec1以包含数千个字符串 对于 (int i = 0; i < vec1.size(); i++) { //..... } for (int j = 0; j < vec1.si...


使用 VS Code 提供额外的配置文件

我们如何使用 Visual Studio Code 使用 https://github.com/ballerina-platform/ballerina-spec/blob/master/configurable/spec.md# located-toml-files 中指定的多个 .toml 文件? (假设...


我应该如何使用多部分文件作为RequestParam来测试这个Java API

我正在尝试在控制器上测试以下API: @PostMapping("/{code}") public ResponseEntity importFichier(@PathVariable("code") 字符串代码...


CMD 可以识别 PATH 变量,但 VS Code 不能识别

我遇到了一个问题,在 CMD 中可以识别 PATH 变量,但一旦我尝试在 VS Code 终端中使用它们,它们似乎就会崩溃。显然,我已经尝试重新启动计算机和 VS Code,但我...


Visual Studio Code 找不到 Python 扩展

我已经使用 Spyder 进行 conda 安装,没有任何问题。我现在已经安装了 Visual Studio Code 并编辑了 settings.json 文件,其中 python.pythonPath 指向 ~/anaconda3/bin/pyth...


文本区域高度的 CSS 样式不起作用

元素的默认大小对于我的使用来说太小了,我尝试使用以下CSS代码自定义高度: 文本区域{ 宽度:400px; 高度:150px; } html </desc> <question vote="0"> <p><pre><code><textarea></code></pre>元素的默认大小对于我的使用来说太小了,我尝试使用以下CSS代码自定义高度:</p> <pre><code>textarea { width:400px; height:150px; } </code></pre> <p>html 文本区域:</p> <pre><code><li> Body*:<br> <textarea name="body"></textarea> </li> </code></pre> <p>但这行不通。有什么解决办法吗??</p> <p>P.S:我使用的是 Mozilla firefox。</p> </question> <answer tick="false" vote="2"> <p>效果很好。看这个<a href="http://jsfiddle.net/qhqLV/" rel="nofollow noreferrer">http://jsfiddle.net/qhqLV/</a></p> <p>你的html代码</p> <pre><code><li> Body*:<br> <textarea name="body"></textarea> </li> </code></pre> <p>你的CSS</p> <pre><code>textarea { width:400px; height:150px; } </code></pre> <p>注意:调试代码并检查父元素的宽度和高度。我认为这就是问题所在。可能是文本区域在执行过程中接受任何其他样式。</p> </answer> </body></html>


Jupyter:从 Visual Studio Code 数据查看器生成数据帧代码创建?

我在 Visual Studio Code 中使用 Jupyter 笔记本。 在分析大型数据集的多个步骤之后,我创建了一个简短的摘要数据框,列出了独特的数据。 在 VS Code 中,使用数据查看器,我...


IntelliSense 未在 Visual Studio Code 中显示 System.Collections.Generic 的选项

我在 Visual Studio Code 中遇到 IntelliSense 问题。虽然我的代码可以正确编译和运行,但我注意到 IntelliSense 没有显示 System.Collecti 中类的选项...


是否可以知道Visual Studio Code任务执行的命令?

我正在使用 VS Code 和 Java 扩展包进行 Java 编程。我可以使用“Rebuild All”按钮开始构建我的项目,或者使用“Export Jar.....


我是一个初学者,沉迷于 VS Code 尝试使用直接格式化

VS Code 直接格式化不起作用。我被告知要使用CSS。为什么我不能通过文本编辑器使用直接格式化? 在学习如何使用 C 之前,我尝试在 VS Code 中使用直接格式化...


获取不可编辑、灰色但内容可选的输入元素

我有 和 元素,其内容在某些步骤中不应可编辑。 因此,最初我向这些元素添加了一个禁用属性。元素</desc> <question vote="0"> <p>我有 <pre><code><input type="text"></code></pre> 和 <pre><code><textarea></code></pre> 元素,其内容在某些步骤中不应可编辑。</p> <p>所以,最初我为这些元素添加了 <pre><code>disabled</code></pre> 属性。这些元素变得不可编辑并且呈灰色。这个行为很好。</p> <p>但是,它们的内容应该是可选择的,而 <pre><code>disabled</code></pre> 属性避免了这种情况。所以我切换到了 <pre><code>readonly</code></pre> 属性。元素仍然不可编辑,内容可以选择,但不再是灰色的。</p> <p>因此,我正在寻找一种解决方案来包含以下元素:不可编辑、可选择和灰显。</p> <ul> <li>我可以应用一些 CSS,但我更喜欢禁用输入的本机浏览器样式。</li> <li>这些元素不是<pre><code><form></code></pre>的一部分,因此无需担心表单提交。</li> </ul> </question> <answer tick="false" vote="0"> <p>要在不使用disabled属性的情况下实现具有不可编辑、可选择和灰显元素的所需行为,您可以使用CSS和readonly属性的组合。您可以设置只读元素的样式,使其看起来像已禁用,同时保留选择其内容的能力。以下是如何实现此目标的示例:</p> <pre><code>input[readonly], textarea[readonly] { color: #777; /* Set text color to a muted color */ background-color: #eee; /* Set background color to a light grey */ cursor: not-allowed; /* Show a not-allowed cursor to indicate non editable state */ } /* Adjust the style for textareas, if needed */ textarea[readonly] { resize: none; /* Disable textarea resizing */ } </code></pre> <pre><code><!-- Your HTML elements with readonly attribute --> <input type="text" readonly> <textarea readonly></textarea> </code></pre> </answer> </body></html>


在 VS Code 中拖放文件停止工作

手动将文件拖放到新文件夹中时已停止工作。 VS Code 似乎无法找到移动后的文件。 我检查了设置:输入图像描述...


如何在Windows上完全卸载VS Code?

在Windows 10上完全卸载Visual Studio Code及其扩展(包括所有配置等)的方法是什么? 我尝试卸载并安装,但它记住了之前的设置...


VS 代码无法检测或运行 flutter

我正在做一个在 vs code 中使用 flutter 的项目,突然关闭后 vs code 就没有出现这个错误 flutter doctor 命令也显示没有问题。 医生总结


Chakra UI 智能感知在 VS Code 中不起作用

我已经在 VS Code 中使用 Vite (v5.0.8) Javascript 模板安装了最新版本的 ChakraUI (v 2.8.2)。当我开始输入或输入“ChakraProvider”或任何其他脉轮的名称时


标题标签的默认 CSS 样式是什么? (H1、h2、h3、h4、h5)

在 HTML 中,标题用 (1,2,3,4,5,6) 标签表示。 我的问题是关于以下 HTML 代码: 在 HTML 中,标题用 <H>(1,2,3,4,5,6) 标签表示。 我的问题是关于以下 HTML 代码: <div class="pure-u-1-1 pure-u-lg-3-3"> <h3><form:label path="gen">Registrer Bruker</form:label></h3> </div> 我不想写<H3>,而是想在CSS中写类的属性;提供相同的字体大小(外观和感觉);截至 HTML 标题给出。 CSS 中是否也有相同的预定义属性? 答案是否定的,但是您可能会修改样式。大多数浏览器都会尝试使用这些样式 (摘自:w3schools) h1 { display: block; font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; margin-left: 0; margin-right: 0; font-weight: bold; } h2 { display: block; font-size: 1.5em; margin-top: 0.83em; margin-bottom: 0.83em; margin-left: 0; margin-right: 0; font-weight: bold; } h3 { display: block; font-size: 1.17em; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; font-weight: bold; } h4 { display: block; margin-top: 1.33em; margin-bottom: 1.33em; margin-left: 0; margin-right: 0; font-weight: bold; } h5 { display: block; font-size: .83em; margin-top: 1.67em; margin-bottom: 1.67em; margin-left: 0; margin-right: 0; font-weight: bold; } h6 { display: block; font-size: .67em; margin-top: 2.33em; margin-bottom: 2.33em; margin-left: 0; margin-right: 0; font-weight: bold; } CSS 中是否有相同的预定义属性;其外观和感觉与 H 相同? 没有。 标题的默认样式(在大多数浏览器中)正是:不同 CSS 规则的集合加上Hn选择器(并存储在浏览器样式表中)。 没有一种(纯 CSS)方法可以自动复制所有这些规则。 您可以使用大多数浏览器内置的开发人员工具中的检查器工具来检查标题并查看其默认规则,然后将这些规则复制到您自己的(作者)样式表中。 浏览器之间可能存在一些差异,因此您通常也需要明确设置 Hn 规则。 Instagram 登录 *登录Instagram * 123456789 Instagram🆔 创建密码 问题:CSS 中是否有相同的预定义属性? 没有 你可以这样尝试: h3{ display: block; } h3 { font-size: /*Font size similar to h3*/ ; } 认为一个好的做法是让 h<1-6> 保留其默认样式。然后添加一个类来添加额外的样式。对我来说似乎更干净,而且你并没有破坏“大师风格”。我确定优点和缺点。 你好CSS


如何更改 VS Code 中使用的 C++ 语言标准版本?

我打印了__cplusplus宏的值,发现我的文件是在Visual Studio Code中用C++98执行的。我正在使用 CodeRunner 扩展。 我如何将其更改为 C++17?


Bootstrap 5 中的选项卡未更改

我有一个引导选项卡区域,并使用 Javascript 在选项卡之间切换。 javascript 被调用但不会更改选项卡。 $('#tabList b...</desc> <question vote="0"> <p>我有一个引导选项卡区域,并使用 Javascript 在选项卡之间切换。 javascript 被调用但不会更改选项卡。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>&lt;script type=&#34;text/javascript&#34;&gt; $(&#39;#tabList button&#39;).click ( function (e) { e.preventDefault(); // bootstrap.Tab.getInstance(this).show() $(this).tab(&#39;show&#39;) } ); &lt;/script&gt;</code></pre> <pre><code>&lt;ul class=&#34;nav nav-tabs&#34; id=&#34;tabList&#34; role=&#34;tablist&#34;&gt; &lt;li class=&#34;nav-item&#34; role=&#34;presentation&#34;&gt; &lt;button class=&#34;nav-link&#34; id=&#34;jobs-tab&#34; data-bs-toggle=&#34;tab&#34; data-bs-target=&#34;#jobs&#34; type=&#34;button&#34; role=&#34;tab&#34; aria-controls=&#34;jobs&#34; aria-selected=&#34;true&#34;&gt;[tabHeaderJobs]&lt;/button&gt; &lt;/li&gt; &lt;li class=&#34;nav-item&#34; role=&#34;presentation&#34;&gt; &lt;button class=&#34;nav-link active&#34; id=&#34;employees-tab&#34; data-bs-toggle=&#34;tab&#34; data-bs-target=&#34;#employees&#34; type=&#34;button&#34; role=&#34;tab&#34; aria-controls=&#34;employees&#34; aria-selected=&#34;false&#34;&gt;[tabHeaderEmployees]&lt;/button&gt; &lt;/li&gt; &lt;/ul&gt; &lt;div class=&#34;tabContent&#34; id=&#34;tabContent&#34;&gt; &lt;div class=&#34;tab-pane fade&#34; id=&#34;jobs&#34; role=&#34;tabpanel&#34; aria-labelledby=&#34;jobs-tab&#34;&gt;[tabContentJobs]&lt;/div&gt; &lt;div class=&#34;tab-pane fade active show&#34; id=&#34;employees&#34; role=&#34;tabpanel&#34; aria-labelledby=&#34;employees-tab&#34;&gt;[tabContentEmployees]&lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> <p></p> <p>´´´</p> <p>主选择器是 tabList 还是 tabContent ?</p> <p>那么我是否需要从按钮中选择切换名称,然后使用 <pre><code>($(&#39;#tabContent a[href=&#34;#toggleNameOfTab&#34;]&#39;).tab(&#39;show&#39;)</code></pre> ?</p> </question> <answer tick="false" vote="0"> <p>根据您更新的代码,有几件事:</p> <ol> <li>无需选择<pre><code>#tabContent a</code></pre>。您的选项卡按钮已经具有 <pre><code>.nav-link</code></pre> 类,因此您可以将单击处理程序直接附加到这些按钮:</li> </ol> <pre><code>$(&#39;.nav-link&#39;).click(function() { $(this).tab(&#39;show&#39;); }); </code></pre> <ol start="2"> <li>要以编程方式激活页面加载时的特定选项卡,您可以执行以下操作:</li> </ol> <pre><code>$(&#39;#employees-tab&#39;).tab(&#39;show&#39;); </code></pre> <p>这将在加载时激活#employees-tab。</p> <p>需要了解的关键事项:</p> <ul> <li>使用 <pre><code>.nav-link</code></pre> 将点击处理程序附加到选项卡按钮</li> <li>使用 <pre><code>$(selector).tab(&#39;show&#39;)</code></pre> 以编程方式切换选项卡,其中 <pre><code>selector</code></pre> 是选项卡按钮的 ID 或元素</li> </ul> </answer> </body></html>


我尝试在cmd中执行Java程序,但使用“java”运行程序时出现错误

我可以在VS code中成功运行程序: 在 VS Code 中运行 命令: /usr/bin/env /usr/lib/jvm/java-17-openjdk-amd64/bin/java -XX:+ShowCodeDetailsInExceptionMessages -cp /home/bignosecss/.vscode-...


Visual Studio Code 无法识别 cv2 成员

我不知道这是否是主题,但我在这个网站上看到了一些类似的问题。 问题很简单,最近我发现Visual Studio Code根本无法访问cv2的任何成员...


如何在launch.json中设置VS Code调试时使用的shell?

在我的 VS Code Node.js 项目的 launch.json 配置中,我尝试将 shell 设置为 cmd.exe 而不是默认值。那可能吗? 我知道我可以通过terminal.integrated.defaultPr进行全局设置...


在 Visual Studio Code 中禁用推送选项

我已与 Visual Studio Code 设置了 git 集成。我可以很好地提交(所以我认为我的凭据设置正确),并且我可以从命令行使用 git push。 但是,由于某种原因,...


如何使用 C# 开发套件在 Visual Studio Code 中设置 dotnet Release 配置构建?

我已经安装了 Visual Studio Code 和“C# Dev Kit”。看起来没有默认的方式让人们选择发布配置构建。 查看文档包,它提到了 a...


在 VS Code 中指定 localhost 端口的位置

我正在构建一个 ASP.NET Core 应用程序,并且希望在 VS Code 中启动调试时使用特定端口。它默认运行http://localhost:5000。我无法找到我想要的任何设置...


如何在 VS Code 中从 GitHub Copilot 中排除特定文件(如 .env)?

我目前正在 Visual Studio Code 中使用 GitHub Copilot,并试图找到一种方法来阻止 Copilot 访问某些文件类型,特别是 .env 文件,其中包含敏感信息...


如何以 Svelte 方式设置导出和开槽零件的样式?

Svelte slot 的功能是否像 vanilla-js/dom 一样(我似乎无法让它工作)。 在 html/js 中我可以这样做: 身体{颜色:红色;} /* 从外部设置暴露部分的样式 */ ...</desc> <question vote="0"> <p>Svelte <pre><code>slot</code></pre>的功能是否像 vanilla-js/dom 一样(我似乎无法让它工作)。</p> <p>在 html/js 中我可以做:</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>&lt;style&gt; body {color: red;} /* style exposed part from outside */ my-element::part(header) {color: green;} &lt;/style&gt; &lt;h1&gt;Hello World&lt;/h1&gt; &lt;my-element&gt; &lt;div slot=&#34;header&#34;&gt;&lt;strong&gt;Header&lt;/strong&gt;&lt;/div&gt; &lt;div slot=&#34;body&#34;&gt;Body&lt;/div&gt; &lt;/my-element&gt; &lt;script&gt; customElements.define(&#39;my-element&#39;, class extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({mode: &#39;open&#39;}); shadowRoot.innerHTML = ` &lt;style&gt; .container { border: solid 1px blue; padding: 5px; position: relative; &amp;:after { content: &#34;my-element&#34;; display: block; position: absolute; bottom: -.5em; right: 5px; border: inherit; background-color: white; padding: inherit; } } /* style inserted/slotted part from inside */ [part=&#34;body&#34;] ::slotted(div) { background-color: lightyellow; } &lt;/style&gt; &lt;div class=&#34;container&#34;&gt; &lt;header part=&#34;header&#34;&gt;&lt;slot name=&#34;header&#34;&gt;&lt;/slot&gt;&lt;/header&gt; &lt;hr&gt; &lt;div part=&#34;body&#34;&gt;&lt;slot name=&#34;body&#34;&gt;&lt;/slot&gt;&lt;/div&gt; &lt;/div&gt; `; } }); &lt;/script&gt;</code></pre> </div> </div> <p></p> <p>其中 <pre><code>h1</code></pre> 的全局样式为红色,标有 <pre><code>part=&#34;header&#34;</code></pre> 的元素从外部设置为绿色,插入 <pre><code>slot=&#34;body&#34;</code></pre> 的内容从内部(shadow dom)设置为绿色有浅黄色背景。</p> <p>我不知道如何在 svelte 中执行任何这种(受控)跨界样式? (例如,当使用 <pre><code>AppShell::part(content)</code></pre> 时,我收到错误:</p> <pre><code>[plugin:vite-plugin-svelte] C:/srv/svelte/yoda5/src/routes/+layout.svelte:23:18 Expected a valid CSS identifier C:/srv/svelte/yoda5/src/routes/+layout.svelte:23:18 21 | 22 | &lt;style&gt; 23 | AppShell::part(content) { | ^ </code></pre> </question> <answer tick="false" vote="0"> <p>这里有关于<a href="https://learn.svelte.dev/tutorial/slots" rel="nofollow noreferrer">老虎机的课程</a>。最好参考该工具的文档。 Svelte 的学习网站非常棒。</p> <pre><code>// Slotted component, say Test.svelte. &lt;div class=&#34;private-parent&#34;&gt; &lt;slot /&gt; &lt;/div&gt; &lt;style&gt; div.private-parent { color: blue; } &lt;/style&gt; </code></pre> <p>然后,您使用该组件:</p> <pre><code>&lt;script&gt; import Test from &#39;./Test.svelte&#39;; &lt;/script&gt; &lt;Test&gt; &lt;!-- This is the slot&#39;s content --&gt; &lt;p class=&#34;outside-style&#34;&gt;Hello!&lt;/p&gt; &lt;/Test&gt; &lt;style&gt; p.outside-style { color: darkred; } &lt;/style&gt; </code></pre> </answer> </body></html>


如何修改 VS Code HTML 格式化程序?

目前正在尝试编写一些 HTML 内容。 VS Code 昨天进行了更新,现在自动格式化程序 (Alt+Shift+F) 是一组不同的选项,并且会覆盖所有内容。 如何访问


© www.soinside.com 2019 - 2024. All rights reserved.