解决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 相关文章推荐
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
javascript 函数及作用域总结介绍
Nov 12 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
canvas实现绘制吃豆鱼效果
Jan 12 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 Javascript
vue 获取url里参数的两种方法小结
Nov 12 Javascript
如何在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
php curl_init函数用法
2014/01/31 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
JavaScipt基本教程之前言
2008/01/16 Javascript
JavaScript中出现乱码的处理心得
2009/12/24 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
javascript如何创建对象
2016/08/29 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
Vue项目安装插件并保存
2019/01/28 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
Python多进程机制实例详解
2015/07/02 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
python ftplib模块使用代码实例
2019/12/31 Python
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
党校自我鉴定范文
2013/10/02 职场文书
中文专业学生自我评价范文
2014/02/06 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
golang日志包logger的用法详解
2021/05/05 Golang
详解如何使用Nginx解决跨域问题
2022/05/06 Servers