flex to achieve an intermediate text, on both sides of the horizontal line (1px)

Learning implementation method to achieve 1px border. I can not wait to record it. Incidentally, the use of flex layout + 1px intermediate border achieve a simple text, both sides of the horizontal component.

Show

First look at the components of demand:

• Left and right horizontal line is displayed at the moving end 1px.
• The middle portion of the content may be freely passed text.
• Meanwhile number, regardless of the text on both sides of the horizontal line will decrease as the content increases, the maximum width until the content is 40% occupied.
  
  According to the above demand, we have to develop step.

1px border realization

mixin.styl

First, a method is defined in mixin.styl the border-1px. At this time, a width of 1.5 drp of the apparatus is shown 1.5px. Dpr displayed in the device 2 is 2px. Next you want to set zoom base.styl in order to truly realize 1px.

no-wrap() //  文字超出省略
  text-overflow ellipsis
  overflow hidden
  white-space nowrap

border-1px($color) // 底部1px的边框，可传入颜色
  position: relative
  &::after 
    display block
    position absolute
    left 0
    bottom 0
    width 100%
    border-top 1px solid $color
    content ' '

base.styl

In base.styl, query the device dpr. Multiplied by the zoom factor to reach the effect of 1px.

@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5)
    .border-1px
        &::after
            -webkit-transform scaleY (0.7)
            transform scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)
    .border-1px
        &::after
            -webkit-transform scaleY (0.5)
            transform scaleY(0.5)

Basic components: line-text.vue

Here the use of flex-shrink attribute layout flex, flex-shrink when expressed can be compressed to 1, the horizontal portion of the attribute set is 1, Similarly, content layer width should be propped up until 40%.

<template>
  <div class="box-wrapper">                <!-- 外层 -->
    <div class="left border-1px"></div>    <!-- 左侧横线 -->
    <div class="text">{{content}}</div>    <!-- 内容文字 -->
    <div class="right border-1px"></div>   <!-- 右侧横线 -->
  </div>
</template>

<script type='text/ecmascript-6'>
export default {
  props: {
    content: { /* 根据外部传入的content显示内容 */
      type: String,
      default: '加载中加载中加载中加载中加载中加载中加载中加载中加载中。。。'
    }
  }
}
</script>

<style lang="stylus">
@import '../common/stylus/mixin'
.box-wrapper
  display flex                    /* 外层设置flex布局 */
  width 100%                      /* 宽度100% */
  height 50px                     /* 高度50px，可自定义 */
  overflow hidden                 /* 超出隐藏 */
  .left, .right
    flex-shrink 1                 /* 横线设置为可压缩 */
    width 49%                     /* 初始时横线宽度 */
    margin 0 10px
    transform translate(0, -50%)  /* 向上偏移50% */
    border-1px(#ccc)              /* mixin.styl中定义的border-1px方法 */
  .text
    flex-shrink 0                 /* 内容设置为不可压缩 */
    text-align center
    line-height 50px
    max-width 40%
    no-wrap()                     /* 文字超出省略 */
</style>

Application components: line-text-apply.vue

The assembly is placed in an example of how application components, the incoming content will be displayed:

<template>
   <div>
     <LineText :content="content"></LineText>
   </div>
</template>

<script type='text/ecmascript-6'>
import LineText from 'base/line-text'
export default {
  data () {
    return {
      content: '未完待续'
    }
  },
  components: {
    LineText
  }
}
</script>

<style>

</style>