¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <view class="u-gap" :style="[gapStyle]"></view> |
| | | </template> |
| | | |
| | | <script> |
| | | import props from './props.js'; |
| | | /** |
| | | * gap é´éæ§½ |
| | | * @description 该ç»ä»¶ä¸è¬ç¨äºå
容åä¹é´çç¨ä¸ä¸ªç°è²åéå¼çåºæ¯ï¼æ¹ä¾¿ç¨æ·é£æ ¼ç»ä¸ï¼åå°å·¥ä½é |
| | | * @tutorial https://www.uviewui.com/components/gap.html |
| | | * @property {String} bgColor èæ¯é¢è² ï¼é»è®¤ 'transparent' ï¼ |
| | | * @property {String | Number} height å岿§½é«åº¦ï¼åä½px ï¼é»è®¤ 20 ï¼ |
| | | * @property {String | Number} marginTop ä¸åä¸ä¸ªç»ä»¶çè·ç¦»ï¼åä½pxï¼ é»è®¤ 0 ï¼ |
| | | * @property {String | Number} marginBottom ä¸åä¸ä¸ªç»ä»¶çè·ç¦»ï¼åä½px ï¼é»è®¤ 0 ï¼ |
| | | * @property {Object} customStyle å®ä¹éè¦ç¨å°çå¤é¨æ ·å¼ |
| | | * |
| | | * @example <u-gap height="80" bg-color="#bbb"></u-gap> |
| | | */ |
| | | export default { |
| | | name: "u-gap", |
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin,props], |
| | | computed: { |
| | | gapStyle() { |
| | | const style = { |
| | | backgroundColor: this.bgColor, |
| | | height: uni.$u.addUnit(this.height), |
| | | marginTop: uni.$u.addUnit(this.marginTop), |
| | | marginBottom: uni.$u.addUnit(this.marginBottom), |
| | | } |
| | | return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle)) |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | @import "../../libs/css/components.scss"; |
| | | </style> |