解決vant title-active-color與title-inactive-color不生效問(wèn)題

更新時(shí)間：2020年11月03日 11:29:53 作者：scarecrowll

這篇文章主要介紹了解決vant title-active-color與title-inactive-color不生效問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

1、創(chuàng)建vue項(xiàng)目

2、使用vant組件

npm install vant --S

全局引用時(shí)在main.js引入

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

假如你引入之后發(fā)現(xiàn)頁(yè)面的樣式和組件都掛載了，但是console控制臺(tái)會(huì)報(bào)錯(cuò)，說(shuō)xxxx組件沒(méi)有register,這個(gè)時(shí)候很有可能是你的vant插件版本有問(wèn)題，重新下載一個(gè)最新的vant就可以了，現(xiàn)在是2.6.0版本

好，接下來(lái)繼續(xù)

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

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

假如是這樣的話(huà)那么下拉框就會(huì)默認(rèn)顯示第一個(gè)字眼“wishing第一個(gè)”，然后你在點(diǎn)擊下拉框選擇第二個(gè)時(shí)也會(huì)改變成“我是第二個(gè)”

如果你不想有默認(rèn)選中，并且一開(kāi)始就顯示請(qǐng)選擇這樣的提示字眼，那么我們可以去看看vant的api文檔，發(fā)現(xiàn)有一個(gè)title的字眼，這個(gè)title就是下拉框的顯示文字，一開(kāi)始很多人以為這個(gè)下拉框的title只是用來(lái)顯示然后點(diǎn)擊下拉框的item之后會(huì)自動(dòng)綁定過(guò)的，但其實(shí)是錯(cuò)誤的，以下就是一個(gè)很好的例子

<van-dropdown-menu>
 <van-dropdown-item
 title="請(qǐng)選擇"
 v-model="value"
 :disabled="disabled"
 :options="developList"
 />
</van-dropdown-menu>
 
data () {
 return {
 value: ''
 developList: [
  {
  value: '1',
  text: '我是第一個(gè)'
  },
 {
  value: '2',
  text: '我是第二個(gè)'
  },
 ]
 }
}

你會(huì)發(fā)現(xiàn)請(qǐng)選擇的自然從來(lái)沒(méi)變過(guò)，無(wú)論你選擇了第一個(gè)還是第二個(gè)，那么你就會(huì)想title是不是綁定，接下來(lái)就有以下操作

<van-dropdown-menu>
 <van-dropdown-item
 :title="title"
 v-model="value"
 :disabled="disabled"
 :options="developList"
 />
</van-dropdown-menu>
 
data () {
 return {
 value: ''
 title:''請(qǐng)選擇,
 developList: [
  {
  value: '1',
  text: '我是第一個(gè)'
  },
 {
  value: '2',
  text: '我是第二個(gè)'
  },
 ]
 }
}

加下來(lái)發(fā)現(xiàn)還是沒(méi)有改動(dòng)啊，那是不是綁定的值沒(méi)有發(fā)生改變了，好像是的，因?yàn)槟阒刀x了這個(gè)title,這個(gè)title就是下拉框選擇的顯示，只是你沒(méi)有title的時(shí)候vant把你選擇的text文字映射到title上去了，

一旦你自己使用title進(jìn)行綁定，那么每次修改時(shí)就要修改title，查看vant api可以發(fā)現(xiàn)有change事件，接下來(lái)就可以操作了

<van-dropdown-menu>
 <van-dropdown-item
 :title="title"
 v-model="value"
 :options="developList"
 @change="changeDevelop"
 />
</van-dropdown-menu>
 
data () {
 return {
 value: ''
 title:''請(qǐng)選擇,
 developList: [
  {
  value: '1',
  text: '我是第一個(gè)'
  },
 {
  value: '2',
  text: '我是第二個(gè)'
  },
 ]
 }
},
 
methods: {
 changeDevelop (i) {
 this.title = this.developList[i-1].text
 },
}

這就沒(méi)問(wèn)題啦！

補(bǔ)充知識(shí)：簡(jiǎn)單粗暴修改vant組件nav-bar的title(標(biāo)題的字體顏色)

最近我有人問(wèn)我關(guān)于vant組件的nav-bar的標(biāo)題顏色需要改但是不會(huì)，我去網(wǎng)上找了一下，發(fā)現(xiàn)都很復(fù)雜

然后我發(fā)現(xiàn)通過(guò)深度選擇器可以修改nav-bar的標(biāo)題的字體顏色

代碼：

<template>
 <view>
 <demo-block title="基礎(chǔ)用法" class="reset">
 <van-nav-bar title="標(biāo)題" left-text="返回" right-text="按鈕" left-arrow @clickLeft="onClickLeft" @clickRight="onClickRight" id="reset"/>
 </demo-block>

 <demo-block title="高級(jí)用法">
 <van-nav-bar title="標(biāo)題" 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 進(jìn)不來(lái)
 uni.showToast({
  title: '點(diǎn)擊返回',
  icon: 'none'
 });
 },

 onClickRight() {
 uni.showToast({
  title: '點(diǎn)擊按鈕',
  icon: 'none'
 });
 }
 }
 }
</script>

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

效果：