https://tianchoy.github.io/tags/%E7%AC%94%E8%AE%B0/Recent content in 笔记 on 特严赤傲Hugozh-CNFri, 23 Oct 2026 22:32:18 +0800https://tianchoy.github.io/posts/diary/%E5%8D%9A%E5%AE%A2%E7%BB%88%E4%BA%8E%E6%88%90%E5%BD%A2%E4%BA%86/Fri, 23 Oct 2026 22:32:18 +0800https://tianchoy.github.io/posts/diary/%E5%8D%9A%E5%AE%A2%E7%BB%88%E4%BA%8E%E6%88%90%E5%BD%A2%E4%BA%86/<p>这个博客很早之前就建好了，最开始使用的是vuepress，后来改成了vitepress，选这两个程序是因为对vue比较熟，但是界面的样式真的一言难尽，难看到没眼看，但也无暇顾及太多，由于在其他博客平台开了账号，也就把它当作记录写代码中遇到的问题的平台。</p>https://tianchoy.github.io/posts/%E5%8D%95%E7%89%87%E6%9C%BA/gitcode%E4%BB%A3%E7%A0%81%E5%90%8C%E6%97%B6%E6%9B%B4%E6%96%B0%E5%88%B0github/Sat, 23 May 2026 22:09:11 +0800https://tianchoy.github.io/posts/%E5%8D%95%E7%89%87%E6%9C%BA/gitcode%E4%BB%A3%E7%A0%81%E5%90%8C%E6%97%B6%E6%9B%B4%E6%96%B0%E5%88%B0github/<p>想把已在 GitCode 上的项目也同步到 GitHub，以后<strong>只需一次 <code>git push</code> 就能同时更新两个平台</strong></p>https://tianchoy.github.io/posts/dart/wheretype%E7%9A%84%E4%BD%9C%E7%94%A8/Thu, 21 May 2026 21:04:00 +0800https://tianchoy.github.io/posts/dart/wheretype%E7%9A%84%E4%BD%9C%E7%94%A8/<p><code>whereType&lt;Marker&gt;()</code> 是 Dart 中 Iterable 的一个方法，用于<strong>过滤集合中指定类型的元素</strong>。</p> <h2 id="它的作用">它的作用</h2> <p>从集合中筛选出所有类型为 <code>&lt;Marker&gt;</code> 的元素，并返回一个新的 Iterable，忽略其他类型的元素。</p>https://tianchoy.github.io/posts/vue3/flex%E5%B8%83%E5%B1%80%E9%87%8C%E7%9A%84%E5%B1%9E%E6%80%A7/Sun, 20 Oct 2024 11:42:58 +0800https://tianchoy.github.io/posts/vue3/flex%E5%B8%83%E5%B1%80%E9%87%8C%E7%9A%84%E5%B1%9E%E6%80%A7/<ol> <li> <p>父级属性</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">flex-direction</span> <span class="o">:</span> <span class="nt">设置主轴的方向</span><span class="err">（</span><span class="nt">row</span><span class="o">,</span><span class="nt">row-reverse</span><span class="o">,</span><span class="nt">column</span><span class="o">,</span><span class="nt">column-reverse</span><span class="err">）</span> </span></span><span class="line"><span class="cl"> <span class="nt">row</span><span class="err">：</span><span class="nt">X轴从左至右</span><span class="err">（</span><span class="nt">默认</span><span class="err">）【</span><span class="nt">1</span><span class="o">,</span><span class="nt">2</span><span class="o">,</span><span class="nt">3</span> <span class="err">】</span> </span></span><span class="line"><span class="cl"> <span class="nt">row-reverse</span><span class="err">：</span><span class="nt">X轴从右至左</span><span class="err">【</span> <span class="nt">3</span><span class="o">,</span><span class="nt">2</span><span class="o">,</span><span class="nt">1</span><span class="err">】</span> </span></span><span class="line"><span class="cl"> <span class="nt">column</span><span class="err">：</span><span class="nt">Y轴从上之下</span> </span></span><span class="line"><span class="cl"> <span class="nt">column-reverse</span><span class="err">：</span><span class="nt">Y轴从下至上</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">justify-content</span> <span class="o">:</span> <span class="nt">设置主轴上的子元素排列方式</span> </span></span><span class="line"><span class="cl"> <span class="nt">flex-start</span> <span class="p">:</span><span class="nd">默认从头部开始</span><span class="err">，</span><span class="nt">从左至右</span><span class="err">，</span><span class="nt">X轴为主轴</span><span class="err">【</span><span class="nt">1</span><span class="o">,</span><span class="nt">2</span><span class="o">,</span><span class="nt">3</span> <span class="err">】</span> </span></span><span class="line"><span class="cl"> <span class="nt">flex-end</span> <span class="o">:</span> <span class="nt">从尾部开始排列</span><span class="err">【</span> <span class="nt">1</span><span class="o">,</span><span class="nt">2</span><span class="o">,</span><span class="nt">3</span><span class="err">】</span> </span></span><span class="line"><span class="cl"> <span class="nt">center</span><span class="err">：</span> <span class="nt">在主轴居中对齐</span><span class="err">（</span><span class="nt">主轴为X</span><span class="err">，</span><span class="nt">则水平居中</span><span class="err">）【</span> <span class="nt">1</span><span class="o">,</span><span class="nt">2</span><span class="o">,</span><span class="nt">3</span> <span class="err">】</span> </span></span><span class="line"><span class="cl"> <span class="nt">space-around</span><span class="o">:</span> <span class="nt">平分剩余空间</span><span class="err">【</span> <span class="nt">1</span><span class="o">,</span> <span class="nt">2</span><span class="o">,</span> <span class="nt">3</span> <span class="err">】</span> </span></span><span class="line"><span class="cl"> <span class="nt">space-between</span><span class="o">:</span> <span class="nt">先两边贴边</span><span class="err">，</span><span class="nt">再平分剩余空间</span><span class="err">【</span><span class="nt">1</span><span class="o">,</span> <span class="nt">2</span><span class="o">,</span> <span class="nt">3</span><span class="o">,</span> <span class="nt">4</span><span class="o">,</span> <span class="nt">5</span><span class="err">】</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">flex-wrap</span> <span class="o">:</span> <span class="nt">设置元素是否换行</span> </span></span><span class="line"><span class="cl"> <span class="nt">nowrap</span><span class="err">：</span><span class="nt">默认不换行</span><span class="err">【</span><span class="nt">1</span><span class="o">,</span><span class="nt">2</span><span class="o">,</span><span class="nt">3</span><span class="o">,</span><span class="nt">4</span><span class="o">,</span><span class="nt">5</span><span class="o">,</span><span class="nt">6</span><span class="err">】</span> </span></span><span class="line"><span class="cl"> <span class="nt">wrap</span><span class="err">：</span><span class="nt">换行</span> <span class="err">【</span><span class="nt">1</span><span class="o">,</span><span class="nt">2</span><span class="o">,</span><span class="nt">3</span><span class="err">】</span> </span></span><span class="line"><span class="cl"> <span class="err">【</span><span class="nt">4</span><span class="o">,</span><span class="nt">5</span><span class="o">,</span><span class="nt">6</span><span class="err">】</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">align-content</span> <span class="o">:</span> <span class="nt">设置侧轴上的子元素的排列放方式</span><span class="err">（</span><span class="nt">多行</span><span class="err">）</span> </span></span><span class="line"><span class="cl"> <span class="nt">flex-start</span><span class="p">:</span><span class="nd">默认值在侧轴的头部开始排列</span> </span></span><span class="line"><span class="cl"> <span class="nt">flex-end</span><span class="p">:</span><span class="nd">在侧轴的尾部开始排列</span> </span></span><span class="line"><span class="cl"> <span class="nt">center</span><span class="p">:</span><span class="nd">在侧轴中间显示</span> </span></span><span class="line"><span class="cl"> <span class="nt">space-around</span><span class="p">:</span><span class="nd">子项在侧轴平分剩余空间</span> </span></span><span class="line"><span class="cl"> <span class="nt">space-between</span><span class="p">:</span><span class="nd">子项在侧轴先分布在两头</span><span class="err">，</span><span class="nt">再平分剩余空间</span> </span></span><span class="line"><span class="cl"> <span class="nt">stretch</span><span class="p">:</span><span class="nd">设置子元素高度平分父元素高度</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">align-items</span> <span class="o">:</span> <span class="nt">设置侧轴上的子元素排列方式</span><span class="err">（</span><span class="nt">单行</span><span class="err">）</span> </span></span><span class="line"><span class="cl"> <span class="nt">center</span><span class="err">：</span><span class="nt">垂直居中</span> </span></span><span class="line"><span class="cl"> <span class="nt">flex-start</span><span class="err">：</span><span class="nt">垂直居上</span> </span></span><span class="line"><span class="cl"> <span class="nt">flex-end</span><span class="err">：</span><span class="nt">垂直居下</span> </span></span><span class="line"><span class="cl"> <span class="nt">stretch</span><span class="err">：</span><span class="nt">拉伸</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nt">flex-flow</span> <span class="o">:</span> <span class="nt">复合属性</span><span class="err">，</span><span class="nt">相当于同时设置了flex-direaction</span> <span class="nt">和</span> <span class="nt">flex-wrap</span> </span></span><span class="line"><span class="cl"> <span class="nt">flex-flow</span><span class="o">:</span> <span class="nt">row</span> <span class="nt">wrap</span><span class="o">;</span> </span></span></code></pre></td></tr></table> </div> </div></li> <li> <p>子级属性</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">flex</span><span class="p">:</span><span class="nd">1</span> <span class="nt">子项所占的比例</span> </span></span><span class="line"><span class="cl"><span class="nt">align-self</span><span class="o">:</span> <span class="nt">控制子项自身在侧轴上的排列方式</span> </span></span><span class="line"><span class="cl"> <span class="nt">flex-start</span><span class="p">:</span><span class="nd">垂直居上</span> </span></span><span class="line"><span class="cl"> <span class="nt">flex-end</span><span class="o">:</span> <span class="nt">垂直居下</span> </span></span><span class="line"><span class="cl"> <span class="nt">center</span><span class="o">:</span> <span class="nt">居中</span> </span></span><span class="line"><span class="cl"><span class="nt">order</span><span class="o">:</span> <span class="nt">数值越小子项越靠前</span> </span></span></code></pre></td></tr></table> </div> </div></li> </ol>https://tianchoy.github.io/posts/%E5%8D%95%E7%89%87%E6%9C%BA/miot-plugin-sdk-npminstall%E5%AE%89%E8%A3%85%E5%A4%B1%E8%B4%A5/Sun, 20 Oct 2024 11:42:58 +0800https://tianchoy.github.io/posts/%E5%8D%95%E7%89%87%E6%9C%BA/miot-plugin-sdk-npminstall%E5%AE%89%E8%A3%85%E5%A4%B1%E8%B4%A5/<p>最紧公司要开发一台智能设备，经过同事的对比，选中了米家作为云平台，于是，我就负责开发app界面端，根据官方文档教程 下载了miot-plugin-sdk 程序，准备开始开发,结果悲剧了……</p>https://tianchoy.github.io/posts/python/python%E7%94%A8pyinstaller%E6%89%93%E5%8C%85exe%E5%8E%BB%E6%8E%89%E9%BB%91%E7%AA%97%E5%8F%A3/Sun, 20 Oct 2024 11:42:58 +0800https://tianchoy.github.io/posts/python/python%E7%94%A8pyinstaller%E6%89%93%E5%8C%85exe%E5%8E%BB%E6%8E%89%E9%BB%91%E7%AA%97%E5%8F%A3/<p>使用Python编写程序将Python脚本打包成可执行文件（EXE）,但是会有一个命令框产生，很烦，所以，去掉这个框</p>https://tianchoy.github.io/posts/vue3/vite%E4%B8%AD%E6%97%A0%E6%B3%95%E4%BD%BF%E7%94%A8require%E5%92%8C@%E6%97%A0%E6%B3%95%E4%BD%BF%E7%94%A8%E7%9A%84%E9%97%AE%E9%A2%98/Sun, 20 Oct 2024 11:42:58 +0800https://tianchoy.github.io/posts/vue3/vite%E4%B8%AD%E6%97%A0%E6%B3%95%E4%BD%BF%E7%94%A8require%E5%92%8C@%E6%97%A0%E6%B3%95%E4%BD%BF%E7%94%A8%E7%9A%84%E9%97%AE%E9%A2%98/<p>1，安装插件</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">//yarn 安装 </span></span></span><span class="line"><span class="cl"><span class="nx">yarn</span> <span class="nx">add</span> <span class="o">-</span><span class="nx">D</span> <span class="nx">vite</span><span class="o">-</span><span class="nx">plugin</span><span class="o">-</span><span class="nx">require</span><span class="o">-</span><span class="nx">transform</span> </span></span><span class="line"><span class="cl"><span class="c1">//npm 安装 </span></span></span><span class="line"><span class="cl"><span class="nx">npm</span> <span class="nx">i</span> <span class="nx">vite</span><span class="o">-</span><span class="nx">plugin</span><span class="o">-</span><span class="nx">require</span><span class="o">-</span><span class="nx">transform</span> <span class="o">--</span><span class="nx">S</span> </span></span></code></pre></td></tr></table> </div> </div><p>2.在vite中配置一下即可</p>https://tianchoy.github.io/posts/vue3/vue3%E9%98%B2%E6%8A%96/Sun, 20 Oct 2024 11:42:58 +0800https://tianchoy.github.io/posts/vue3/vue3%E9%98%B2%E6%8A%96/<div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span><span class="lnt">9 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">//utils/debounce.js </span></span></span><span class="line"><span class="cl"><span class="c1">//防抖函数 </span></span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">debounce</span> <span class="o">=</span> <span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">timer</span> <span class="o">=</span> <span class="mi">0</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span><span class="nx">callback</span><span class="p">,</span> <span class="nx">wait</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">timer</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">timer</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="p">(</span><span class="nx">callback</span><span class="p">,</span><span class="nx">wait</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})()</span> </span></span></code></pre></td></tr></table> </div> </div><p>在实例中应用</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">debounce</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&#34;../utils/debounce&#34;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="nx">debounce</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"><span class="c1">//业务逻辑代码 </span></span></span><span class="line"><span class="cl"><span class="p">},</span><span class="mi">500</span><span class="p">)</span> </span></span></code></pre></td></tr></table> </div> </div><p>记录一下。</p>https://tianchoy.github.io/posts/vue3/vue3%E8%87%AA%E5%AE%9A%E4%B9%89tab%E7%BB%84%E4%BB%B6%E5%88%87%E6%8D%A2%E7%AE%80%E6%98%93%E6%95%88%E6%9E%9C/Sun, 20 Oct 2024 11:42:58 +0800https://tianchoy.github.io/posts/vue3/vue3%E8%87%AA%E5%AE%9A%E4%B9%89tab%E7%BB%84%E4%BB%B6%E5%88%87%E6%8D%A2%E7%AE%80%E6%98%93%E6%95%88%E6%9E%9C/<div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span><span class="lnt">39 </span><span class="lnt">40 </span><span class="lnt">41 </span><span class="lnt">42 </span><span class="lnt">43 </span><span class="lnt">44 </span><span class="lnt">45 </span><span class="lnt">46 </span><span class="lnt">47 </span><span class="lnt">48 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="o">&lt;</span><span class="nx">template</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">&#34;content&#34;</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">&#34;tab&#34;</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;</span><span class="nx">div</span> <span class="err">@</span><span class="nx">click</span><span class="o">=</span><span class="s2">&#34;swichItem(item)&#34;</span> <span class="kr">class</span><span class="o">=</span><span class="s2">&#34;tabs-item&#34;</span> <span class="nx">v</span><span class="o">-</span><span class="k">for</span><span class="o">=</span><span class="s2">&#34;item in data&#34;</span> <span class="o">:</span><span class="nx">key</span><span class="o">=</span><span class="s2">&#34;item.name&#34;</span><span class="o">&gt;</span><span class="p">{{</span><span class="nx">item</span><span class="p">.</span><span class="nx">name</span><span class="p">}}</span><span class="o">&lt;</span><span class="err">/div&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;</span><span class="err">/div&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;</span><span class="nx">component</span> <span class="o">:</span><span class="nx">is</span><span class="o">=</span><span class="s2">&#34;current.comName&#34;</span><span class="o">&gt;&lt;</span><span class="err">/component&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;</span><span class="err">/div&gt;</span> </span></span><span class="line"><span class="cl"><span class="o">&lt;</span><span class="err">/template&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="o">&lt;</span><span class="nx">script</span> <span class="nx">setup</span> <span class="nx">lang</span><span class="o">=</span><span class="s1">&#39;ts&#39;</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span><span class="nx">reactive</span><span class="p">,</span><span class="nx">markRaw</span><span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">A</span> <span class="nx">from</span> <span class="s1">&#39;./components/A.vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">B</span> <span class="nx">from</span> <span class="s1">&#39;./components/B.vue&#39;</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">C</span> <span class="nx">from</span> <span class="s1">&#39;./components/C.vue&#39;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">type</span> <span class="nx">Tabs</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span><span class="nx">string</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">comName</span><span class="o">:</span> <span class="nx">any</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="nx">type</span> <span class="nx">Com</span> <span class="o">=</span> <span class="nx">Pick</span><span class="o">&lt;</span><span class="nx">Tabs</span><span class="p">,</span><span class="s1">&#39;comName&#39;</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="nx">reactive</span><span class="o">&lt;</span><span class="nx">Tabs</span><span class="p">[]</span><span class="o">&gt;</span><span class="p">([</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span><span class="s1">&#39;我是a组件&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">comName</span><span class="o">:</span> <span class="nx">markRaw</span><span class="p">(</span><span class="nx">A</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span><span class="s1">&#39;我是b组件&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">comName</span><span class="o">:</span> <span class="nx">markRaw</span><span class="p">(</span><span class="nx">B</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span><span class="s1">&#39;我是C组件&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">comName</span><span class="o">:</span> <span class="nx">markRaw</span><span class="p">(</span><span class="nx">C</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">])</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kd">let</span> <span class="nx">current</span> <span class="o">=</span> <span class="nx">reactive</span><span class="o">&lt;</span><span class="nx">Com</span><span class="o">&gt;</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">comName</span><span class="o">:</span><span class="nx">data</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">comName</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">swichItem</span><span class="o">=</span><span class="p">(</span><span class="nx">item</span><span class="o">:</span><span class="nx">Tabs</span><span class="p">)=&gt;{</span> </span></span><span class="line"><span class="cl"> <span class="nx">current</span><span class="p">.</span><span class="nx">comName</span> <span class="o">=</span> <span class="nx">item</span><span class="p">.</span><span class="nx">comName</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="o">&lt;</span><span class="err">/script&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="o">&lt;</span><span class="nx">style</span> <span class="nx">scoped</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">tabs</span><span class="o">-</span><span class="nx">item</span><span class="p">{</span><span class="nx">display</span><span class="o">:</span> <span class="nx">inline</span><span class="o">-</span><span class="nx">block</span><span class="p">;</span> <span class="nx">width</span><span class="o">:</span> <span class="mi">100</span><span class="nx">px</span><span class="p">;</span><span class="nx">border</span><span class="o">:</span> <span class="mi">1</span><span class="nx">px</span> <span class="nx">solid</span> <span class="err">#</span><span class="nx">ddd</span><span class="p">;</span><span class="nx">text</span><span class="o">-</span><span class="nx">align</span><span class="o">:</span> <span class="nx">center</span><span class="p">;}</span> </span></span><span class="line"><span class="cl"><span class="o">&lt;</span><span class="err">/style&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>其中ABC三个组件味各自tab里的内容。</p>https://tianchoy.github.io/posts/%E5%8D%95%E7%89%87%E6%9C%BA/%E5%A6%82%E4%BD%95%E8%AE%A9esp8266%E6%81%A2%E5%A4%8D%E5%87%BA%E5%8E%82%E8%AE%BE%E7%BD%AE/Sun, 20 Oct 2024 11:42:58 +0800https://tianchoy.github.io/posts/%E5%8D%95%E7%89%87%E6%9C%BA/%E5%A6%82%E4%BD%95%E8%AE%A9esp8266%E6%81%A2%E5%A4%8D%E5%87%BA%E5%8E%82%E8%AE%BE%E7%BD%AE/<p>1，安装python，2.7或者更高版本 2，运行：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">get-pip.py </span></span></code></pre></td></tr></table> </div> </div><p>3，运行：</p>