123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116 |
- <template>
- <view
- class="u-divider"
- :style="[$u.addStyle(customStyle)]"
- @tap="click"
- >
- <u-line
- :color="lineColor"
- :customStyle="leftLineStyle"
- :hairline="hairline"
- :dashed="dashed"
- ></u-line>
- <text
- v-if="dot"
- class="u-divider__dot"
- >●</text>
- <text
- v-else-if="text"
- class="u-divider__text"
- :style="[textStyle]"
- >{{text}}</text>
- <u-line
- :color="lineColor"
- :customStyle="rightLineStyle"
- :hairline="hairline"
- :dashed="dashed"
- ></u-line>
- </view>
- </template>
- <script>
- import props from './props.js';
-
- export default {
- name:'u-divider',
- mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
- computed: {
- textStyle() {
- const style = {}
- style.fontSize = uni.$u.addUnit(this.textSize)
- style.color = this.textColor
- return style
- },
-
- leftLineStyle() {
- const style = {}
-
- if (this.textPosition === 'left') {
- style.width = '80rpx'
- } else {
- style.flex = 1
- }
- return style
- },
-
- rightLineStyle() {
- const style = {}
-
- if (this.textPosition === 'right') {
- style.width = '80rpx'
- } else {
- style.flex = 1
- }
- return style
- }
- },
- methods: {
-
- click() {
- this.$emit('click');
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- @import '../../libs/css/components.scss';
- $u-divider-margin:15px 0 !default;
- $u-divider-text-margin:0 15px !default;
- $u-divider-dot-font-size:12px !default;
- $u-divider-dot-margin:0 12px !default;
- $u-divider-dot-color: #c0c4cc !default;
- .u-divider {
- @include flex;
- flex-direction: row;
- align-items: center;
- margin: $u-divider-margin;
- &__text {
- margin: $u-divider-text-margin;
- }
- &__dot {
- font-size: $u-divider-dot-font-size;
- margin: $u-divider-dot-margin;
- color: $u-divider-dot-color;
- }
- }
- </style>
|