Vue 的CSS之deep語(yǔ)法

::v-deep

我們知道，在Vue組件的style標(biāo)簽里，加上scoped屬性，會(huì)使寫的樣式只影響當(dāng)前的組件，不會(huì)影響到子組件。

去掉scoped就可以了，但是去掉scoped同時(shí)也會(huì)導(dǎo)致其他問題，可能會(huì)影響到別的。

有什么方法能在父組件的css里影響子組件的樣式，同時(shí)保留scoped呢？

deep有兩種寫法，::v-deep兼容性最強(qiáng)， 優(yōu)先使用這個(gè)。

使用方法：在想要影響子組件的那個(gè)元素的選擇器的前邊加上::v-deep

//Statistics.vue父組件
<template>
   <Layout>
       <Type/>
   </Layout>
</template>
<style lang="scss" scoped>
    ::v-deep li{
        border:1px solid black;
    }
    ::v-deep ul{
        border:1px solid red;
    }
</style>

Type子組件里有ul和li元素，想要在父組件里改變它的樣式，就在選擇器前加::v-deep，表示深入到子組件里邊找這個(gè)選擇器。可以發(fā)現(xiàn)成功影響了自組件的樣式。

可是如果子組件里有很多個(gè)li，或者li嵌套li，那只在外邊說(shuō)深入里邊的li不準(zhǔn)確。怎么精確的定位到子組件里的某個(gè)元素呢？

classPrefix 前綴

可以給子組件傳一個(gè)prop，是classPrefix。在子組件里判斷，如果外邊給傳了這個(gè)classPrefix，那某個(gè)元素就擁有了一個(gè)class，叫做"xxx-item",xxx是classPrefix變量的值。

然后在父組件的css里，就可以deep 這個(gè)加了前綴的選擇器，就可以精準(zhǔn)找到這個(gè)元素了。

給元素綁定class

給一個(gè)元素添加class可以使用&&，也可以使用對(duì)象形式。

<li :class="type==='-' && 'selected'"
                @click="selectType('-')">支出
</li>

如果前邊的表達(dá)式為True，這個(gè)元素就擁有了后邊的class。如果我這時(shí)再給它添加一個(gè)class綁定，會(huì)出錯(cuò)，不能同時(shí)有兩個(gè):class，所以升級(jí)使用對(duì)象

<li :class="{selected:type==='-',
            [classPrefix+'-item']:classPrefix}"
                @click="selectType('-')">支出
</li>

綁定的class是一個(gè)對(duì)象，里邊是key-value。表示如果value表達(dá)式為真，我就擁有了key這個(gè)class。因?yàn)閷?duì)象可以有很多個(gè)鍵值對(duì)，所以使用對(duì)象可以同時(shí)動(dòng)態(tài)綁定多個(gè)class。

我要綁定的第二個(gè)class，是xxx-item，xxx是父組件要給我傳的一個(gè)prop。如果給傳了，即如果classPrefix這個(gè)外部屬性給傳了，我就擁有了以它為前綴的一個(gè)class?？墒沁@個(gè)classPrefix是一個(gè)變量，在這里使用${}插值不合法。

有ES6的新語(yǔ)法：如果一個(gè)key里邊有變量，就用[]把這個(gè)key包起來(lái)，里邊用字符串相加的方式表達(dá)。

總結(jié)

在子組件的特定元素上綁定了classPrefix的類之后，在父組件的css里就可以deep 這個(gè)新加的class找到這個(gè)元素了。

<template>
   <Layout>
       <Type :type.sync="yyy" class-prefix="xxx"/>
   </Layout>
</template>
<style lang="scss" scoped>
    ::v-deep .xxx-item{
        border:1px solid black;
    }
    ::v-deep ul{
        border:1px solid red;
    }
</style>

使用classPrefix在以下場(chǎng)景非常好用：一個(gè)父組件使用了多個(gè)一樣的子組件，但是又需要不同的樣式，就可以給不同的子組件傳不同的classPrefix，那么里邊的具體某個(gè)元素在不同的使用下就有獨(dú)特的class。這樣每個(gè)組件的樣式都不互相影響。

Object.freeze

凍結(jié)，使它的地址和內(nèi)容都不會(huì)被改變

如果一個(gè)數(shù)組被聲明成常量，還是可以給它添加元素的。但是被凍結(jié)之后，就連添加元素都不行了。

關(guān)于Vue和ts的配合問題

如果使用了Vuex，當(dāng)在index.ts里定義了store時(shí)，我們自己可以指定它的類型，指定之后，在index.ts里是有類型的。

但是出了這個(gè)文件，在組件里的ts里使用時(shí)，發(fā)現(xiàn)$store的類型變成了any，state的類型也變成了any。

也就是說(shuō)，定義的時(shí)候定義了類型，但是使用的時(shí)候，無(wú)法把類型正確的傳出來(lái)。這是因?yàn)樵谝粋€(gè)初始化文件里，已經(jīng)把$store的類型寫死了是any。

那只能在使用的時(shí)候，使用as語(yǔ)法，強(qiáng)制類型轉(zhuǎn)換。

JSON是不支持Date類型的數(shù)據(jù)的。所以在存進(jìn)localStorage里之前，要把一個(gè)表示日期的變量聲明成string類型。

然后生成日期的時(shí)候，使用toISOString()方法把日期轉(zhuǎn)成字符串。

record2.date=new Date().toISOString()

ISO8601和dayjs庫(kù)

一. ISO8601

國(guó)際標(biāo)準(zhǔn)ISO 8601，是國(guó)際標(biāo)準(zhǔn)化組織的日期和時(shí)間的表示方法

我們關(guān)注日期和時(shí)間的組合表示法

合并表示時(shí)，要在時(shí)間前面加一大寫字母T，如要表示東八區(qū)時(shí)間2004年5月3日下午5點(diǎn)30分8秒，可以寫成2004-05-03T17:30:08+08:00

1. Date對(duì)象=>ISO字符串

new Date()可以得到一個(gè)當(dāng)前時(shí)間的date對(duì)象，是中國(guó)標(biāo)準(zhǔn)時(shí)間。

我們通常使用toISOString() 把這個(gè)Date對(duì)象轉(zhuǎn)換成ISO表示方式的字符串。

2. ISO字符串=>Date對(duì)象

比如我們有一段ISO字符串，把這個(gè)字符串放入Date.parse()里，會(huì)得到一串?dāng)?shù)字，再把這串?dāng)?shù)字放到new Date() 里，就可以還原成Date對(duì)象。

JS操作時(shí)間的庫(kù)-dayjs

安裝

yarn add dayjs

使用

import dayjs from 'dayjs';

dayjs() 就相當(dāng)于new Date() ，返回一個(gè)當(dāng)前時(shí)間的對(duì)象。這個(gè)對(duì)象有很多API,操作這個(gè)時(shí)間。

也可以傳進(jìn)去一段ISO字符串，轉(zhuǎn)換成dayjs對(duì)象

beautify(string: string){
            const day=dayjs(string)
            const now=dayjs()
            if(day.isSame(now,'day')){
                return '今天'
            }else if(day.isSame(now.subtract(1,'day'),'day')){
                return '昨天'
            }else if(day.isSame(now.subtract(2,'day'),'day')){
                return '前天'
            }else if(day.isSame(now,'year')) {
                return day.format('M月M日')
            }else {
                return day.format('YYYY年M月D日')
            }
}

這個(gè)參數(shù)字符串是'2020-5-30'這樣的字符串，是通過(guò)把Date對(duì)象進(jìn)行.ISOString()轉(zhuǎn)換成ISO標(biāo)準(zhǔn)時(shí)間，然后以T分隔出來(lái)的日期字符串。

我們想根據(jù)不同的情況進(jìn)行不同的展示。比如，顯示今天，昨天，前天。

有時(shí)候我們想把一堆日期排序，就需要比較日期的大小。如果現(xiàn)在的每一個(gè)日期是ISO字符串的形式，字符串可以使用> <=來(lái)比較，但是如果想相減呢?

字符串是不支持相減的。只能把他們變成數(shù)字，取值，再相減

dayjs(string).valueOf()

傳進(jìn)dayjs里，變成對(duì)象，調(diào)用valueOf，就變成值了，這時(shí)就可以相減了。

JSON.parse的返回值沒有類型

function clone<T>(data: T): T{
    return JSON.parse(JSON.stringify(data))
}
export default clone

對(duì)于數(shù)組，對(duì)象這類數(shù)據(jù)類型，有時(shí)我們需要克隆另外一個(gè)相同的數(shù)據(jù)，但是地址不一樣。為了不改變?cè)瓉?lái)的對(duì)象。

可以先序列化，再反序列化，就得到了和原來(lái)內(nèi)容一樣，但地址不同的對(duì)象。

但是JSON.parse的返回值是any類型的，有時(shí)我們還需要對(duì)這個(gè)返回值做一些操作，ts就不知道它是什么類型了。

所以我們可以指定，傳進(jìn)去的數(shù)據(jù)是什么類型，克隆之后的返回值就是什么類型。比如T,然后ts會(huì)說(shuō)不知道T在哪里聲明了。所以用一個(gè)<>聲明一下，再使用。

然后在調(diào)用clone函數(shù)的時(shí)候，傳進(jìn)去的參數(shù)要指明類型。這樣克隆完的就還是一樣的類型。

以上就是vue實(shí)現(xiàn)列表展示示例詳解的詳細(xì)內(nèi)容，更多關(guān)于vue列表展示的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論