https://vuetifyjs.com/en/

https://ithelp.ithome.com.tw/articles/10315719

建議一開始就通過npm create vuetify@latest 創設專案，過程中會幫你加入vue、SASS、eslint、router、pinia等套件(選擇性)

若要中途加入也可參考vuetifyjs官方文件下方有說明，但就要回頭修改main.js

v-fab關於position的雷

原想透過v-fab做一個fixed固定在html右側的按鈕，發現不管怎麼下position-fixed都不管用

原來是v-fab有float的屬性，因此會受到影響

改用v-btn撰寫就正常多了

  <v-btn
    v-show="model"
    v-scroll="onScroll"
    color="brown-darken-2"
    icon="mdi-arrow-up"
    class="position-fixed bottom-0 right-0 mb-16 mr-8"
    @click="goTo(0)"
  />

Fixed回到頁首按鈕 (包含當網頁開始捲動一定程度才顯示該按鈕)

https://codepen.io/carlos-henreis/pen/vzXKBJ?editors=1010

https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/components/app/BackToTop.vue

  <v-btn
    v-show="model"
    v-scroll="onScroll"
    color="brown-darken-2"
    icon="mdi-arrow-up"
    class="position-fixed bottom-0 right-0 mb-16 mr-8"
    @click="goTo(0)"
  />

<script>
import { useGoTo } from 'vuetify'
 export default {
  data() {
    return {     
      model: false,
      goTo: useGoTo(),
    };
  },
  methods: {
     onScroll() {
      this.model = window.scrollY > 200;
    },
  },
};
</script>

v-text-field type=”date” 無法正常透過v-model雙向綁定，回傳修正資料給後端

原程式碼如下：