mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 09:08:51 +08:00
20 lines
33 KiB
JavaScript
20 lines
33 KiB
JavaScript
import{_ as h,E as d,c as n,o as e,aR as l,I as i,a as t,w as a}from"./chunks/framework.C7RrxATG.js";const F=JSON.parse('{"title":"Button 按钮","description":"","frontmatter":{},"headers":[],"relativePath":"component/button.md","filePath":"component/button.md","lastUpdated":1762249100000}'),p={name:"component/button.md"},k=l(`<h1 id="button-按钮" tabindex="-1">Button 按钮 <a class="header-anchor" href="#button-按钮" aria-label="Permalink to "Button 按钮""></a></h1><p>按钮用于触发一个操作，如提交表单或打开链接。</p><h2 id="基本用法" tabindex="-1">基本用法 <a class="header-anchor" href="#基本用法" aria-label="Permalink to "基本用法""></a></h2><p>基本按钮。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>主要按钮</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"success"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>成功按钮</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"info"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>信息按钮</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"warning"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>警告按钮</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"error"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>危险按钮</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="禁用" tabindex="-1">禁用 <a class="header-anchor" href="#禁用" aria-label="Permalink to "禁用""></a></h2><p>设置 <code>disabled</code> 属性。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>默认按钮</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="幽灵按钮" tabindex="-1">幽灵按钮 <a class="header-anchor" href="#幽灵按钮" aria-label="Permalink to "幽灵按钮""></a></h2><p>设置 <code>plain</code> 属性。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> plain</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>主要按钮</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="细边框幽灵按钮" tabindex="-1">细边框幽灵按钮 <a class="header-anchor" href="#细边框幽灵按钮" aria-label="Permalink to "细边框幽灵按钮""></a></h2><p>设置 <code>hairline</code> 属性。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> plain</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> hairline</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>主要按钮</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="按钮大小" tabindex="-1">按钮大小 <a class="header-anchor" href="#按钮大小" aria-label="Permalink to "按钮大小""></a></h2><p>设置 <code>size</code> ，支持 'small'、'medium'、'large'，默认为 'medium'。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"small"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>小号按钮</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"medium"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>中号按钮</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"large"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>大号按钮</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="加载中按钮" tabindex="-1">加载中按钮 <a class="header-anchor" href="#加载中按钮" aria-label="Permalink to "加载中按钮""></a></h2><p>设置 <code>loading</code> 属性，让按钮处于加载中状态。加载中的按钮是禁止点击的。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> loading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>加载中</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="文字按钮" tabindex="-1">文字按钮 <a class="header-anchor" href="#文字按钮" aria-label="Permalink to "文字按钮""></a></h2><p>将 <code>type</code> 设置为 <code>text</code>。文字按钮不支持其他颜色。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"text"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>文字按钮</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="图标按钮" tabindex="-1">图标按钮 <a class="header-anchor" href="#图标按钮" aria-label="Permalink to "图标按钮""></a></h2><p>将 <code>type</code> 设置为 <code>icon</code>，同时设置 <code>icon</code> 属性，icon 为图标的类名，可以直接使用 <code>Icon 图标</code> 章节中的图标类名。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"icon"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"picture"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="带图标的按钮" tabindex="-1">带图标的按钮 <a class="header-anchor" href="#带图标的按钮" aria-label="Permalink to "带图标的按钮""></a></h2><p>设置 <code>icon</code> 属性，不需要设置 <code>type</code> 为 <code>icon</code>，即可以直接使用带图标的按钮。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"edit-outline"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><p>结合<code>classPrefix</code>可以使用自定义图标，参见 <a href="/component/icon.html#自定义图标">Icon 自定义图标</a>。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> classPrefix</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"fish"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"kehuishouwu"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>可回收</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="块状按钮" tabindex="-1">块状按钮 <a class="header-anchor" href="#块状按钮" aria-label="Permalink to "块状按钮""></a></h2><p>设置 <code>block</code> 属性。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>主要按钮</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="自定义样式" tabindex="-1">自定义样式 <a class="header-anchor" href="#自定义样式" aria-label="Permalink to "自定义样式""></a></h2><p>通过 <code>custom-class</code> 和 <code>custom-style</code> 属性可以自定义按钮的样式，这里我们使用<code>custom-class</code>给按钮添加一个 <code>Material Design 3</code> 风格的<code>box-shadow</code>。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"page-class"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> custom-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"custom-shadow"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>主要按钮</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"success"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> custom-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"custom-shadow"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>成功按钮</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"info"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> custom-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"custom-shadow"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>信息按钮</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"warning"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> custom-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"custom-shadow"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>警告按钮</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"error"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> custom-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"custom-shadow"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>危险按钮</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.page-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">deep</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .custom</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">shadow {</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> box-shadow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 3</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -2</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> rgb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> /</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 2</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 2</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> rgb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> /</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 14</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 5</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> rgb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> /</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 12</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="attributes" tabindex="-1">Attributes <a class="header-anchor" href="#attributes" aria-label="Permalink to "Attributes""></a></h2><table tabindex="0"><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th><th>最低版本</th></tr></thead><tbody><tr><td>type</td><td>按钮类型</td><td>string</td><td>primary / success / info / warning / error / text / icon</td><td>primary</td><td>-</td></tr><tr><td>round</td><td>圆角按钮</td><td>boolean</td><td>-</td><td>true</td><td>-</td></tr><tr><td>plain</td><td>幽灵按钮</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>hairline</td><td>是否细边框</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>loading</td><td>加载中按钮</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>block</td><td>块状按钮</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>size</td><td>按钮尺寸</td><td>string</td><td>small / medium / large</td><td>medium</td><td>-</td></tr><tr><td>disabled</td><td>禁用按钮</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>icon</td><td>图标类名</td><td>string</td><td>-</td><td>-</td><td>-</td></tr><tr><td>loading-color</td><td>加载图标颜色</td><td>string</td><td>-</td><td>-</td><td>-</td></tr><tr><td>open-type</td><td>微信开放能力</td><td>string</td><td>-</td><td>-</td><td>-</td></tr><tr><td>hover-stop-propagation</td><td>指定是否阻止本节点的祖先节点出现点击态</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>lang</td><td>指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文</td><td>string</td><td>zh_CN / zh_TW</td><td>en</td><td>-</td></tr><tr><td>session-from</td><td>会话来源，open-type="contact"时有效</td><td>string</td><td>-</td><td>-</td><td>-</td></tr><tr><td>send-message-title</td><td>会话内消息卡片标题，open-type="contact"时有效</td><td>string</td><td>-</td><td>当前标题</td><td>-</td></tr><tr><td>send-message-path</td><td>会话内消息卡片点击跳转小程序路径，open-type="contact"时有效</td><td>string</td><td>-</td><td>当前分享路径</td><td>-</td></tr><tr><td>send-message-img</td><td>会话内消息卡片图片，open-type="contact"时有效</td><td>string</td><td>-</td><td>截图</td><td>-</td></tr><tr><td>app-parameter</td><td>打开 APP 时，向 APP 传递的参数，open-type=launchApp 时有效</td><td>string</td><td>-</td><td>-</td><td>-</td></tr><tr><td>show-message-card</td><td>是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>classPrefix</td><td>类名前缀，用于使用自定义图标，参见<a href="/component/icon.html#自定义图标">icon</a></td><td>string</td><td>-</td><td>'wd-icon'</td><td>0.1.27</td></tr><tr><td>button-id</td><td>按钮的唯一标识，可用于设置隐私同意授权按钮的 id</td><td>string</td><td>-</td><td>-</td><td>1.3.6</td></tr><tr><td>scope</td><td>支付宝小程序使用，当 open-type 为 getAuthorize 时有效。</td><td>ButtonScope</td><td><code>phoneNumber</code> / <code>userInfo</code></td><td>-</td><td>1.3.14</td></tr></tbody></table><h3 id="buttonopentype-开放能力" tabindex="-1">ButtonOpenType 开放能力 <a class="header-anchor" href="#buttonopentype-开放能力" aria-label="Permalink to "ButtonOpenType 开放能力""></a></h3><table tabindex="0"><thead><tr><th>属性</th><th>说明</th></tr></thead><tbody><tr><td>feedback</td><td>打开“意见反馈”页面，用户可提交反馈内容并上传日志。</td></tr><tr><td>share</td><td>触发用户转发</td></tr><tr><td>getUserInfo</td><td>获取用户信息，可以从@getuserinfo 回调中获取到用户信息</td></tr><tr><td>contact</td><td>打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以从 @contact 回调中获得具体信息</td></tr><tr><td>getPhoneNumber</td><td>获取用户手机号，可以从@getphonenumber 回调中获取到用户信息</td></tr><tr><td>getRealtimePhoneNumber</td><td>实时获取用户手机号，可以从@getrealtimephonenumber 回调中获取到用户信息，仅微信小程序</td></tr><tr><td>launchApp</td><td>小程序中打开 APP，可以通过 app-parameter 属性设定向 APP 传的参数</td></tr><tr><td>openSetting</td><td>打开授权设置页</td></tr><tr><td>chooseAvatar</td><td>获取用户头像，可以从@chooseavatar 回调中获取到头像信息</td></tr><tr><td>getAuthorize</td><td>支持小程序授权，支付宝小程序配合<code>scope</code>使用，可以实现<code>getPhoneNumber</code>和<code>getUserInfo</code>功能。</td></tr><tr><td>lifestyle</td><td>关注生活号，支付宝小程序</td></tr><tr><td>contactShare</td><td>分享到通讯录好友，支付宝小程序</td></tr><tr><td>agreePrivacyAuthorization</td><td>用户同意隐私协议按钮。可通过 @agreeprivacyauthorization 监听用户同意隐私协议事件。</td></tr></tbody></table><h2 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to "Events""></a></h2><table tabindex="0"><thead><tr><th>事件名称</th><th>说明</th><th>参数</th><th>最低版本</th></tr></thead><tbody><tr><td>click</td><td>点击事件</td><td><code>event</code></td><td>-</td></tr><tr><td>getuserinfo</td><td>获取用户信息</td><td><code>detail</code></td><td>-</td></tr><tr><td>contact</td><td>客服消息回调，open-type="contact"时有效</td><td><code>detail</code></td><td>-</td></tr><tr><td>getphonenumber</td><td>获取用户手机号回调，open-type=getPhoneNumber 时有效</td><td><code>detail</code></td><td>-</td></tr><tr><td>getrealtimephonenumber</td><td>实时获取用户手机号回调，open-type=getRealtimePhoneNumber 时有效</td><td><code>detail</code></td><td>1.13.0</td></tr><tr><td>error</td><td>当使用开放能力时，发生错误的回调，open-type=launchApp 时有效</td><td><code>detail</code></td><td>-</td></tr><tr><td>launchapp</td><td>打开 APP 成功的回调，open-type=launchApp 时有效</td><td><code>detail</code></td><td>-</td></tr><tr><td>opensetting</td><td>在打开授权设置页后回调，open-type=openSetting 时有效</td><td><code>detail</code></td><td>-</td></tr><tr><td>chooseavatar</td><td>获取用户头像回调，open-type=chooseAvatar 时有效</td><td><code>detail</code></td><td>-</td></tr><tr><td>agreeprivacyauthorization</td><td>用户同意隐私协议回调，open-type=agreePrivacyAuthorization 时有效</td><td><code>detail</code></td><td>-</td></tr></tbody></table><h2 id="外部样式类" tabindex="-1">外部样式类 <a class="header-anchor" href="#外部样式类" aria-label="Permalink to "外部样式类""></a></h2><table tabindex="0"><thead><tr><th>类名</th><th>说明</th><th>最低版本</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式</td><td>-</td></tr></tbody></table><h2 id="源代码" tabindex="-1">源代码 <a class="header-anchor" href="#源代码" aria-label="Permalink to "源代码""></a></h2>`,47);function r(o,E,g,c,y,u){const s=d("ExternalLink");return e(),n("div",null,[k,i(s,{href:"https://github.com/Moonofweisheng/wot-design-uni/tree/master/src/subPages/button"},{default:a(()=>[t("文档")]),_:1}),t(" • "),i(s,{href:"https://github.com/Moonofweisheng/wot-design-uni/tree/master/src/uni_modules/wot-design-uni/components/wd-button"},{default:a(()=>[t("组件")]),_:1})])}const C=h(p,[["render",r]]);export{F as __pageData,C as default};
|