vue 里input[type=file]去掉“未选择任何文件”及样式改进

在 Vue.js 中，`<input type="file">` 元素默认会显示 "未选择任何文件" 这样的提示文本，并且其样式通常是浏览器提供的基础样式。如果你想自定义这个提示并改变它的外观，可以使用一些技巧。

1. **隐藏默认文本**:
使用 `v-model` 绑定值，然后监听 `change` 事件来动态更新元素的 `value`。当用户选择文件时，设置 `value` 为空字符串（或者自定义文本）来隐藏默认提示：

   <template>
     <div>
       <input type="file"
             :value=""
             @change="handleFileChange($event)">
       <p v-if="selectedFile">{{ selectedFile }}</p>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         selectedFile: ''
       };
     },
     methods: {
       handleFileChange(e) {
         this.selectedFile = e.target.files ? e.target.files[0].name : '';
       }
     }
   };
   </script>

2. **样式改进**:
可以通过 CSS 样式来自定义输入框和按钮的外观。例如，你可以调整宽度、颜色、边框等属性。下面是一个简单的例子，展示如何移除边框：

   input[type="file"] {
     width: 100%;
     padding: 5px;
     border: none; /* 移除默认边框 */
     background-color: #f0f0f0;
     cursor: pointer;
   }

请注意，在实际项目中，你可能需要考虑兼容性和现代浏览器特性。