快捷導(dǎo)航

Vue3中使用styled-components的實現(xiàn)

更新時間：2024年05月11日 10:49:15 作者：來一杯奶茶呀！

本文主要介紹了Vue3中使用styled-components的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

隨著組件化時代的興起，前端應(yīng)用開始采用組件級別的 CSS 封裝：通過 JavaScript 聲明和抽象樣式，以提高組件的可維護性。在組件加載時動態(tài)加載樣式，并動態(tài)生成類名，從而避免全局污染。 styled-components 是其中的杰出代表。正如其名稱所示，styled-components 以組件的形式聲明樣式，將樣式與組件分離，實現(xiàn)邏輯組件與展示組件的分離。

styled-components 的官方 Vue 版本目前已多年沒有更新，而且只支持到 Vue2。那么，在 Vue3 中怎么才能使用到 styled-components 呢？在 Github 翻了一下，大部分復(fù)刻 vue-styled-components 的庫要么不再更新，要么沒有任何文檔和說明。

不過還是找到一個質(zhì)量還可以的庫：

vue-styled-components

查看了一下文檔，還原了大部分核心 API，使用上與官方 styled-components 差別不大。下面來看看如何使用。

使用

安裝

npm i @vvibe/vue-styled-components

styled原生組件

<script setup lang="ts">
import { styled } from '@vvibe/vue-styled-components'

const StyledLink = styled('a')`
  color: darkred;
`
</script>

<template>
  <StyledLink>鏈接</StyledLink>
</template>

也可以直接鏈式調(diào)用

<script setup lang="ts">
import { styled } from '@vvibe/vue-styled-components'

const StyledLink = styled.a`
  color: darkred;
`
</script>

<template>
  <StyledLink>鏈接</StyledLink>
</template>

響應(yīng)式樣式

<script setup lang="ts">
import { ref } from 'vue'
import { styled } from '@vvibe/vue-styled-components'

const borderColor = ref('darkred')
const inputProps = { borderColor: String }
const StyledInput = styled('input', inputProps)`
  width: 100%;
  height: 40px;
  padding: 4px 8px;
  border: 1px solid ${(props) => props.borderColor};
  border-radius: 8px;
`

const input = () => (borderColor.value = 'forestgreen')
const focus = () => (borderColor.value = 'skyblue ')
const blur = () => (borderColor.value = 'darkred')
</script>

<template>
  <StyledInput placeholder="Type something" :borderColor="borderColor" @input="input" @focus="focus" @blur="blur" />
</template>

擴展樣式

<script setup lang="ts">
import { styled } from '@vvibe/vue-styled-components';

const BlueButton = styled.button`
  width: 120px;
  height: 40px;
  margin-right: 8px;
  padding: 4px 8px;
  border-radius: 9999px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  background-color: skyblue;
  font-weight: bold;
`;
const RedButton = styled(BlueButton)`
  background-color: darkred;
  color: white;
`;
</script>

<template>
  <BlueButton>Blue Button</BlueButton>
  <RedButton>Red Button</RedButton>
</template>

動畫

<script setup lang="ts">
import { styled, keyframes } from '@vvibe/vue-styled-components'

const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`
const translate = keyframes`
  0 {
    transform: translateX(0);
  }
  50% {
    transform: translateX(250%);
  }
  60% {
    transform: rotate(360deg);
  }
`

const StyledBaseDiv = styled.div`
  display: inline-block;
  width: 100px;
  height: 100px;
`

const StyledRotateDiv = styled(StyledBaseDiv)`
  background-color: skyblue;
  animation: ${rotate} 2s linear infinite;
`

const StyledTranslateDiv = styled(StyledBaseDiv)`
  margin-left: 10px;
  background-color: darkred;
  animation: ${translate} 2s ease infinite alternate;
`
</script>

<template>
  <StyledRotateDiv />
  <StyledTranslateDiv />
</template>

主題

<script setup lang="ts">
import { styled, ThemeProvider } from '@vvibe/vue-styled-components'

const Wrapper = styled.div`
  display: flex;
  justify-content: space-around;
`

const StyledLink = styled.a`
  margin-right: 8px;
  color: ${(props) => props.theme.primary};
  font-weight: bold;
`
</script>

<template>
  <Wrapper>
    <a>This a normal link</a>
    <ThemeProvider :theme="{ primary: 'red' }">
      <StyledLink>This a theming link</StyledLink>
    </ThemeProvider>
  </Wrapper>
</template>

更多細節(jié)查看文檔：https://vue-styled-components.com

到此這篇關(guān)于Vue3中使用styled-components的實現(xiàn)的文章就介紹到這了,更多相關(guān)Vue3 styled-components內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: