hello，大家好，不知道大家对lin-ui用的是否熟悉呢？最近要开发小程序，在选型上我决定用lin-ui这个组件，感觉还不错，接下来，我会带领大家去分析其中的一个组件，Button组件。
首先，我们需要去到Lin-Ui 官方文档去分析这个组件有什么的功能，网址是doc.mini.7yue.pro/component/b…，入下图：
然后我们需要把源码下载下来，在这个网页上：
下载完源码之后，打开代码，如下图：
注意了，是dist目录下面，就是源码所在地，当上面的一切你都准备好，我们就开始分析组件吧！
首先我们来看一下wxml 文件如下图：
注意了，是dist目录下面，就是源码所在地，当上面的一切你都准备好，我们就开始分析组件吧！
首先我们来看一下wxml 文件如下图：
当打开这个文件的时候，我的第一反应，哎？怎么那么奇怪，为啥会有两个标签，button是不用说的，那么label是干嘛用的呢？经过一系列的查证，发现label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 也就是说它就会聚焦到button组件上面，在这个过程通过了label这个标签进行一个通话筒功能，另外<label> 标签的 for 属性应当与相关元素的 id 属性相同。这就像是那条电话线一样。
OK，上面已经说明白了label标签和button之间的内在关系，那么他们的外在关系是什么呢？不知道大家有没有注意到，如下两图：
从这里我们可以看到他们之间的关系，label里面有个容器是相对定位的，而真正的button是绝对定位的，而且还被用火箭送上了宇宙，连个面都见不着，这就尴尬了，这样子搞，怎么设置按钮的样式啊？
答案其实已经写在了上面，在label里面的那个容器其实已经给了它设定了样式了，如下图：
看到这些，我觉得异常熟悉，大家有没有一种似曾相识的感觉？请看下面：
其实这些就是外部传进去的属性参数，而在js中是需要这样的设定的：
这里面他们都有默认值，这就为什么官方文档里面都说你不设定也会有东西处理的原因了，感慨一下，一切皆是命中注定？，屁话，前人栽树而已。。。。。。
OK，讲到这里，不知道大家有没有发现我的一个讲解的思路呢，先从文档入手，再看xwml代码，分析它的架构，再瞧一下他的样式，最后根据wxml给我的线索再看js逻辑，总的来说，分析问题，思路从哪里开始，怎么开始，很重要哦！
看完上面你以为分析玩了吗？傻瓜，还有一个很不错的点呢，都说有js逻辑的组件是霸道的，因为你先设置了方法，那别人用你的组件的时候，还怎么操作，而这个组件是怎么做到js方法的兼容的呢？请看下面：
这里的话我们需要看一下小程序的官方文档，你会发现this.triggerEvent 这个语法，他的意思就是给你一个途径去获取外面的事件，而在这里他的事件名称是 lintap ,也就是
这里了，所以在源码上的东西和文档是一一对应的，所以我们在使用的时候才可以假设是这样：
<l-button bind:lintap="handleClickItem" >如上图，有没有注意到我的蓝色框，在这里的沿用微信button原生的开放功能的时候代码是这样的：
同样的语法糖，但是不同的用法，大家好好琢磨一下，这里面的data变量是什么呢？如果我问你，你会怎么解决这个问题？ 如果是我的话，我会改他的源码，console 一下这个data出来，啥子都明白了，但是我没有这么做，因为我写这个的目的是为了把他设计组件的思路写出来：总的来说就是通过 把label和button关联起来，把样式写到label标签里面的容器上面，然后功能继续沿用button的所有功能，这种的关系就像是明星和他的经纪人之间的关系
