1.0.9 • Published 2 years ago
rose-uniapp v1.0.9
rose.css 文档
rose.css是通用的CSS样式。
规则
- @import "@/libs/scss/rose.scss"; //组件类
- // @import "@/libs/scss/placeholder/_import-placeholder.scss"; //组件类
使用
可配置参数
| 样式名 | 值 | Description |
|---|---|---|
| DFlex | display:flex; | |
| XLT | display:flex;flex-direction:row;justify-content:flex-start;align-items:center; | 方向：横横向对齐：左纵向对齐：上 |
| XLC | 横，左，居中 | |
| XLB | ||
| XCT | ||
| XCC | ||
| XCB | ||
| XRT | ||
| XRC | ||
| XRB | ||
| XbetweenT | ||
| XbetweenC | ||
| XbetweenB | ||
| XaroundT | ||
| XaroundC | ||
| XaroundB | ||
| YLT | ||
| YLC | ||
| YLB | ||
| YCT | ||
| YCC | ||
| YCB | ||
| YRT | ||
| YRC | ||
| YRB | ||
| YLbetween | ||
| YCbetween | ||
| YRbetween | ||
| YLaround | ||
| YCaround | ||
| YRaround | ||
| .M? (5,10,15,20) | margin: ?px; (5,10,15,20) | 4个值 (5,10,15,20) |
| .MT? (5,10,15,20) | margin-top: ?px; (5,10,15,20) | |
| .MB? (5,10,15,20) | margin-bottom: ?px; (5,10,15,20) | |
| .ML? (5,10,15,20) | margin-left: ?px; (5,10,15,20) | |
| .MR? (5,10,15,20) | margin-right: ?px; (5,10,15,20) | |
| .MTB? (5,10,15,20) | margin-top: ?px; margin-bottom: ?px; | |
| .MLR? (5,10,15,20) | margin-left: ?px; margin-right: ?px; | |
| .P? (5,10,15,20) | padding: ?px; (5,10,15,20) | 4个值 |
| .PT? (5,10,15,20) | padding-top: ?px; | |
| .PB? (5,10,15,20) | padding-bottom: ?px; | |
| .PL? (5,10,15,20) | padding-left: ?px; | |
| .PR? (5,10,15,20) | padding-right: ?px; | |
| .PTB? (5,10,15,20) | padding-top: ?px; padding-bottom: ?px; | |
| .PLR? (5,10,15,20) | padding-left: ?px; padding-right: ?px; | |
- type/size/iconSize/height/radius/border等可以实现快速设置，根据scss配置，可以快速实现自己的效果；
- 其它的style设置可以覆盖掉这些快捷设置的效果；
- 既满足一键配置，也满足灵活定义。也就是满足共性，包容特性；
slot
- 默认slot，覆盖title/value；
- extra，在value与indicator之间提供更多配置；
事件回掉
| Event | Params | Description |
|---|---|---|
| cellClicked | 点击触发 |
示例与结果
说明
我对一套UI的理解就是，公用性比较强的组件集合。
我们把这些常用的，配置量偏小的，或者说只要很少的配置就能满足要求的组件合起来组成一套UI。而不是试图去使用这些UI组件去适配所有的样式，希望借此满足所有的组件。
一个UI组件里面考虑太多的因素，或者试图利用它去实现一堆的内容，显然是不合适的。
我们将UI分成了两部分，一部分是公共组件，另一部分是业务中常见的一些组件。
很多业务常用组件，是很难通过一个UI组件来配置完成的，或者说就相当于重新写了一个组件。
与其这样，我们还不如保持UI组件的轻量化。
在这套组件内，我们不仅会提供公用的UI组件，也会提供大多数业务所涉及到的样式组件。
公用UI组件基本上可以通过配置一下就能满足要求，如果改动量很大，或者层级嵌套很深，建议重新写一个组件，毕竟去适配一个组件消耗的精力可能比自己写一个还要大。
而且作为公用（大家都可以用的组件）来说，需要考虑很多因素，而自己写的往往只需要完成样式即可。适配所有人和适配自己是完全不一样的。
原则就是：宁愿多写几个，也不可一个去勉强适应多个。