Vue.js 2, Использование имен пользовательских компонентов в css?

<template>
    <header>
        <hamburger></hamburger>
        <app-title></app-title>
        <lives></lives>
    </header>
</template>

<script>
export default {
    name: 'Titlebar',
    data() {
        return {

        }
    }
}
</script>

<style lang="scss" scoped>
    @import "../styles/variables";

    header {
        padding: $padding-titlebar;
        position: relative;
    }
    lives {
        position: absolute;
        right: 2.5vh;
    }
</style>

Можно ли использовать теги компонентов, как любой обычный тег HTML для стилизации, например, я записал там lives { }?
Я вижу, что запись <lives class="lives">и использование .lives { }в css работает, но это кажется излишним, скорее хотелось бы опустить добавление дополнительных классов, если можно просто использовать компонентный тег.
Я понимаю, что Vue компилируется <lives>в HTML-код и что нет тега «template» для css, который будет использоваться после его компиляции, но все же интересно.

javascript,vue.js,vuejs2,vue-component,

0

Ответов: 3

1

Имя компонента Vue не имеет отношения к правилу css, но это так template.

Компонент Vue имеет templateсвойство, он содержит тег html. а также вы можете использовать пользовательский тег html . например:template: `<lives class="lives">{{a}}</lives>`

lives

поэтому теперь вы можете определить правило css по livesтегу.

0

Пользовательский тег все равно будет присутствовать в сгенерированном HTML, и вы можете использовать его для стилизации с помощью CSS. Две вещи, о которых нужно знать:

  1. Вам нужно будет предоставить ему displayсобственность
  2. Вы должны использовать законное имя тега, которое в основном означает наличие в нем дефиса

new Vue({
  el: 'app',
  components: {
    myThing: {}
  }
});
my-thing {
  background-color: red;
  display: block;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <my-thing inline-template>
    <div>This should be red</div>
  </my-thing>
</div>

0

Вы можете использовать vue-custom-element:

https://github.com/karol-f/vue-custom-element

Сначала зарегистрируйте свой компонент с помощью:

Vue.customElement('widget-vue', {
  props: [
    'prop1',
    'prop2',
    'prop3'
  ],
  data: {
    message: 'Hello Vue!'
  },
  template: '<p>{{ message }}, {{ prop1  }}, {{prop2}}, {{prop3}}</p>'
});

Тогда вы можете сделать:

widget-vue {
  display: block;
  background: red;
  ...
}

Если вы хотите зарегистрировать единый файловый компонент, зарегистрируйте его следующим образом:

import TopBar from '@/components/core/TopBar'
Vue.customElement('top-bar', TopBar)

Надеюсь, это поможет, Cheers!

JavaScript, vue.js, vuejs2 вид-компонент,
Похожие вопросы
Яндекс.Метрика