为社区贡献高颜值的原生自定义组件(g-ui)的第5天：按钮

分享开发经验瓜分5000元大奖，聊聊#我写代码那些年#的故事

Flag: 坚持为社区贡献高颜值原生自定义组件！🎉🎉🎉

Motive: 在遇到问题的时候得到过很多朋友的耐心回答和讲解，所以也希望能为社区做点贡献！🌈🌈🌈

Introduce: 非常高兴和大家在这里相遇，喜欢写代码，非常欢迎社区的朋友与我交流！🚀🚀🚀

今日自定义组件：《按钮》

g-ui的按钮(下称gu-button)样式非常全面，在类型方面包括：default、primary、warning、success、error、info，同样gu-button还支持设置全屏宽度与自适应宽度、圆角与圆形等非常多的自定义属性

先来看效果，需要的小伙伴可以滚动至文章末尾获取组件。

可以通过设置 size 属性来修改按钮尺寸，该属性有四个可选值：default、medium、small、mini，他们的比例就像下面这样：

默认情况下，gu-button的宽度是自适应的，但是我们可以通过设置 full-width 属性来让它表现称一个撑满全屏的按钮，同时来可以结合其他属性一起设置：

<gu-button type="primary" full-width round>我是按钮</gu-button>

交互效果方面，g-ui还为按钮设置了不同的点击效果，我们可以通过修改 tap-effect 属性来使用不同的点击效果，这个属性的默认值是none，即不使用任何点击效果，它的可选值有flicker（闪烁）和wave（水波）两种，这两种点击效果就像下面这样：

tap-effect为wave时，阴影部分会以我们手指点击的地方为中心向四周散开，就像水波一样

通过设置 plain 属性可以让按钮表现为朴素按钮

<gu-button size="small" plain>测试</gu-button>

通过设置 loading 属性来使按钮展示为加载状态

<gu-button loading>加载中</gu-button>

参数	说明	类型	默认值	可选值
type	类型	String	default	primary、warning success、error、info
size	尺寸	String	default	medium、small、mini
round	是否为圆角	Boolean	false	true
circle	是否为圆形，该属性仅在使用图标按钮(icon属性不为空时生效)	Boolean	false	true
fullWidth	是否宽度撑满父元素	Boolean	false	true
plain	是否朴素按钮	Boolean	false	true
loading	是否展示加载状态	Boolean	false	true
icon	是否为圆形，该属性仅在使用图标按钮(icon属性不为空时生效)	Boolean	false	true
throttleTime	节流时间，按钮在设置的时间内只能触发一次，单位为毫秒，例如传入 1000代表一秒内只能生效一次	Number	0	-
tapEffect	点击动画效果	String	-	flicker、wave，详见上方点击效果一栏
formType	同原生button，用于嵌在 form 组件中，控制 submit/reset，详情见 form-type 的合法值	String	-	见： form-type 的合法值
openType	同原生button，用于调用开放能力, 详情见 open-type 的合法值	String	-	见： open-type 的合法值

一、Github: https://github.com/lianggaoqiang/g-ui

Git拉取到的默认是项目源码，其中ts文件未编译，若使用typescript开发则可以直接引用，js开发则不能直接使用，这种情况有三种解决方案：

修改项目根目录下的project.config.json文件内的setting.useCompilerPlugins为["typescript"]并重启项目，具体可查看文档：Typescript支持
使用tsc指令编译项目内所有ts文件
使用下方的npm方式下载g-ui

二、npm: https://www.npmjs.com/package/@cellent/g-ui

npm install @cellent/g-ui

<!-- page.ttml 引用页面的ttml文件 -->
<gu-button type="primary" size="small" plain tap-effect="wave">这是个按钮</gu-button>

{
    "usingComponents": {
        "gu-button": "ext://@cellent/g-ui/button"
    }
}