这是我参与「第五届青训营 」伴学笔记创作活动的第 18 天

接着记录button组件封装

圆角按钮

圆角按钮的实现思路是，接收一个round参数，round为true时变为圆角按钮，若为false就是默认按钮。

先在props中接收传入的round并设为boolean类型。

然后再计算属性返回他，这种写法相当于< button class="lbutton lbutton-${props.type} lbutton-round">可以实现多个样式绑在一起。然后再css写法中可以使用sass中的&符号来简化演示内容，我们这边只需要格外加一个样式便可以实现效果。

我们可以另起一行写样式。

也可以这样

像上面这样写相当于button的样式是< button class="lbutton lbutton-success lbutton-round">需要同时满足lbutton-success和lbutton-round 才会触发。上面的写法是只要class名中有round就可以实现，所以应用的场景不同。

禁用按钮

通过cursor: not-allowed属性实现，cursor: not-allowed实现鼠标在元素上时候，鼠标按钮会标称一个禁用的红色圆圈的形式。然后搭配opacity来实现一个背景的透明化来实现按钮的整体的禁用状态。

虚线按钮

虚线按钮的实现思路是，改变按钮边框的样式，改为相应的主题颜色，改按钮边框为虚线边框。改文字颜色，在添加鼠标悬浮在虚线按钮上的样式。如下

最终效果为

这是没有鼠标悬浮的虚线按钮

这是鼠标悬浮在虚线按钮上的样式。

然后基本别的样式封装思路和上面的例子是差不多的，只是样式的更改。