欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vant樣式不生效問題的解決辦法

 更新時間：2023年06月23日 11:21:44   作者：bellnai  
這篇文章主要給大家介紹了vant樣式不生效問題的解決辦法,文中通過示例代碼介紹的非常詳細,對大家學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

樣式效果如下所示（tip：這里采用van-button標簽）：

打開開發(fā)者工具，發(fā)現(xiàn)是這里的原因（tip：van-nav-bar_title是van-button的父節(jié)點）

.van-nav-bar__title {
    max-width: 60%;
    margin: 0 auto;
    color: #323233;
    font-weight: 500;
    font-size: 0.42667rem;
}

 對此，應進行如下更改

.van-nav-bar__title {
      max-width: unset; // 取消設置
 }

然后我刷新沒有改變，打開開發(fā)者工具發(fā)現(xiàn)樣式?jīng)]有改變

到此，我就到網(wǎng)上進行查詢，大部分說的都是vant下載引用的問題，在這里我說下大概總的情況

我本人采用方法三解決的，如果覺得自己安裝下載都沒有問題的話，可直接跳到方法三查看

方法一：（下載安裝問題）

1.在項目目錄下打開cmd，輸入

vue ui

2.會自動打開圖形化界面，導入該項目

3.查看是否有下載Vant依賴

4.如果沒有，點擊右上角的搜索框進行下載

方法二：（下載版本問題）

# Vue 3 項目，安裝最新版 Vant：
npm i vant -S
 
# Vue 2 項目，安裝 Vant 2：
npm i vant@latest-v2 -S

根據(jù)自身的Vue項目版本進行選擇安裝

方法三：（引入問題）

第一種 - 自動按需引入組件

# 安裝插件
npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意：webpack 1 無需設置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}
 
// 對于使用 babel7 的用戶，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};
// 接著你可以在代碼中直接引入 Vant 組件
// 插件會自動將代碼轉化為方式二中的按需引入形式
import { Button } from 'vant';

第二種 - 手動按需引入組件

import Button from 'vant/lib/button';
import 'vant/lib/button/style';

第三種 - 導入所有組件

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
 
Vue.use(Vant);

方法四：（我自己是靠這個最后才生效的）

1.對于css語法

使用深度選擇器，使用 >>> 操作符，將scoped樣式中的選擇器“深入”，即影響子組件

2.對于scss，less

使用 /deep/ 操作符取而代之——這是一個 >>> 的別名

在這里，我以less為例子（仍然是上面的代碼~）：

/deep/ .van-nav-bar__title {
      max-width: unset;
}

到這里后再去刷新頁面，就發(fā)現(xiàn)成功了??！

方法五：（這是我去查閱Vant文檔的時候看到的）

在 HTML 中無法正確渲染組件？

        因為 HTML 并不支持自閉合的自定義元素，也就是說單標簽<van-cell />，這樣的語法是不被識別的，使用完整的閉合標簽可以避免這個問題。

        在單文件組件、字符串模板和 JSX 中可以使用自閉合的自定義元素<van-cell><van-cell />，就不會出現(xiàn)這個問題。

總結

到此這篇關于vant樣式不生效問題的解決辦法的文章就介紹到這了,更多相關vant樣式不生效內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論