ホーム エクスプローラ ヘルプ
サインイン
githab
/
nutui
3
0
Fork 0
ファイル
ツリー: 0ab79d80f1
ブランチ タグ
nutui
/
3.1.6
/
doc.021332cd.js

doc.021332cd.js 3.9 KB
履歴 Raw

1 
  1. import{e as s,o as a,G as n}from"./vendor.9cc7b6f2.js";const t={class:"markdown-body"},l=[n('<h1>imagepreview组件</h1><h3>介绍</h3><p>图片预览</p><h3>安装</h3><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vue&#39;</span>;\n<span class="hljs-keyword">import</span> { ImagePreview } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui&#39;</span>;\n\n<span class="hljs-keyword">const</span> app = createApp();\napp.use(ImagePreview);\n</code></pre><h3>基础用法</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-imagepreview</span> <span class="hljs-attr">:show</span>=<span class="hljs-string">&quot;showPreview&quot;</span> <span class="hljs-attr">:images</span>=<span class="hljs-string">&quot;dataImgItem&quot;</span> @<span class="hljs-attr">close</span>=<span class="hljs-string">&quot;hideFn&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">isLink</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;展示图片预览&quot;</span> <span class="hljs-attr">:showIcon</span>=<span class="hljs-string">&quot;true&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;showFn&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params"></span>)</span> {\n    <span class="hljs-keyword">const</span> resData = reactive({\n        <span class="hljs-attr">showPreview</span>: <span class="hljs-literal">false</span>,\n        <span class="hljs-attr">dataImgItem</span>: [\n            {\n            <span class="hljs-attr">imgSrc</span>: <span class="hljs-string">&#39;//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg&#39;</span>,\n            },\n            {\n            <span class="hljs-attr">imgSrc</span>: <span class="hljs-string">&#39;//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png&#39;</span>,\n            },\n            {\n            <span class="hljs-attr">imgSrc</span>: <span class="hljs-string">&#39;//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg&#39;</span>,\n            },\n            {\n            <span class="hljs-attr">imgSrc</span>: <span class="hljs-string">&#39;//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg&#39;</span>,\n            },\n        ]\n    });\n\n    <span class="hljs-keyword">const</span> showFn = <span class="hljs-function">() =&gt;</span> {\n        resData.showPreview = <span class="hljs-literal">true</span>;\n    }\n\n    <span class="hljs-keyword">const</span> hideFn = <span class="hljs-function">() =&gt;</span> {\n        resData.showPreview = <span class="hljs-literal">false</span>;\n    }\n    \n    <span class="hljs-keyword">return</span> {\n        ...toRefs(resData),\n        showFn,\n        hideFn\n    };\n},\n</code></pre><h3>Props</h3><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>show</td><td>是否展示预览图片</td><td>Boolean</td><td>false</td></tr><tr><td>images</td><td>预览图片数组</td><td>Array&lt;<code>String</code>&gt;</td><td>[]</td></tr></tbody></table><h3>Events</h3><table><thead><tr><th>字段</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>close</td><td>点击遮罩关闭图片预览时触发</td><td>无</td></tr></tbody></table>',12)],p={setup:(n,{expose:p})=>(p({frontmatter:{}}),(n,p)=>(a(),s("div",t,l)))};export{p as default};
    2.