4回答

• 

  Sam

  2018-09-10 16:08:12

  已采纳

  你好，思路是通过js进行运算实现，以左边为例：

  左侧preview的宽度设为：leftW

  右侧每一个item的宽度设为：itemW

  左侧预览文本的宽度设为：charW

  所以需要实现居中，需要将左侧预览文本设置一个marginLeft

  marginLeft = ((leftW + itemW / 2) - charW) / 2

  具体的源码实现在后续课程中会有，敬请期待：）

  0 3
• 

  幕布斯617278

  2019-09-15 16:21:54

  1. 对左右两侧的 .preview 设置 position: relative (通过relative来实现平移居中)

  2. 字符 "A" 显示不居中,无非是多了隐藏起来的一截 .line 的长度

  3. 所以想看让 "A" 看起来居中的话, 其实很简单, 只要将其平移  .line 长度的一半 即可.

     -----------------------------------------------------------------------

  4. 具体做法, 可以通过 this.$ref.xxx.offsetWidth ,先获取到 .select 的整个宽度(就是除了左右两边 .preview 以外的总宽度)

  5. 再用 .select 的总宽度 ÷ fontSizeList 数组的长度 得到每一个 .select-wrapper (即: 线点线) 的宽度

  6. 每一个 .select-wrapper (即: 线点线) 的宽度 ÷ 4 得到 .line 长度的一半

  7. 该值就是 左侧 .preview 的 style 需要设置的 left 数值(左侧 .preview 往右平移)
     

  8. 该值就是 右侧 .preview 的 style 需要设置的 right 数值(左侧 .preview 往右平移)

  
  

  
  

  0 0
• 

  weibo_暗恋喂牛_0

  2019-05-26 18:44:58

  通过  style 属性动态绑定，更方便

  比如 当 index === 0  或 index === fontSizeList.length - 1 时，设置  对应最左和 最右边的 line  flex : 0 0 0;

  设置 最左 和最右 的 select-wrapper  flex: 0.5;

  就是template 上看上去复杂些

  0 0
• 

  梧桐断角

  2018-11-05 22:35:57

  // 可以用css3样式实现啊,前提是知道fontSizeList的长度,
  // 我想的有点复杂, 先算出单个item宽度(100% - 80px) / 14;
  // 然后把preview移到居中的位置 ((100% - 80px) / 14 + 40px) / 2;
  // 最后再往回移动半个preview的距离((100% - 80px) / 14 + 40px) / 2 - 20px;
  // 具体:
  .preview {
      flex: 0 0 px2rem(40);
      @include center;
      position: relative;
      &.left{
          left: calc(((100% - 80px) / 14 + 40px) / 2 - 20px);
         }
      &.right{
          right: calc(((100% - 80px) / 14 + 40px) / 2 - 20px);
       }
  }

  
  

  1 5

  小刀吃萝卜v...

  不用这么复杂吧 `.preview { flex: 0 0 px2rem(50); @include center; box-sizing: border-box; &:first-of-type { padding-left: calc((100% - 100px) / 14); } &:last-of-type { padding-right: calc((100% - 100px) / 14); } }`

  2019-12-25 17:05:07

  共 1 条回复 >