解决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使用技巧精萃[代码非常实用]
Nov 21 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 Javascript
EsLint入门学习教程
Feb 17 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
Vuex 模块化使用详解
Jul 31 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
人族 Terran 基本策略
2020/03/14 星际争霸
php部分常见问题总结
2008/03/27 PHP
php 在线打包_支持子目录
2008/06/28 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
vue prop属性传值与传引用示例
2019/11/13 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
幼儿园教师请假制度
2014/01/16 职场文书
小学毕业感言150字
2014/02/05 职场文书
关于颐和园的导游词
2015/01/30 职场文书
积极心理学课程心得体会
2016/01/22 职场文书