解决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 相关文章推荐
javascript JSON操作入门实例
Apr 16 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
Feb 27 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
当前流行的JavaScript代码风格指南
Sep 10 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
get(0).tagName获得作用标签示例代码
Oct 08 Javascript
JS中捕获console.log()输出的方法
Apr 16 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
JavaScript交换两个变量方法实例
Nov 25 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
php5.2时间相差8小时
2007/01/15 PHP
PHP学习笔记之二 php入门知识
2011/01/12 PHP
php 冒泡排序 交换排序法
2011/05/10 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
深入解析JavaScript中的立即执行函数
2016/05/21 Javascript
全面了解js中的script标签
2016/07/04 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
实例解析Python中的__new__特殊方法
2016/06/02 Python
Python单例模式的两种实现方法
2017/08/14 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
python opencv调用笔记本摄像头
2019/08/28 Python
python中upper是做什么用的
2020/07/20 Python
澳大利亚顶级美发和美容贸易超市:glamaCo
2020/01/19 全球购物
园林技术个人的自我评价
2014/02/15 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
校本研修个人总结
2015/02/28 职场文书
银行自荐信怎么写
2015/03/05 职场文书
建党伟业的观后感
2015/06/01 职场文书
入党积极分子群众意见
2015/06/01 职场文书
利用JuiceFS使MySQL 备份验证性能提升 10 倍
2022/03/17 MySQL