vue.js 컴포넌트에서 css에서 소품을 사용하는 방법

vue.js 컴포넌트에서 css에서 소품을 사용하는 방법

저는 vue.js에 처음 왔어요.제 고민은 다음과 같습니다.

다음과 같은 *.vue 파일에서:

<template>
  <div id="a">
  </div>
</template>

<script>
  export default {
    name: 'SquareButton',
    props: ['color']
  }
</script>

<style scoped>
    #a {
      background-color: ?
    }
<style>

소품 사용법color에background-color:(여기서 a는?지금 바로)을 클릭합니다.

고마워요.

할 수 있어!

계산된 속성에서 CSS 변수를 정의하고 계산된 속성을 CSS 변수를 필요로 하는 요소에 대한 스타일 속성으로 호출해야 합니다.마지막으로 문서 하단의 태그 내에서 변수를 사용할 수 있습니다.

new Vue({
  el: '#app',
  data: function() {
    return {
      baseFontSize: 1,
      bgHoverColor: "#00cc00",
      hoverContent: "Hovering!"
    }
  },
  computed: {
    cssProps() {
      return {
        '--hover-font-size': (this.baseFontSize * 2) + "em",
        '--bg-hover-color': this.bgHoverColor,
        '--hover-content': JSON.stringify(this.hoverContent)
      }
    }
  }
})

div {
  margin: 1em;
}

div.test:hover {
  background-color: var(--bg-hover-color);
  font-size: var(--hover-font-size);
}

div.test:hover::after {
  margin-left: 1em;
  content: var(--hover-content);
}

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app" :style="cssProps">

  <div>Hover text: <input type="text" v-model="hoverContent"></div>
  <div>Hover color: <input type="color" v-model="bgHoverColor"></div>

  <div class="test">Hover over me</div>
</div>

https://codepen.io/richardtallent/pen/yvpERW/ 를 참조해 주세요.
다음은 https://github.com/vuejs/vue/issues/7346 입니다.

넌 아냐.계산된 속성을 사용하여 다음과 같이 소품을 사용하여 div의 스타일을 반환합니다.

<template>
  <div id="a" :style="style" @mouseover="mouseOver()">
  </div>
</template>

<script>
  export default {
    name: 'SquareButton',
    props: ['color'],
    computed: {
      style () {
        return 'background-color: ' + this.hovering ? this.color: 'red';
      }
    },
    data () {
      return {
        hovering: false
      }
    },
    methods: {
      mouseOver () {
       this.hovering = !this.hovering
      }
    }
  }
</script>

<style scoped>
<style>

현재 2020년인 만큼, 저는 이 트릭을 css 기능과 함께 사용할 것을 제안합니다.var

<template>
    <div id="a" :style="cssVars"></div>
</template>

<script>
export default {
    props: ['color'],
    computed: {
      cssVars () {
        return{
          /* variables you want to pass to css */
          '--color': this.color,
        }
    }
}
<script>

<style scoped>
#a{
    background-color: var(--color);
}
</style>

이 메서드는 나중에(예를 들어 호버 이벤트를 적용하는 경우) css를 통해 전달된 값을 업데이트할 수 있기 때문에 매우 유용합니다.

신용 거래

왜 그냥 사용하지 않는 거죠?:style다음과 같은 방법으로 지지합니다.

<template>
  <div :style="{ backgroundColor: color }">
</template>

<script>
export default {
  props: {
    color: {
      type: String,
      default: ''
    }
  }
}
</script>

css 속성을 camelCase 스타일로 정의해야 합니다.

유사 클래스나 미디어 쿼리 등의 스타일 속성으로 적용할 수 없는 css가 필요한 경우 다음과 같이 하십시오.

Vue 초기화 시 글로벌하게 사용할 수 있는 스타일컴포넌트를 만듭니다(그렇지 않으면 보풀 문제가 발생할 수 있으므로 필요합니다).슬롯의 내용을 렌더링하는 스타일 태그를 만듭니다.

스타일 속성에 적용할 수 없는 css와 css 기능에 동적 값이 모두 필요한 경우에만 사용합니다.

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false
Vue.component('v-style', {
  render: function(createElement) {
    return createElement('style', this.$slots.default)
  }
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

그런 다음 템플릿 상단에서 다음과 같이 사용하면 컴포넌트의 완전한 JavaScript 범위와 완전한 css 구문을 조합할 수 있습니다.

<template>
  <v-style>
    @media screen and (max-width: 820px) {
      .gwi-text-media-{{ this.id }} {
        background-image: url({{ mobileThumb }});
      }
    }
  </v-style>
</template>

다소 해킹적인 것처럼 보이지만, 이 방법은 효과가 있습니다. 경우에 따라서는 마우스 오버를 위해 JS를 추가하거나 애플리케이션 성능을 저하시킬 가능성이 큰 이벤트의 크기를 조정하는 것보다 이렇게 하는 것이 더 좋습니다.

여기서 vue 2에 대해 이야기하고 있는 것은 알고 있습니다만, vue 3의 누군가가 (저와 같이) 이 질문에 대답했을 경우에 대비하여 vue 3은 훨씬 더 깔끔한 방법을 도입했습니다.

<template>
  <div id="a">
  </div>
</template>

<script>
  export default {
    name: 'SquareButton',
    props: ['color']
  }
</script>

<style scoped>
    #a {
      background-color: v-bind(color);
    }
<style>

Vue가 실제로 뒤에서 하는 일은 "컴포넌트 스타일 프로세스를 통해 css 변수 도입"과 동일하지만, 이제는 훨씬 보기에도 좋습니다.

문서 출처: https://v3.vuejs.org/api/sfc-style.html#state-driven-dynamic-css

CSS를 할 수 .var(--foo-bar)같이 독자적인 할 이 됩니다.Shopify와 같이 고유한 동적 경로가 있는 자산을 전달하려는 경우에도 유용합니다.

은 또한 가 있습니다.:before ★★★★★★★★★★★★★★★★★」:after소유자 요소에 적용된 스타일을 다시 참조할 때 요소를 선택합니다.

색상을 전달하기 위한 원래 게시물 예제를 사용합니다.

<template>
  <div
    id="a"
    :style="{ '--colour': color }">
  </div>
</template>

<script>
  export default {
    name: 'SquareButton',
    props: ['color']
  }
</script>

<style scoped>
  #a {
    background-color: var(--colour);
  }
<style>

URL을 전달하기 위한 원래의 투고 예를 사용합니다.

<template>
  <div
    id="a"
    :style="{ '--image-url': 'url(' + image + ')' }">
  </div>
</template>

<script>
  export default {
    name: 'SquareButton',
    props: ['image']
  }
</script>

<style scoped>
  #a {
    background-url: var(--image-url);
  }
<style>

원천

Vue 3는 새로운 바인딩 스타일을 추가했기 때문에 이제 소품을 css 속성에 쉽게 바인딩할 수 있습니다.

출처: https://learnvue.co/2021/05/how-to-use-vue-css-variables-reactive-styles-rfc/를 확인.

<template>
  <div>
    <div class="text">hello</div>
  </div>
</template>

<script>
  export default {
    data() {
        return {
            color: 'red',
        }
    }
  }
</script>

<style>
  .text {
    color: v-bind(color);
  }
</style>

언급URL : https://stackoverflow.com/questions/42872002/in-vue-js-component-how-to-use-props-in-css