vue绑定background_Vue记账项目-Money组件1

一、HTML

<template>
     <layout>
       <div class="tags">
         <ul class="current">
           <li>衣</li>
           <li>食</li>
           <li>住</li>
           <li>行</li>
         </ul>
         <div class="new">
           <button>新增标签</button>
         </div>
       </div>
       <div>
         <label class="notes">
           <span class="name">备注</span>
           <input type="text">
         </label>
       </div>
       <div>
         <ul class="types">
           <li class="selected">支出</li>
           <li>收入</li>
         </ul>
       </div>
       <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>
     </layout>
</template>

<script lang="ts">
import Nav from '@/components/Nav.vue';
export default {
name: "Money",
  components: {Nav}
}
</script>

<style lang="scss" scoped>
</style>

二、CSS部分

1、先reset，去掉默认格式

2、全局的字体和行高

Fonts.css​zenozeng.github.io

3、控制变量

如果全局有一个红色，那么就要把这个红色提前定义好

helper.scss里除了变量、函数和mixin不要放别的东西

4、局部样式

圆角是border-radius高度的50%，而boder-radius默认是宽度的50%

标签样式

<style lang="scss" scoped>
@import "~@/assets/style/helper.scss";

.tags {
  font-size: 14px;
  padding: 16px;

  > .current {
    display: flex;

    > li {
      background: #d9d9d9;
      $h: 24px;
      height: $h;
      line-height: $h; //一行字的时候才能用height等于line-height一样高居中
      border-radius: $h/2;
      padding: 0 16px;
      margin-right: 12px;
    }
  }

  > .new {
    padding-top: 16px;

    button {
      background: transparent;
      border: none;
      color: #999;
      border-bottom: 1px solid;
      padding: 0 4px; //使得下划线比文字要长
    }
  }
}
</style>

备注部分

.notes{
  background: #f5f5f5;
  font-size: 14px;
  padding-left: 16px;
  display: flex;
  align-items: center;
  .name{
    padding-right:16px;
  }
  input{
    flex-grow:1;
    background: transparent;
    border: none;
    padding: 16px 16px 16px 0;
  }
}

支出收入部分

.types{
  background: #c4c4c4;
  display: flex;
  text-align:center;
  font-size: 24px;
  >li{
    width:50%;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    &.selected::after{
      content:'';
      position:absolute;
      bottom:0;
      left:0;
      width:100%;
      height:4px;
      background: #333;
    }
  }
}

注意：支出下面选择的下滑线，如果使用用border-bottom，取消选择状态前后，支出收入会上升和下降位置，因此使用绝对定位更好。

数字键盘部分

.numberPad{
  .output{
    @extend %clearFix;
    font-size: 36px;
    font-family: Consolas,monospace;
    padding: 9px 16px;
    text-align: right;
  }
  .buttons{
    @extend %clearFix;//继承
    >button{
      width:25%;
      height: 64px;
      float:left;
      background: transparent;
      border:none;
      &.ok{
        height:64*2px;
        float:right;
      }
      &.zero{
        width:25*2%
      }
      $bg:#f2f2f2;
      &:nth-child(1){
      background: $bg;
    }
      &:nth-child(2),&:nth-child(5){
        background: darken($bg,4%);//颜色函数
      }
      &:nth-child(3),&:nth-child(6),&:nth-child(9){
        background: darken($bg,4*2%);
      }
      &:nth-child(4),&:nth-child(7),&:nth-child(10){
        background: darken($bg,4*3%);
      }
      &:nth-child(8),&:nth-child(11),&:nth-child(13){
        background: darken($bg,4*4%);
      }
      &:nth-child(14){
        background: darken($bg,4*5%);
      }
      &:nth-child(12){
        background: darken($bg,4*6%);
      }
    }
  }
}

继承办法避免重复

scss颜色函数

如何给一个组件传我们想要的类，使用classPrefix添加前缀，这样就可以用一个前缀绑定所有需要绑定的div，而不是需要传多个class

money组件给layout组件传css

去掉整体上下布局空隙（倒着布局）

再把原先布局颠倒上下顺序即可达到效果，标签栏一样

代码模块化（每个组件不超过150行）

将HTML和CSS部分分别模块化到各自组件中