mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-06-08 15:04:05 +08:00
192 lines
16 KiB
HTML
192 lines
16 KiB
HTML
<h2 id="内置的组件"><a href="#内置的组件" class="headerlink" title="内置的组件" data-scroll="">内置的组件</a></h2><h3 id="component"><a href="#component" class="headerlink" title="component" data-scroll="">component</a></h3><ul>
|
||
<li><p><strong>Props</strong>：</p>
|
||
<ul>
|
||
<li><code>is</code> - string | ComponentDefinition | ComponentConstructor</li>
|
||
<li><code>inline-template</code> - boolean</li>
|
||
</ul>
|
||
</li>
|
||
<li><p><strong>用法</strong>：</p>
|
||
<p>渲染一个“元组件”为动态组件。依 <code>is</code> 的值，来决定哪个组件被渲染。</p>
|
||
<pre><code class="hljs html"><span class="hljs-comment"><!-- 动态组件由 vm 实例的属性值 `componentId` 控制 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">component</span> <span class="hljs-attr">:is</span>=<span class="hljs-string">"componentId"</span>></span><span class="hljs-tag"></<span class="hljs-name">component</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 也能够渲染注册过的组件或 prop 传入的组件 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">component</span> <span class="hljs-attr">:is</span>=<span class="hljs-string">"$options.components.child"</span>></span><span class="hljs-tag"></<span class="hljs-name">component</span>></span></code></pre>
|
||
</li>
|
||
<li><p><strong>参考</strong>：<a href="guide/components.html#动态组件">动态组件</a></p>
|
||
</li>
|
||
</ul>
|
||
<h3 id="transition"><a href="#transition" class="headerlink" title="transition" data-scroll="">transition</a></h3><ul>
|
||
<li><p><strong>Props</strong>：</p>
|
||
<ul>
|
||
<li><code>name</code> - string，用于自动生成 CSS 过渡类名。例如：<code>name: 'fade'</code> 将自动拓展为<code>.fade-enter</code>，<code>.fade-enter-active</code>等。默认类名为 <code>"v"</code></li>
|
||
<li><code>appear</code> - boolean，是否在初始渲染时使用过渡。默认为 <code>false</code>。</li>
|
||
<li><code>css</code> - boolean，是否使用 CSS 过渡类。默认为 <code>true</code>。如果设置为 <code>false</code>，将只通过组件事件触发注册的 JavaScript 钩子。</li>
|
||
<li><code>type</code> - string，指定过渡事件类型，侦听过渡何时结束。有效值为 <code>"transition"</code> 和 <code>"animation"</code>。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。</li>
|
||
<li><code>mode</code> - string，控制离开/进入的过渡时间序列。有效的模式有 <code>"out-in"</code> 和 <code>"in-out"</code>；默认同时生效。</li>
|
||
<li><code>enter-class</code> - string</li>
|
||
<li><code>leave-class</code> - string</li>
|
||
<li><code>appear-class</code> - string</li>
|
||
<li><code>enter-to-class</code> - string</li>
|
||
<li><code>leave-to-class</code> - string</li>
|
||
<li><code>appear-to-class</code> - string</li>
|
||
<li><code>enter-active-class</code> - string</li>
|
||
<li><code>leave-active-class</code> - string</li>
|
||
<li><code>appear-active-class</code> - string</li>
|
||
</ul>
|
||
</li>
|
||
<li><p><strong>事件</strong>：</p>
|
||
<ul>
|
||
<li><code>before-enter</code></li>
|
||
<li><code>before-leave</code></li>
|
||
<li><code>before-appear</code></li>
|
||
<li><code>enter</code></li>
|
||
<li><code>leave</code></li>
|
||
<li><code>appear</code></li>
|
||
<li><code>after-enter</code></li>
|
||
<li><code>after-leave</code></li>
|
||
<li><code>after-appear</code></li>
|
||
<li><code>enter-cancelled</code></li>
|
||
<li><code>leave-cancelled</code> (<code>v-show</code> only)</li>
|
||
<li><code>appear-cancelled</code></li>
|
||
</ul>
|
||
</li>
|
||
<li><p><strong>用法</strong>：</p>
|
||
<p><code><transition></code> 元素作为单个元素/组件的过渡效果。<code><transition></code> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在检测过的组件层级中。</p>
|
||
<pre><code class="hljs html"><span class="hljs-comment"><!-- 简单元素 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">transition</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"ok"</span>></span>toggled content<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">transition</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 动态组件 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">transition</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fade"</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">"out-in"</span> <span class="hljs-attr">appear</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">component</span> <span class="hljs-attr">:is</span>=<span class="hljs-string">"view"</span>></span><span class="hljs-tag"></<span class="hljs-name">component</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">transition</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 事件钩子 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"transition-demo"</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">transition</span> @<span class="hljs-attr">after-enter</span>=<span class="hljs-string">"transitionComplete"</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">"ok"</span>></span>toggled content<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">transition</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||
<pre><code class="hljs js"><span class="hljs-keyword">new</span> Vue({
|
||
...
|
||
methods: {
|
||
<span class="hljs-attr">transitionComplete</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">el</span>) </span>{
|
||
<span class="hljs-comment">// 传入 'el' 这个 DOM 元素作为参数。</span>
|
||
}
|
||
}
|
||
...
|
||
}).$mount(<span class="hljs-string">'#transition-demo'</span>)</code></pre>
|
||
</li>
|
||
<li><p><strong>参考</strong>：<a href="guide/transitions.html">过渡：进入，离开和列表</a></p>
|
||
</li>
|
||
</ul>
|
||
<h3 id="transition-group"><a href="#transition-group" class="headerlink" title="transition-group" data-scroll="">transition-group</a></h3><ul>
|
||
<li><p><strong>Props</strong>：</p>
|
||
<ul>
|
||
<li><code>tag</code> - string，默认为 <code>span</code></li>
|
||
<li><code>move-class</code> - 覆盖移动过渡期间应用的 CSS 类。</li>
|
||
<li>除了 <code>mode</code>，其他特性和 <code><transition></code> 相同。</li>
|
||
</ul>
|
||
</li>
|
||
<li><p><strong>事件</strong>：</p>
|
||
<ul>
|
||
<li>事件和 <code><transition></code> 相同。</li>
|
||
</ul>
|
||
</li>
|
||
<li><p><strong>用法</strong>：</p>
|
||
<p><code><transition-group></code> 元素作为多个元素/组件的过渡效果。<code><transition-group></code> 渲染一个真实的 DOM 元素。默认渲染 <code><span></code>，可以通过 <code>tag</code> 属性配置哪个元素应该被渲染。</p>
|
||
<p>注意，每个 <code><transition-group></code> 的子节点必须有 <strong>独立的 key</strong> ，动画才能正常工作</p>
|
||
<p><code><transition-group></code> 支持通过 CSS transform 过渡移动。当一个子节点被更新，从屏幕上的位置发生变化，它将会获取应用 CSS 移动类 (通过 <code>name</code> 属性或配置 <code>move-class</code> 属性自动生成)。如果 CSS <code>transform</code> 属性是“可过渡”属性，当应用移动类时，将会使用 <a href="https://aerotwist.com/blog/flip-your-animations/" target="_blank" rel="noopener">FLIP 技术</a> 使元素流畅地到达动画终点。</p>
|
||
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">transition-group</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">"ul"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"slide"</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item in items"</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">"item.id"</span>></span>
|
||
{{ item.text }}
|
||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">transition-group</span>></span></code></pre>
|
||
</li>
|
||
<li><p><strong>参考</strong>：<a href="guide/transitions.html">过渡：进入，离开和列表</a></p>
|
||
</li>
|
||
</ul>
|
||
<h3 id="keep-alive"><a href="#keep-alive" class="headerlink" title="keep-alive" data-scroll="">keep-alive</a></h3><ul>
|
||
<li><p><strong>Props</strong>：</p>
|
||
<ul>
|
||
<li><code>include</code> - 字符串或正则表达式。只有名称匹配的组件会被缓存。</li>
|
||
<li><code>exclude</code> - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。</li>
|
||
<li><code>max</code> - 数字。最多可以缓存多少组件实例。</li>
|
||
</ul>
|
||
</li>
|
||
<li><p><strong>用法</strong>：</p>
|
||
<p><code><keep-alive></code> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <code><transition></code> 相似，<code><keep-alive></code> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。</p>
|
||
<p>当组件在 <code><keep-alive></code> 内被切换，它的 <code>activated</code> 和 <code>deactivated</code> 这两个生命周期钩子函数将会被对应执行。</p>
|
||
<blockquote>
|
||
<p>在 2.2.0 及其更高版本中，<code>activated</code> 和 <code>deactivated</code> 将会在 <code><keep-alive></code> 树内的所有嵌套组件中触发。</p>
|
||
</blockquote>
|
||
<p>主要用于保留组件状态或避免重新渲染。</p>
|
||
<pre><code class="hljs html"><span class="hljs-comment"><!-- 基本 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">keep-alive</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">component</span> <span class="hljs-attr">:is</span>=<span class="hljs-string">"view"</span>></span><span class="hljs-tag"></<span class="hljs-name">component</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">keep-alive</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 多个条件判断的子组件 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">keep-alive</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">comp-a</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"a > 1"</span>></span><span class="hljs-tag"></<span class="hljs-name">comp-a</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">comp-b</span> <span class="hljs-attr">v-else</span>></span><span class="hljs-tag"></<span class="hljs-name">comp-b</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">keep-alive</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 和 `<transition>` 一起使用 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">transition</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">keep-alive</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">component</span> <span class="hljs-attr">:is</span>=<span class="hljs-string">"view"</span>></span><span class="hljs-tag"></<span class="hljs-name">component</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">keep-alive</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">transition</span>></span></code></pre>
|
||
<p>注意，<code><keep-alive></code> 是用在其一个直属的子组件被开关的情形。如果你在其中有 <code>v-for</code> 则不会工作。如果有上述的多个条件性的子元素，<code><keep-alive></code> 要求同时只有一个子元素被渲染。</p>
|
||
</li>
|
||
<li><p><strong><code>include</code> and <code>exclude</code></strong></p>
|
||
<blockquote>
|
||
<p>2.1.0 新增</p>
|
||
</blockquote>
|
||
<p><code>include</code> 和 <code>exclude</code> 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：</p>
|
||
<pre><code class="hljs html"><span class="hljs-comment"><!-- 逗号分隔字符串 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">keep-alive</span> <span class="hljs-attr">include</span>=<span class="hljs-string">"a,b"</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">component</span> <span class="hljs-attr">:is</span>=<span class="hljs-string">"view"</span>></span><span class="hljs-tag"></<span class="hljs-name">component</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">keep-alive</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 正则表达式 (使用 `v-bind`) --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">keep-alive</span> <span class="hljs-attr">:include</span>=<span class="hljs-string">"/a|b/"</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">component</span> <span class="hljs-attr">:is</span>=<span class="hljs-string">"view"</span>></span><span class="hljs-tag"></<span class="hljs-name">component</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">keep-alive</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 数组 (使用 `v-bind`) --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">keep-alive</span> <span class="hljs-attr">:include</span>=<span class="hljs-string">"['a', 'b']"</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">component</span> <span class="hljs-attr">:is</span>=<span class="hljs-string">"view"</span>></span><span class="hljs-tag"></<span class="hljs-name">component</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">keep-alive</span>></span></code></pre>
|
||
<p>匹配首先检查组件自身的 <code>name</code> 选项，如果 <code>name</code> 选项不可用，则匹配它的局部注册名称 (父组件 <code>components</code> 选项的键值)。匿名组件不能被匹配。</p>
|
||
</li>
|
||
<li><p><strong><code>max</code></strong></p>
|
||
<blockquote>
|
||
<p>2.5.0 新增</p>
|
||
</blockquote>
|
||
<p>最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。</p>
|
||
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">keep-alive</span> <span class="hljs-attr">:max</span>=<span class="hljs-string">"10"</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">component</span> <span class="hljs-attr">:is</span>=<span class="hljs-string">"view"</span>></span><span class="hljs-tag"></<span class="hljs-name">component</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">keep-alive</span>></span></code></pre>
|
||
<p class="tip"><code><keep-alive></code> 不会在函数式组件中正常工作，因为它们没有缓存实例。</p>
|
||
</li>
|
||
<li><p><strong>参考</strong>：<a href="guide/components-dynamic-async.html#在动态组件上使用-keep-alive">动态组件 - keep-alive</a></p>
|
||
</li>
|
||
</ul>
|
||
<h3 id="slot"><a href="#slot" class="headerlink" title="slot" data-scroll="">slot</a></h3><ul>
|
||
<li><p><strong>Props</strong>：</p>
|
||
<ul>
|
||
<li><code>name</code> - string，用于命名插槽。</li>
|
||
</ul>
|
||
</li>
|
||
<li><p><strong>Usage</strong>：</p>
|
||
<p><code><slot></code> 元素作为组件模板之中的内容分发插槽。<code><slot></code> 元素自身将被替换。</p>
|
||
<p>详细用法，请参考下面教程的链接。</p>
|
||
</li>
|
||
<li><p><strong>参考</strong>：<a href="guide/components.html#通过插槽分发内容">通过插槽分发内容</a></p>
|
||
</li>
|
||
</ul>
|