解决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 相关文章推荐
jQuery bxCarousel实现图片滚动切换效果示例代码
May 15 Javascript
JS定时关闭窗口的实例
May 22 Javascript
处理文本部分内容的TextRange对象应用实例
Jul 29 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 Javascript
使用JS中的exec()方法构造正则表达式验证
Aug 01 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
JavaScript判断数组类型的方法
Oct 23 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
如何在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
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
使用webpack搭建react开发环境的方法
2018/05/15 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
python破解zip加密文件的方法
2018/05/31 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
解释一下抽象方法和抽象类
2016/08/27 面试题
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
行政答辩状范文
2015/05/21 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
社区安全温馨提示语
2015/07/14 职场文书
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB