12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- <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'
- }
- },
- computed: {
- lineStyle() {
- let style = {};
- style.backgroundColor = this.color;
- style.margin = this.margin;
-
- if(this.direction == 'row') {
- style.height = '1px';
- style.width = this.length;
- if(this.hairLine) style.transform = 'scaleY(0.5)';
- } else {
-
- style.width = '1px';
- style.height = this.length;
- if(this.hairLine) style.transform = 'scaleX(0.5)';
- }
- return style;
- }
- }
- }
- </script>
- <style scoped lang="scss">
- .u-line {
- vertical-align: middle;
- }
- </style>
|