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

您要实现的目标是为global component添加样式。我的建议是不要用这种方式。

相反，您只需创建Single File Component即可声明所有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);
        })(),
    };
},

这绝对是一个黑客但它有效。

我该如何为vue组件添加样式

2 个答案: