如何為 vue 組件添加樣式

Question

我有這個代碼。 它是一個 base64 文件輸入的組件。 它還支持拖放。 我需要拖放樣式。 但它每次都會刪除樣式。 渲染后，樣式標簽消失，樣式未應用。 如何為這個組件添加樣式？

謝謝你。

Vue.component('file-base64', {
    template:`
        <div class="custom-file" style="padding:0;" @dragenter="ondragenter" @dragover="" @dragleave="ondragleave" @drop="ondrop">
            <input :id="inputid" class="custom-file-input" type="file" @change="onChange" :multiple="multiple" />
            <label :for="inputid" class="custom-file-label">{{label}}</label>
            <style>
                #{{inputid}} .fileuploaddrophover {height:auto; border:2px dotted gold;}
                #{{inputid}} .fileuploaddrophover > label {opacity: 0.5; filter:blue(5px);}
            </style>
        </div>
    `,
    data: function () {
        return {inputid:(function(){var x; do{x= "filebase64input"+Math.round(Math.random()*100000);} while(document.getElementById(x)) return x;})()};
    },
    props:{
        label:{type:String,default:"Drop or Choose file..."},
        multiple: {type: Boolean,default: false},
        done: {type: Function,default: () => {}}  
    },
    methods: {
        onChange(e){
            let files = e.target.files;  
            var allFiles = [];
            for (var i = 0; i < files.length; i++){
                let file = files[i];
                let reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = () => {
                    let fileInfo = {name: file.name,type: file.type,size: file.size,base64: reader.result.split(',')[1],file: file};
                    allFiles.push(fileInfo);
                    if(allFiles.length == files.length){
                        if(this.multiple) this.done(allFiles);
                        else this.done(allFiles[0]);
                    }
                }
            }
        },
        ondragenter : function (e) {
            $("#"+this.inputid).parent().addClass('fileuploaddrophover');
        },
        ondragleave : function (e) {
            $("#"+this.inputid).parent().removeClass('fileuploaddrophover');
        },
        ondrop : function (e) {
            $("#"+this.inputid).parent().removeClass('fileuploaddrophover');
        },
    },
});

Answer 1

您要達到的目標是向全局組件添加樣式。 我的建議是不要使用這種方式。

相反，您可以只創建單個文件組件，您可以在其中聲明所有template script和style部分。

在此之后，您可以將它導入到您創建 Vue 應用程序的地方（大多數情況下它是main.js ）。

因此，您將擁有FileBase64.vue文件。

在main.js中，您將擁有：

import FileBase64 from './FileBase64.vue'
Vue.component('file-base64', FileBase64);

Answer 2

我終於找到了辦法。

由於數據是函數，因此每次添加元素時都會調用它。

data: function () {
    return {
        inputid:(function(){var x; do{x= "filebase64input"+Math.round(Math.random()*100000);} while(document.getElementById(x)) return x;})(),
        cssrules:(function(){
            var css = document.createElement("style");
            css.type = "text/css"; 
            css.innerHTML = `
                .fileuploaddrophover { height:auto; border:2px dotted gold; }
                .fileuploaddrophover > label {opacity: 0.5; filter:blue(5px); }
            `;
            document.body.appendChild(css);
        })(),
    };
},

這絕對是一個黑客，但它有效。