Vue base64文件输入拖拽组件样式渲染后消失，如何添加样式？

嘿，我明白你遇到的问题了——在Vue组件里写的<style>标签总是消失，导致拖拽样式无法生效对吧？这其实是因为你用了字符串形式的模板，Vue并不会自动解析并保留模板里的<style>标签。下面给你几个靠谱的解决方案，按推荐程度排序：

1. 改用Vue单文件组件（最推荐） #

如果可以的话，把组件改成.vue单文件组件结构，Vue会自动处理<style>部分，而且支持scoped属性让样式只作用于当前组件，不会污染全局样式。

示例结构：

<template>
  <div 
    class="custom-file" 
    style="padding:0;" 
    @dragenter="ondragenter" 
    @dragover.prevent 
    @dragleave="ondragleave" 
    @drop="ondrop"
    :class="{ 'drag-over': isDragging }"
  >
    <input 
      :id="inputid" 
      class="custom-file-input"
      <!-- 你的其他input属性 -->
    >
    <!-- 组件其他内容 -->
  </div>
</template>

<script>
export default {
  name: 'FileBase64',
  props: ['inputid'],
  data() {
    return {
      isDragging: false
    }
  },
  methods: {
    ondragenter() {
      this.isDragging = true;
    },
    ondragleave() {
      this.isDragging = false;
    },
    ondrop(e) {
      this.isDragging = false;
      // 你的文件处理逻辑
      e.preventDefault();
      const files = e.dataTransfer.files;
      // ...后续base64转换逻辑
    }
  }
}
</script>

<style scoped>
.custom-file {
  border: 2px dashed #ccc;
  border-radius: 4px;
  padding: 2rem;
  transition: border-color 0.3s ease;
}

.drag-over {
  border-color: #2196F3;
  background-color: rgba(33, 150, 243, 0.1);
}
</style>

2. 使用全局样式 #

如果暂时没法改成单文件组件，你可以把拖拽相关样式写在全局的<style>标签里（比如项目根目录的index.html中，或者单独的CSS文件里引入），这样样式会一直存在，不会被Vue移除。

步骤：

• 首先给组件的容器元素添加动态类名标识拖拽状态：

Vue.component('file-base64', {
  data() {
    return {
      isDragging: false
    }
  },
  template: `
    <div 
      class="custom-file" 
      style="padding:0;" 
      @dragenter="ondragenter" 
      @dragover.prevent 
      @dragleave="ondragleave" 
      @drop="ondrop"
      :class="{ 'drag-over': isDragging }"
    >
      <input :id="inputid" class="custom-file-input" />
      <!-- 其他组件内容 -->
    </div>
  `,
  methods: {
    ondragenter() { this.isDragging = true; },
    ondragleave() { this.isDragging = false; },
    ondrop(e) {
      this.isDragging = false;
      e.preventDefault();
      // 你的文件处理逻辑
    }
  },
  props: ['inputid']
})

• 然后在全局样式中添加：

.custom-file {
  border: 2px dashed #ccc;
  border-radius: 4px;
  padding: 2rem;
  transition: all 0.3s ease;
}

.custom-file.drag-over {
  border-color: #2196F3;
  background-color: rgba(33, 150, 243, 0.1);
}

3. 动态绑定内联样式（应急方案） #

如果不想用全局样式，也可以直接在模板里通过:style绑定动态样式，不过这种方式适合样式比较简单的场景：

Vue.component('file-base64', {
  data() {
    return {
      dragStyle: {}
    }
  },
  template: `
    <div 
      class="custom-file" 
      style="padding:0;" 
      @dragenter="ondragenter" 
      @dragover.prevent 
      @dragleave="ondragleave" 
      @drop="ondrop"
      :style="dragStyle"
    >
      <input :id="inputid" class="custom-file-input" />
      <!-- 其他组件内容 -->
    </div>
  `,
  methods: {
    ondragenter() {
      this.dragStyle = {
        borderColor: '#2196F3',
        backgroundColor: 'rgba(33, 150, 243, 0.1)'
      };
    },
    ondragleave() {
      this.dragStyle = {};
    },
    ondrop(e) {
      this.dragStyle = {};
      e.preventDefault();
      // 你的文件处理逻辑
    }
  },
  props: ['inputid']
})

总结一下，最推荐的是用单文件组件的scoped样式，既干净又能保证样式只作用于当前组件；如果没法改结构，全局样式是最稳妥的选择。

内容的提问来源于stack exchange，提问作者chickens