vant title-active-color 와 title-active-color 가 유효 하지 않 은 문 제 를 해결 합 니 다.

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 이 없 을 때 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>

효과:

설명:구성 요소 에 id 를 정의 하고 이 깊이 선택 기 를 통 해 title 탭 의 클래스 이름 을 가 져 와 색상 을 수정 하면 됩 니 다.
이 글 은 vant title-active-color 와 title-active-color 의 효력 이 발생 하지 않 는 문 제 를 해결 하 는 것 이 바로 편집장 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 많이 응원 해 주시 기 바 랍 니 다.