vue中vant组件样式失效问题及解决

目录
  • vant组件样式失效
    • 通常有以下几种解决方法
  • 修改vant组件样式

vant组件样式失效

vue项目中引入vant组件，若发现vant组件样式失效

通常有以下几种解决方法

方法一：引入全局样式  

在引入vant组件的地方或者全局引入vant组件所有的样式，引入方法为：在vue引入vant的页面中，添加以下代码：

import 'vant/lib/index.css'

这样可以引入vant全部样式，不过通常我们可以按需引入，如法二，局部引入部分样式即可。

方法二：局部引入样式  

顾名思义，我们需要使用哪个组件，就引入哪个组件样式即可，比如我们只使用按钮组件，则只需要引入按钮样式，如下:

import 'vant/lib/button/style'

方法三：插件自动引入  

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

第一步需要安装插件：

# 安装插件
npm i babel-plugin-import -D

第二步在***.babelrc***或***babel.config.js***的对应位置添加如下代码，重启之后即可生效。

// 在.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组件样式

<style scoped> 添加scoped
    .searchIcon >>> .van-icon-search{color:#fff;}
</style>

searchIcon是新起的class名字 van-icon-search是vant组件标签名字 中间用>>>穿透 即可修改vant自带组件class名

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vant-UI库修改样式无效的问题

    最近用vue写页面时,发现使用vant的有些UI组件,而又不能满足自己的样式,修改CSS样式还是无效.css一般都会使用sass或者less,加了scoped后修改的样式不起作用,即使加了important也没用 vue项目中,当<style>标签有scoped属性时,它的 CSS 样式只作用于当前组件中的元素,父组件的样式将不会渗透到子组件中. 解决办法: 1.对于css语法起作用 使用深度选择器,使用 >>> 操作符,将scoped样式中的选择器"深入"

  • vue 公共列表选择组件,引用Vant-UI的样式方式

    此组件用于公共选择组件.引用Vant UI 作为样式 特性: 1.支持动态.静态数据源. 2.支持分页加载. 3.支持模糊搜索. 4.支持单选.多选. 组件源码: <template> <div class="gn-PubSelect"> <van-action-sheet v-model="inShow"> <div class="gn-PubSelect-main" :style="{'he

  • vue 组件中添加样式不生效的解决方法

    如何产生 在开发项目中遇到在组件中添加样式不生效的情况.具体场景如下 //// vue 组件 <template> <div class="box" data-v-33f8ed40></div> <template> //我用js在上面div标签中插入一个<p class='text'>text goes here</p> <script> export default { ... mounted(){

  • 解决vue加scoped后就无法修改vant的UI组件的样式问题

    有时候UI组件提供的默认的样式不能满足项目的需要,就需要我们对它的样式进行修改,但是发现加了scoped后修改的样式不起作用. 解决方法: 使用深度选择器,将scoped样式中的选择器"深入",即影响子组件 <style scoped> .a >>> .b { /* ... */ } </style> 以上的代码会编译成: .a[data-v-f3f3eg9] .b { /* ... */ } 注意:如果你使用了Less或Sass等预处理器,可

  • vue中vant组件样式失效问题及解决

    目录 vant组件样式失效 通常有以下几种解决方法 修改vant组件样式 vant组件样式失效 vue项目中引入vant组件,若发现vant组件样式失效 通常有以下几种解决方法 方法一:引入全局样式   在引入vant组件的地方或者全局引入vant组件所有的样式,引入方法为:在vue引入vant的页面中,添加以下代码: import 'vant/lib/index.css' 这样可以引入vant全部样式,不过通常我们可以按需引入,如法二,局部引入部分样式即可. 方法二:局部引入样式   顾名思义

  • vue中element组件样式修改无效的解决方法

    如下所示: <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写style注意不加scoped,然后用一个组件最外层的class包裹住,就不会改到所有的组件的样式了. 以上这篇vue中element组件样式修改无效的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue 组件间的样式冲突污染 浅谈vue中改elementUI默认样式引发的st

  • vue中element-ui组件默认css样式修改的四种方式

    vue中element-ui组件默认css样式修改的四种方式

    目录 前言 1.使用全局统一覆盖 2.在.vue文件中修改 3.修改组件的style样式 4. 参考element-ui官方文档的api 疑问 总结 前言 修改element-ui组件的默认样式一直是一个老生长谈的话题,在做完公司的一整个项目后,我总结了以下4种修改element-ui默认样式的方法. 1.使用全局统一覆盖 针对一些通用的.样式固定的组件,可以全局处理,其方法是新建一个css或者scss文件,覆盖element原有的class 你可以在src/styles目录下新建一个eleme

  • Vue中UI组件库之Vuex与虚拟服务器初识

    一.日历组件 new Date()的月份是从0开始的. 下面表达式是:2018年6月1日 new Date(2018, 5, 1); 下面表达式是:2018年5月1日 new Date(2018, 4, 1); 或 new Date(2018, 5-1, 1); 下面表达式是:2018年5月31日(得到上个月的最后一天) new Date(2018, 5 , 0); 日的参数可以是0,也可以是负数,表示上个月底的那一天. 下面表达式是:2018年7月01日 new Date(2018, 5, 3

  • Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)

    最近做的一个项目是基于 vue + AntDesign 的.由于项目要求,需要在 Table 组件的行内点右键的时候弹出菜单.在线演示地址及最终效果图如下: 在线演示地址>> 首先新建一个Table组件的实例: <a-table :columns="columns" :rowKey="record => { return record.INDEX;}" :dataSource="tableData" /> ... c

  • vue中transition组件在项目中运用小结

    ​vue中的transtion是一个动画过渡封装组件,常见的情景时用transition标签包裹的DOM含有动画效果.transition组件的动画效果过渡设置基于css的transition属性设置.下面给大家介绍下vue中transition组件在项目中运用. 单个弹入弹出运用 注意: name的名字为多少,则下面的样式class开头就要为多少 通过v-if来配合执行动画效果 <template> <div> <button v-on:click="show =

  • vue中keep-alive组件实现多级嵌套路由的缓存

    目录 现状(问题): 探索方案: 实现方式 现状(问题): keep-alive 组件对第三级及以上级的路由页面缓存失效 探索方案: 方案1.直接将路由扁平化配置,都放在一级或二级路由中方案2.再一层缓存组件用来过渡,并将其name配置到include中 实现方式 方案1不需要例子,按规则配置路由就行重点介绍方案2因为我用了vue-element-admin做了架构,并且项目中我将菜单和路由全部通过服务端返回做了统一配置,所以我只能用方案2来实现. 直接看原有代码(问题代码) // src/la

  • vue中改变滚动条样式的方法

    写在前面: 我是 扬帆向海,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法 感兴趣,可以关注我的动态,我们一起学习. 用知识改变命运,让我们的家人过上更好的生活. 今天在自己开发的一个项目中,需求是让浏览器的滚动轴变细.想了好长时间才完成,在目前的测试中,滚动条在IE浏览器中不支持. scrollbar.css @charset "utf-8"; ::-webkit-s

  • vue中ant-design-vue组件的安装与使用

    vue中ant-design-vue组件的安装与使用

    目录 1. 安装 2. 引入组件库 3. 使用 3.1 按钮样式 3.2 导航栏样式 3.3 表单样式 补充:ant-design-vue的兼容问题 总结 官方地址:Ant Design Vue 1. 安装 首先使用vue-cli创建项目,然后进入项目,使用npm安装ant-design-vue库: npm i --save ant-design-vue@next 然后在package.json文件中的dependencies中看见刚刚下载的库: 2. 引入组件库 然后在main.js中引入,注

  • Vue中父组件向子组件通信的方法

    Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述.下面通过本文给大家分享Vue中父组件向子组件通信的方法,具体内容详情如下所示: props 组件实例的作用域是孤立的.子组件的模板中是无法直接调用父组件的数据. 可以使用props将父组件的数据传给子组件.子组件在接受数据时要显示声明props 看下面的例子 <div id="app"> <panda here='China'></panda> </div> <s

随机推荐