Money.vue 页面布局

html布局

先总体分四大块，再具体细化

<div>tags</div>
<div>notes</div>
<div>type</div>
<div>numberPad</div>

// tags
<div class="tags">
  <ul class="current">
	<li>衣</li>
	<li>食</li>
	<li>住</li>
	<li>行</li>
  </ul>
   <divclass="new">
     <button>新增标签</button>
  </div>
</div>
// notes
<div>
    <label class="formItem">
      <span class="name">备注</span>
      <input type="text">
    </label>
</div>
// type
<div>
  <ulclass="types">
    <liclass="selected">支出</li>
    <li>收入</li>
  </ul>
</div>
// numberPad
<div class="numberPad">
  <div class="output">100</div>
  <div class="buttons">
	<button>1</button>
	<button>2</button>
	<button>3</button>
	<button>删除</button>
	<button>4</button>
	<button>5</button>
	<button>6</button>
	<button>清空</button>
	<button>7</button>
	<button>8</button>
	<button>9</button>
	<button>OK</button>
	<button>0</button>
	<button>.</button>
  </div>
</div>

css布局

scss @extend @extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。

// 在 helper.scss文件声明
%outerShadow{
  box-shadow: 0 0 3px $color-shadow;
}

// 在vue文件中使用
<style lang="scss" scoped>
    @import "~@/assets/style/helper.scss";
      nav{
        @extend %outerShadow;
      }
</style>

全局属性单独文件

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
a{
  text-decoration:none;
  color:inherit;
}
ul,ol{
  list-style-type: none;
}
button,input{
  font: inherit; //按钮字体样式继承
}
:focus{
  outline: none;
}

衣食住行字体垂直居中：

a. flex布局
    display:flex;
    justify-content:center;
    align-items:center;
	
b. 一行字：height与line-height相等
    line-height:64px;
    height:64px;
c. 使用padding撑开

实现支出收入选中后下划线显示：

 使用boder-bottom,当class消失会造成文字上浮
 使用绝对定位

    >li{
      &.selected::after{
        content: '';
        position:absolute;
        bottom: 0;
        left:0;
        width: 100%;
        height:4px;
        background: #333;
    }

scss的%,placeholder功能

 // helper.scss
 %clearFix{
   &::after{
     content: '';
     clear: both;
     display: block;
   }
 }

 // money.vue 使用
 .buttons {
   @extend %clearFix;
 }

numberPad output 上下两层内阴影

box-shadow: inset 0 -5px 5px -5px fade_out(black, 0.5),
            inset 0 5px 5px -5px fade_out(black, 0.5);

Money组件布局,用前缀控制组件内css样式

vue影响非当前组件的css，可以再写一个<style>标签，不添加scoped属性
父组件添加classPrefix，子组件传值

//Layout组件
<div class="layout-wrapper" :class="classPrefix && `${classPrefix}-wrapper`">
  <div class="content" :class="classPrefix && `${classPrefix}-content`">
  <slot></slot>
  </div>
  <Nav/>
</div>
<script lang="ts">
  export default{
    name:'Layout',
    props:['classPrefix']
  };
</script>


//Money组件引用layout
<layout class-prefix="layout">
</layout>
<style lang="scss">
  .layout-content{
	border:3px solid red;
  }
  .layout-wrapper{
	border:3px solid green;
  }
</style>

小键盘不采用flex布局原因：

ok高度会造成0 . 下浮
解决措施：float布局  整体左浮，ok右浮

  .numberPad{
    .buttons{
      @extend %clearFix;
      > button{
        width:25%;
        height: 64px;
        float:left;
        background:transparent;
        border:none;
        &.ok{
          height: 64*2px;
          float: right;
        }
       }
     }
  }

Tips

Fonts.css ：全局字体

font-family : Consolas, monospace; //优先第一个字体，若无则用类似编程字体

Darken在当前背景色程度上加深%

>&:nth-child(2),&:nth-child(5){
  background: darken(#f2f2f2,4%); 
}
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.6);
                                  ||
box-shadow: inset 0 0 5px fade_out(black,0.4); //fade_out使颜色半透明

Box-shadow inset

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */

box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

Money组件模块化

<template>
  <Layout class-prefix="layout">
    <NumberPad/>
    <Types/>
    <Notes/>
    <Tags/>
  </Layout>
</template>

<script lang="ts">
  import NumberPad from '@/components/Money/NumberPad.vue';
  import Tags from '@/components/Money/Tags.vue';
  import Notes from '@/components/Money/Notes.vue';
  import Types from '@/components/Money/Types.vue';

  export default {
    name: 'Money',
    components: {Tags, Notes, Types, NumberPad}
  };
</script>