button
按钮。用于替代原生button。
使用方式
html
<!-- 引入 -->
<script type="module" src="https://cdn.jsdelivr.net/npm/webzen-ui/src/component/wz-button/index.js">
<!-- 使用 -->
<wz-button>button</wz-button>风格 type
按钮有4种风格,分别为primary,danger,common和默认。
html
<wz-button type="primary" id="btn">primary</wz-button>
<wz-button type="danger">dashed</wz-button>
<wz-button type="common">common</wz-button>
<wz-button>default</wz-button>尺寸size
按钮有大、中、小三种尺寸,分别为large、default(默认)、small。
html
<wz-button type="primary" size="small">primary</wz-button>
<wz-button type="primary" size="default">primary</wz-button>
<wz-button type="primary" size="large">primary</wz-button>禁用disabled
通过disabled可以禁用按钮,禁用后该按钮上的事件失效
html
<wz-button type="primary">dashed</wz-button>
<wz-button type="primary" disabled>dashed</wz-button>事件 js操作 event
与普通button标签一致。
js
btn.size = 'small';
//原生属性操作
btn.setAttribute('size','small');