iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
Modern Web

30天30個前端任務系列 第 2

#1. Hidden Search Component搜尋框彈出效果(CSS)

今天的任務:

部署至GitHub Page(後續部署在vercel)

搜尋框彈出效果

Demo LinkGit Commit

以下說明執行任務經過


搜尋框彈出效果(in src/components/Home.vue)

彈出效果的邏輯

當點擊button tag時,會觸發input tag彈出,再點擊input tag時,運用focus偽類別固定寬度。滑鼠移開點擊其他地方,解除focus狀態,input tag則收回原本樣子。

關鍵點

要如何點擊button tag後,接著觸發input tag?

嘗試做法

tailwind css
主要是找到gruop focus功能。處理辦法是在父層被點擊的時候,子層中的button tag和input tag便會啟動focus偽類選擇器。而父層要必須要以設置group屬性才會有用。

tailwind + scss
另一個作法是綜合tailwind和scss,也是這次實作採用的方式。Icon部分採用我最近很喜歡的Iconify,另外也玩了一下二階貝茲曲線

#search-box {
  .btn-search:focus ~ .icon-search {
    color: black;
  }
  .btn-search:focus ~ .input-search {
	width: 180px;
	background-color: #fff;
    border-left-width: 8px;
    border-color: transparent;
	transition: all 400ms cubic-bezier(0,-0.23,.35,2);
   }
   .input-search {
    transition: all .3s ease-in-out;
   }
   .input-search::placeholder {
    margin-left: 0.5rem;
    color: black;
    font-weight: 200;
    }
   .input-search:focus {
     width: 180px;
     background-color: #fff;
     border-left-width: 8px;
     border-color: transparent;
   }
}
Git Commit

部署至GitHub Page(debugging..)

Vite的官網有提到部署至GitHub Page的設置,主要是在vite.config.js當中設定base的部分。

我的設定檔如下

// package.json
{
  "name": "30widgetsmarathon",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "NODE_ENV=production vite build",
    "deploy": "sh deploy.sh"
  },
  "dependencies": {
    // 略
  },
  "devDependencies": {
    // 略
  }
}
// vite.config.js
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [vue()],
  // 環境變數是production的話,就按照Vite官方文件,base設為'/<repo_name>/',否則為根目錄。
  base: process.env.NODE_ENV === 'production' ? '/30WidgetsMarathon/' : './'
})

部署至GitHub Page上後,出現blank page
https://ithelp.ithome.com.tw/upload/images/20210902/20130534inEmrSRRht.png

可以見到<div id="app">部分沒有成功掛載到Vue實體。但css、js、favicon都有打包成功,也在html中引入。但爬文爬了許久,依然找不到癥結點。

明天任務

  1. 照片模糊載入效果
  2. 持續處理部署GitHubPage問題(day3.更新:後續改用Vercel部署網站)

上一篇
#0. 前言+環境配置
下一篇
#2. Blurring Loading Image(原生JS版), Vercel 出乎意料好用
系列文
30天30個前端任務19

尚未有邦友留言

立即登入留言