Vue3中使用styled-components的实现_Vue.js

前言

随着组件化时代的兴起，前端应用开始采用组件级别的 css 封装：通过 javascript 声明和抽象样式，以提高组件的可维护性。在组件加载时动态加载样式，并动态生成类名，从而避免全局污染。 styled-components 是其中的杰出代表。正如其名称所示，styled-components 以组件的形式声明样式，将样式与组件分离，实现逻辑组件与展示组件的分离。

styled-components 的官方 vue 版本目前已多年没有更新，而且只支持到 vue2。那么，在 vue3 中怎么才能使用到 styled-components 呢？在 github 翻了一下，大部分复刻 vue-styled-components 的库要么不再更新，要么没有任何文档和说明。

不过还是找到一个质量还可以的库：

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>

也可以直接链式调用

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

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

<template>
  <styledlink>链接</styledlink>
</template>

响应式样式

<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>

更多细节查看文档：https://vue-styled-components.com

到此这篇关于vue3中使用styled-components的实现的文章就介绍到这了,更多相关vue3 styled-components内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！