Пытался применить CSS к компоненту условно с помощью проп, но он не работает - PullRequest
Новая
       8

Пытался применить CSS к компоненту условно с помощью проп, но он не работает

0 голосов
/ 21 мая 2018 

.storyMobile{
color:green;
}
.storyWeb{
color:red;
}
<div class="storyMobile">
hii
</div>
<div class="storyWeb">
hii
</div>


//main view

  <div>
        <story   :story="stories[0]"/>
  </div>


//here it prints stories in red colour but I want it to be displayed in green colour - how can I do this?

Это мой компонент, в котором у меня есть 2 деления с 2 различными классами, один будет активен для мобильных устройств, а другой - для Интернета. 

<div class="storyMobile">
//code
</div>

 <div class="storyWeb">
//code
</div>

// это мой основной вид, куда я импортирую этот компонент 

<div class="body-frame">
    <Header></Header>
    <section class="content-section-bar" v-if="stories && stories.length">

      <div>
        <story   :story="stories[0]"/>
      </div>
    </section>
</div>

По умолчанию компонент story находится в сети, поэтому к нему применяется класс storyweb, но я хочу, чтобы storyweb"класс для применения к нему.

Как мне это сделать в vue.js Я пытался использовать реквизит, но не получил желаемого результата.

1 Ответ

0 голосов
/ 21 мая 2018

Это то, что вы хотите?

ваш компонент: 

<div :class="className"></div>

скрипт: 

export default {
  props: {
    className: {
      default: 'storyWeb'
    }
  }
}

использование: 

<story :story="stories[0]"/>
<story :story="stories[0]" class-name="storyMobile"/>


Vue.component('story',{
  template: `<div :class="className">test</div>`,
  props: {
    className: {
      type: String,
      default: 'storyWeb'
    },
    story: {
      type: Object,
      required: true
    }
  }
})

var app = new Vue({
  el: '#app',
  data () {
    return {
      stories: [
        {content: 'sotry1 content'},
        {content: 'story2 content'}
      ]
    }
  }
})
.storyMobile{
  color:green;
}
.storyWeb{
  color:red;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <story :story="stories[0]" class-name="storyMobile"></story>
  <story :story="stories[1]"></story>
</div>
...