123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384 |
- <template>
- <view class="u-line" :style="[lineStyle]">
-
- </view>
- </template>
- <script>
-
- export default {
- name: 'u-line',
- props: {
- color: {
- type: String,
- default: '#e4e7ed'
- },
-
- length: {
- type: String,
- default: '100%'
- },
-
- direction: {
- type: String,
- default: 'row'
- },
-
- hairLine: {
- type: Boolean,
- default: true
- },
-
- margin: {
- type: String,
- default: '0'
- },
-
- borderStyle: {
- type: String,
- default: 'solid'
- }
- },
- computed: {
- lineStyle() {
- let style = {};
- style.margin = this.margin;
-
- if(this.direction == 'row') {
-
- style.borderBottomWidth = '1px';
- style.borderBottomStyle = this.borderStyle;
- style.width = this.$u.addUnit(this.length);
- if(this.hairLine) style.transform = 'scaleY(0.5)';
- } else {
-
- style.borderLeftWidth = '1px';
- style.borderLeftStyle = this.borderStyle;
- style.height = this.$u.addUnit(this.length);
- if(this.hairLine) style.transform = 'scaleX(0.5)';
- }
- style.borderColor = this.color;
- return style;
- }
- }
- }
- </script>
- <style scoped lang="scss">
- @import "../../libs/css/style.components.scss";
-
- .u-line {
- vertical-align: middle;
- }
- </style>
|