Przypisz przez :style. Ewentualnie przenieś sobie to do computed lub method. Chyba że chodzi o jakieś modyfikacje klas, wtedy trochę większy problem jest.
@Razi91: Nie bardzo o to mi chodzi, mam komponent który jest importowany z pakietu vue-video-player, używa on kilku propsów do działania ale żadnego do stylowania player'a który jest w absolucie i nie łapie mi kontenera wyżej niestety, importuje używam tego w tagu i teraz żeby dostać się do konkretnej klasy w tym pakiecie to w tagu
@Radaka: Skoro problemem jest osadzenie, to może po prostu w tym komponencie zrób diva, który wyznaczy mu ramy działania? Nie widzę żebyś tam używał tej klasy video-js. https://jsfiddle.net/u69gnx90/ może wystarczy pogrzebać w playerOptions?
@Razi91: Ta klasa jest głęboko w dlatego nie używam scopowania żeby mi łapało ją, próbowałem już wszystkiego i jedyne działające rozwiązanie to własnie to jedno, tylko chciałbym w jakiś sposób dynamiczny to zrobić bo nie chcę robić 3 komponentów takich samych tylko z innymi stylami
@Razi91: Mam w aplikacji 3 miejsca gdzie będzie możliwość wyświetlania filmów, w tych miejscach wielkość okien będzie różna, aby mi te okna poprawnie działały to muszę nadpisywać klasę .video-js tak jak wkleiłem kod, i potrzebuje zrobić coś w rodzaju:
@Radaka: Jeszcze raz odwołując się do przykładu https://jsfiddle.net/u69gnx90/, tam jest taka opcja jak height którą można ustalać wysokość. Szerokość jak rozumiem jest zawsze 100%, więc wystarczy że opakujesz to w diva któremu ograniczysz szerokość, wysokość się dopasuje.
@Radaka głębokie stylowanie (w głąb komponentów z poziomu komponentu matki) można osiągnąć stosując symbol dziedziczenia >>> albo /deep/ z czego ta pierwsza forma działa tylko w CSS a druga w sass i css
:style. Ewentualnie przenieś sobie to docomputedlubmethod. Chyba że chodzi o jakieś modyfikacje klas, wtedy trochę większy problem jest.import "video.js/dist/video-js.css";
import { videoPlayer } from "vue-video-player";
export default {
props: {
src: {
type: String,
required: true
},
poster: {
type: String,
required: false
},
type: {
type: String,
default: 'video/mp4'
},
height: {
type: String,
default: '300px'
}
},
components: {
videoPlayer
},
data() {
return {
playerOptions: {
muted: false,
language: "pl",
fluid: false,
sources: [
{
type: this.type,
src: this.src
}
],
Nie widzę żebyś tam używał tej klasy
video-js.https://jsfiddle.net/u69gnx90/
może wystarczy pogrzebać w
playerOptions?.video-js {
height:
!important;${this.width}width:
!important;
}
Żeby korzystać z jednego komponentu i przekazywać mu w propsie wysokość i szerokość a nie trzech komponetów które różną się tylko stylami ustawionymi
heightktórą można ustalać wysokość. Szerokość jak rozumiem jest zawsze 100%, więc wystarczy że opakujesz to w diva któremu ograniczysz szerokość, wysokość się dopasuje.mój sposób wysokość na 100px - wypełnia całość kontenera:
https://imgur.com/NfnkaOE
Sposób w playerOptions wysokość 100px
https://imgur.com/Nk0dLvm