| 1 |
- import{e as s,o as t,G as a}from"./vendor.3379a4e5.js";const n={class:"markdown-body"},l=[a('<h1>luckycard组件</h1><h3>介绍</h3><p>基于 canvas 的一个刮刮卡组件</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">'vue'</span>;\n<span class="hljs-comment">// vue</span>\n<span class="hljs-keyword">import</span> { Luckcard} <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui'</span>;\n\n<span class="hljs-keyword">const</span> app = createApp();\napp.use(Luckcard);\n\n</code></pre><h2>基本用法</h2><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-luckycard</span> \n<span class="hljs-attr">content</span>=<span class="hljs-string">"1000万"</span>\n></span><span class="hljs-tag"></<span class="hljs-name">nut-luckycard</span>></span>\n</code></pre><h2>异步数据</h2><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-luckycard</span> \n<span class="hljs-attr">:content</span>=<span class="hljs-string">"val"</span>\n></span><span class="hljs-tag"></<span class="hljs-name">nut-luckycard</span>></span>\n</code></pre><h2>支持自定义颜色</h2><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-luckycard</span> \n<span class="hljs-attr">coverColor</span>=<span class="hljs-string">"#F9CC9D"</span> \n<span class="hljs-attr">backgroundColor</span>=<span class="hljs-string">"#C3D08B"</span> \n<span class="hljs-attr">content</span>=<span class="hljs-string">"<em>1000<em><strong>元</strong>"</span>\n></span><span class="hljs-tag"></<span class="hljs-name">nut-luckycard</span>></span>\n</code></pre><h2>支持背景是图片</h2><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-luckycard</span> \n<span class="hljs-attr">content</span>=<span class="hljs-string">"1000万"</span> \n<span class="hljs-attr">:coverImg</span>=<span class="hljs-string">"coverImage"</span>\n></span><span class="hljs-tag"></<span class="hljs-name">nut-luckycard</span>></span>\n</code></pre><h2>事件回调</h2><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-luckycard</span> \n<span class="hljs-attr">content</span>=<span class="hljs-string">"1000万"</span>\n@<span class="hljs-attr">open</span>=<span class="hljs-string">"opencard"</span>\n></span><span class="hljs-tag"></<span class="hljs-name">nut-luckycard</span>></span>\n</code></pre><h2>设置刮开比例</h2><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-luckycard</span> \n<span class="hljs-attr">content</span>=<span class="hljs-string">"1000万"</span>\n@<span class="hljs-attr">open</span>=<span class="hljs-string">"opencard"</span>\n<span class="hljs-attr">ratio</span>=<span class="hljs-string">"0.2"</span>\n></span><span class="hljs-tag"></<span class="hljs-name">nut-luckycard</span>></span>\n</code></pre><h2>Prop</h2><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>content</td><td>奖项信息，支持html</td><td>String</td><td>‘’</td></tr><tr><td>height</td><td>卡片高度</td><td>String</td><td>50px</td></tr><tr><td>width</td><td>卡片高度</td><td>String</td><td>300px</td></tr><tr><td>coverColor</td><td>刮开层颜色</td><td>String</td><td>‘’</td></tr><tr><td>coverImg</td><td>刮开层是图片（不支持跨域。设置此项后coverColor失效）</td><td>String</td><td>‘’</td></tr><tr><td>fontSize</td><td>中奖信息字号</td><td>String</td><td>20px</td></tr><tr><td>backgroundColor</td><td>内容层背景颜色</td><td>String</td><td>‘#FFFFFF’</td></tr><tr><td>ratio</td><td>触发事件的刮开比</td><td>Number</td><td>0.8(介于0-1之间)</td></tr></tbody></table><h2>事件</h2><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>open</td><td>刮开后回调函数</td><td>function</td><td>‘’</td></tr></tbody></table>',21)],p={setup:(a,{expose:p})=>(p({frontmatter:{}}),(a,p)=>(t(),s("div",n,l)))};export{p as default};
|
