快捷導(dǎo)航

vue3登錄界面適配的二種方法實(shí)例代碼

更新時間：2024年12月13日 09:37:06 作者：花花魚

這篇文章主要介紹了vue3登錄界面適配的二種方法,在Vue.js中使用計(jì)算屬性和條件渲染來處理,每種方法都有其適用場景,選擇哪種方法取決于具體需求,需要的朋友可以參考下

1、通過css樣式直接處理，比如tailwindcss

<div class="flex w-full h-full py-5 xl:h-auto xl:py-0 xl:my-0 xl:w-6/12">
          <div
            :class="`${prefixCls}-form`"
            class="relative w-full px-5 py-8 mx-auto my-auto rounded-md shadow-md xl:ml-16 xl:bg-transparent sm:px-8 xl:p-4 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto enter-x"
          >
            <LoginForm />
          </div>
        </div>

安裝 - TailwindCSS中文文檔 | TailwindCSS中文網(wǎng)

2、還有一種方法是手工來判斷是否是移動手機(jī)或者平板，電腦。

const checkDevice = () => {
    let flag = navigator.userAgent.match(
      /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i,
    );
    // if (flag) {
    //   alert('手機(jī)');
    // } else {
    //   alert('電腦');
    // }
    return flag;
  };

2.1、定義一個computed，去實(shí)時的調(diào)用上面的方法：

const isMobile = computed(() => checkDevice());

2.2、template中通過v-if v-else來進(jìn)行處理：

<div  v-if="!isMobile">
</div>
<div v-else>
</div>

3、上面二個方法都很簡捷，也比較方便，看實(shí)際情況。

總結(jié)

到此這篇關(guān)于vue3登錄界面適配的二種方法的文章就介紹到這了,更多相關(guān)vue3登錄界面適配內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

elementui[el-table]toggleRowSelection默認(rèn)多選事件無法選中問題
這篇文章主要介紹了elementui[el-table]toggleRowSelection默認(rèn)多選事件無法選中問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
vue3.0手動封裝分頁組件的方法
這篇文章主要為大家詳細(xì)介紹了vue3.0手動封裝分頁組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
vue項(xiàng)目中使用高德地圖的超詳細(xì)步驟
在vue項(xiàng)目中添加高德地圖,對開發(fā)地圖的開發(fā)人員有一定幫助,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中使用高德地圖的超詳細(xì)步驟,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-03-03
簡單的Vue異步組件實(shí)例Demo
大家都知道當(dāng)使用時才裝入需要的組件，可以有效的提高首次裝入頁面的速度。比如在路由切換時，下面這篇文章主要給大家介紹了關(guān)于如何實(shí)現(xiàn)一個簡單的Vue異步組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。
2017-12-12
Vue下的國際化處理方法
下面小編就為大家分享一篇Vue下的國際化處理方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2017-12-12
vue動態(tài)設(shè)置img的src路徑實(shí)例
今天小編就為大家分享一篇vue動態(tài)設(shè)置img的src路徑實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Iframe在Vue中的狀態(tài)保持技術(shù)
這篇文章主要為大家介紹了Iframe在Vue中的狀態(tài)保持技術(shù)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
將Vue項(xiàng)目部署到寶塔面板出現(xiàn)404錯誤的完整解決方案
很多開發(fā)者在將Vue項(xiàng)目部署到寶塔面板時,經(jīng)常會遇到訪問頁面時出現(xiàn)404錯誤的情況,這個問題尤其常見于使用了Vue Router history模式的項(xiàng)目中,本文將詳細(xì)分析問題原因并提供多種解決方案,需要的朋友可以參考下
2025-08-08
vue實(shí)現(xiàn)通訊錄功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)通訊錄功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07
vue?this.$refs.xxx獲取dom注意事項(xiàng)?v-if?v-for渲染的dom不能直接使用
這篇文章主要介紹了vue?this.$refs.xxx獲取dom注意事項(xiàng)?v-if?v-for渲染的dom不能直接使用問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03