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',]
 }
}

你會發現請選擇的自然從來沒變過，無論你選擇了第一個還是第二個，那麼你就會想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',]
 }
}

加下來發現還是沒有改動啊，那是不是繫結的值沒有發生改變了，好像是的，因為你值定義了這個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:''請選擇,]
 }
},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>

效果：

解釋： 給元件定義個id，再通過這個深度選擇器獲取title的標籤的類名，修改它的顏色即可.

以上這篇解決vant title-active-color與title-inactive-color不生效問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。