vue-element-plus-admin-doc/assets/components_video-viewer.md.efcd4935.js

import{o as a,c as n,a as s}from"./app.c38d1953.js";const t='{"title":"VideoViewer 图片预览组件（2.5.0+）","description":"","frontmatter":{},"headers":[{"level":2,"title":"用法","slug":"用法"},{"level":2,"title":"VideoViewer","slug":"videoviewer"},{"level":3,"title":"参数","slug":"参数"}],"relativePath":"components/video-viewer.md","lastUpdated":1721206001124}',e={},p=s('<h1 id="videoviewer-图片预览组件（2-5-0-）"><a class="header-anchor" href="#videoviewer-图片预览组件（2-5-0-）" aria-hidden="true">#</a> VideoViewer 图片预览组件（2.5.0+）</h1><p>将 <code>VideoPlayer</code> 组件函数化，通过函数方便创建组件。</p><p>VideoViewer 组件位于 <a href="https://github.com/kailong321200875/vue-element-plus-admin/tree/master/src/components/VideoViewer" target="_blank" rel="noopener noreferrer">src/components/VideoViewer</a> 内</p><h2 id="用法"><a class="header-anchor" href="#用法" aria-hidden="true">#</a> 用法</h2><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">\n<span class="token keyword">import</span> <span class="token punctuation">{</span> createVideoViewer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@/components/VideoPlayer&#39;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">open</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>\n  <span class="token function">createVideoViewer</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n    url<span class="token operator">:</span> <span class="token string">&#39;//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4&#39;</span><span class="token punctuation">,</span>\n    poster<span class="token operator">:</span> <span class="token string">&#39;//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/poster.jpg&#39;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">)</span>\n<span class="token punctuation">}</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ElButton</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>open<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>预览<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ElButton</span><span class="token punctuation">&gt;</span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>\n\n</code></pre></div><h2 id="videoviewer"><a class="header-anchor" href="#videoviewer" aria-hidden="true">#</a> VideoViewer</h2><h3 id="参数"><a class="header-anchor" href="#参数" aria-hidden="true">#</a> 参数</h3><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>url</td><td>视频的地址</td><td><code>string</code></td><td>-</td><td>-</td></tr><tr><td>poster</td><td>视频的封面</td><td><code>string</code></td><td>-</td><td>-</td></tr></tbody></table>',8);e.render=function(s,t,e,o,c,l){return a(),n("div",null,[p])};export default e;export{t as __pageData};