解决vant title-active-color与title-inactive-color不生效问题


Posted in Javascript onNovember 03, 2020

1、创建vue项目

2、使用vant组件

npm install vant --S

全局引用时在main.js引入

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

假如你引入之后发现页面的样式和组件都挂载了,但是console控制台会报错,说xxxx组件没有register,这个时候很有可能是你的vant插件版本有问题,重新下载一个最新的vant就可以了,现在是2.6.0版本

好,接下来继续

在需要使用下拉框的地方使用下拉框组件

<van-dropdown-menu>
 <van-dropdown-item
  v-model="value"
 :options="developList"
 />
</van-dropdown-menu>
 
data () {
 return {
 value: ''
 developList: [
  {
  value: '1',
  text: '我是第一个'
  },
 {
  value: '2',
  text: '我是第二个'
  },
 ]
 }
}

假如是这样的话那么下拉框就会默认显示第一个字眼“wishing第一个”,然后你在点击下拉框选择第二个时也会改变成“我是第二个”

如果你不想有默认选中,并且一开始就显示请选择这样的提示字眼,那么我们可以去看看vant的api文档,发现有一个title的字眼,这个title就是下拉框的显示文字,一开始很多人以为这个下拉框的title只是用来显示然后点击下拉框的item之后会自动绑定过的,但其实是错误的,以下就是一个很好的例子

<van-dropdown-menu>
 <van-dropdown-item
 title="请选择"
 v-model="value"
 :disabled="disabled"
 :options="developList"
 />
</van-dropdown-menu>
 
data () {
 return {
 value: ''
 developList: [
  {
  value: '1',
  text: '我是第一个'
  },
 {
  value: '2',
  text: '我是第二个'
  },
 ]
 }
}

你会发现请选择的自然从来没变过,无论你选择了第一个还是第二个,那么你就会想title是不是绑定,接下来就有以下操作

<van-dropdown-menu>
 <van-dropdown-item
 :title="title"
 v-model="value"
 :disabled="disabled"
 :options="developList"
 />
</van-dropdown-menu>
 
data () {
 return {
 value: ''
 title:''请选择,
 developList: [
  {
  value: '1',
  text: '我是第一个'
  },
 {
  value: '2',
  text: '我是第二个'
  },
 ]
 }
}

加下来发现还是没有改动啊,那是不是绑定的值没有发生改变了,好像是的,因为你值定义了这个title,这个title就是下拉框选择的显示,只是你没有title的时候vant把你选择的text文字映射到title上去了,

一旦你自己使用title进行绑定,那么每次修改时就要修改title,查看vant api可以发现有change事件,接下来就可以操作了

<van-dropdown-menu>
 <van-dropdown-item
 :title="title"
 v-model="value"
 :options="developList"
 @change="changeDevelop"
 />
</van-dropdown-menu>
 
data () {
 return {
 value: ''
 title:''请选择,
 developList: [
  {
  value: '1',
  text: '我是第一个'
  },
 {
  value: '2',
  text: '我是第二个'
  },
 ]
 }
},
 
methods: {
 changeDevelop (i) {
 this.title = this.developList[i-1].text
 },
}

这就没问题啦!

补充知识:简单粗暴修改vant组件nav-bar的title(标题的字体颜色)

最近我有人问我关于vant组件的nav-bar的标题颜色需要改但是不会,我去网上找了一下,发现都很复杂

然后我发现通过深度选择器可以修改nav-bar的标题的字体颜色

代码:

<template>
 <view>
 <demo-block title="基础用法" class="reset">
 <van-nav-bar title="标题" left-text="返回" right-text="按钮" left-arrow @clickLeft="onClickLeft" @clickRight="onClickRight" id="reset"/>
 </demo-block>

 <demo-block title="高级用法">
 <van-nav-bar title="标题" left-text="返回" left-arrow>
 <van-icon name="search" slot="right" custom-class="icon" />
 </van-nav-bar>
 </demo-block>

 </view>
</template>

<script>
 import Page from '../../common/page';

 export default {
 data() {
 return {

 }
 },
 onLoad() {},
 methods: {
 onClickLeft() {
 console.log("11");//TODO 进不来
 uni.showToast({
  title: '点击返回',
  icon: 'none'
 });
 },

 onClickRight() {
 uni.showToast({
  title: '点击按钮',
  icon: 'none'
 });
 }
 }
 }
</script>

<style>
 .icon {
 color: #1989fa;
 } 
 #reset /deep/ .van-ellipsis{
 color: red !important;
 }
</style>

效果:

解决vant title-active-color与title-inactive-color不生效问题

解释: 给组件定义个id,再通过这个深度选择器获取title的标签的类名,修改它的颜色即可.

以上这篇解决vant title-active-color与title-inactive-color不生效问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于js类的定义
Jun 28 Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 Javascript
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 #Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 #Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
Nov 03 #Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 #Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 #Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 #Javascript
使用vant的地域控件追加全部选项
Nov 03 #Javascript
You might like
openPNE常用方法分享
2011/11/29 PHP
php生成图片验证码的方法
2016/04/15 PHP
php使用pdo连接sqlite3的配置示例
2016/05/27 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
js遍历td tr等html元素
2012/12/13 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
JS面向对象之多选框实现
2020/01/17 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
举例介绍Python中的25个隐藏特性
2015/03/30 Python
Python对列表排序的方法实例分析
2015/05/16 Python
解决python删除文件的权限错误问题
2018/04/24 Python
详解Python的循环结构知识点
2019/05/20 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
详解python tcp编程
2020/08/24 Python
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
高级销售员求职信
2013/10/25 职场文书
优秀党员获奖感言
2014/02/18 职场文书
母亲节演讲稿
2014/05/27 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
给校长的建议书范文
2015/09/14 职场文书
干部理论学习心得体会
2016/01/21 职场文书
Linux中文件的基本属性介绍
2022/06/01 Servers
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers