您好,登錄后才能下訂單哦!
這期內容當中小編將會給大家帶來有關Vue項目中title-inactive-colorvant和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就是下拉框選擇的顯示,只是你沒有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的標簽的類名,修改它的顏色即可.
上述就是小編為大家分享的Vue項目中title-inactive-colorvant和title-active-color不生效的解決方法了,如果剛好有類似的疑惑,不妨參照上述分析進行理解。如果想知道更多相關知識,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。