Room Manager In React/Vue.js

  • 標題放置於圖片前面的技巧

    • 外面圖片cover設定為relative
      • 裡面設定absolute
      • 就可以讓標題指定到想放的位置，通常一開始會跑到很上面的地方
    • 把圖片置中，讓縮放不會怪怪的
      • background-size: cover
      • background-position: center center
    • 偽元素增加錢字號
      • 讓使用者可以直接複製金額而不會複製到錢號
    • 設置圖片滑鼠移入放大縮小效果
      • background-image: url();
      • background-size: 110% auto;
    • 外框邊框效果與隱藏超出外框的設定
      • border-radius: 2px
      • overflow: hidden
    • 外框滑鼠滑入背景陰影
      • box-shadow: 0 10px 1px -5px rgba(0, 0, 0, 0.1)
    • 利用標題屬性來排列元素，讓外面的元素可以設定邊距
      • h5英文說明欄位
      • h4排列下方的價錢(本身已經是粗體字，而且在同一行)

  • Vue元件的第一個參數首字母可以是大寫也可以是小寫，之後一律小寫(把元件想成是自定義的html tag比較好明白)

    • computed()方法沒有辦法用在background-image:url()，要改用methods
    • 透過使用methods，可以在設定style的時候，把url傳入，此時會產生相對應的css設定
    • component目前還不知道要怎麼繼承父類別的methods，先將methods寫在component裡面

  • 使用font-awesome加入小圖示

    • input是當行元素，要用v-model來綁定值
    • select的值要用:value關聯回去原本的data

  • CSS hack

    • room_edit:設定邊框和邊距
    • room_tag:呈現三個元素
      • h4:標題和垃圾桶
      • input.toggle-check(type=“checkbox”):利用checkbox的偽元素隱藏或顯示編輯區域
      • .edit_part:真正的編輯區域
    • ＊外層要用label包住所有作用的區塊checkbox才有作用

  • Room Manager In React

  • Room Manager In Vue.js