사전 정의된 CSS 스타일을 Vue에서 생성하는 방법(각도에서 할 수 있는 것처럼)

사전 정의된 CSS 스타일을 Vue에서 생성하는 방법(각도에서 할 수 있는 것처럼)

각도에서는 css 속성을 다음과 같이 동적으로 설정할 수 있다.

<style ng-if="color">
.theme-color { color: {{color}}; }
.theme-background-color { background-color: {{color}}; }
.theme-border-color { border-color: {{color}}; }
</style>

Vue에서는 :class=...를 수정할 수 있다.미리 정의된 클래스 옵션으로 제한되고 :style...우리가 학급 이름을 사용하는 걸 허락하지 않아

위와 같이 동적 CSS를 달성할 수 있는 방법이 있는가?아니면 스타일들이 모든 색상 특성을 포함하도록 코딩해야 하는가?

고마워요.

사용자 색상 선택 개입이 있다고 가정할 경우, 사용자가 선택한 색상을 주(州)에 저장하여 전세계적으로 액세스할 수 있도록 할 것이다.

그럼 네 컴포넌트 내에서 다음을 할 수 있을거야...

<app :style="themeStyles"></app>

export default {
  computed: {
    themeStyles () {
      return {
        color: store.state.themeColor,
        backgroundColor: store.state.themeColor,
        borderColor: store.state.themeColor
      }
    }
  }
}

(빠른 예제를 제공하기 위해 pseudocode)

물론, 필요한 모든 구성요소에 사용하라 - 하지만 그것은 여러분이 Color 그 자체를 위해 사용자의 입력을 저장하고 그 상태로 저장하는 방법을 가지고 있는 한, 속임수를 써야 한다.

편집: 추가 옵션

JSS

Internet Explorer 지원이 필요하지 않으면 CSS 변수를 사용할 수 있다.

다음은 CodeSandbox와 https://codesandbox.io/s/rr80o6kq3n의 예입니다.

관련 법규는 다음과 같다.

<template>
  <div class="foo">
    <div class="bar">Hello World</div>
  </div>
</template>

<style scoped>
.foo {
  --theme-color: black;
}

.bar {
  font-weight: bold;
  transition: color 0.2s;
  color: var(--theme-color);
}
</style>

<script>
export default {
  data () {
    return {
      hue: 0,
    }
  },

  watch: {
    hue (hue) {
      this.$el.style.setProperty(
        "--theme-color",
        `hsl(${hue % 360}, 100%, 50%)`,
      )
    },
  },

  mounted() {
    window.setInterval(() => {
      this.hue += 20
    }, 500)
  },
}
</script>

참조URL: https://stackoverflow.com/questions/48964336/how-to-create-dynamic-not-predefined-css-styles-in-vue-like-we-can-in-angular