Telegram的文件发送样式 用vue来实现

好的，下面是一个简单的使用Vue实现Telegram文件发送样式的示例：

<template>
  <div class="file-upload">
    <div class="file-select">
      <span class="file-select-button" @click="$refs.fileInput.click()">Choose File</span>
      <div class="file-select-name">{{ fileName }}</div>
      <input type="file" ref="fileInput" @change="onFileChange">
    </div>
    <button class="file-upload-button" @click.prevent="uploadFile">Send</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null,
      fileName: 'No file selected'
    }
  },
  methods: {
    onFileChange(event) {
      this.file = event.target.files[0]
      this.fileName = this.file ? this.file.name : 'No file selected'
    },
    uploadFile() {
      // Upload file to server
    }
  }
}
</script>

<style scoped>
.file-upload {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.file-select {
  display: flex;
  align-items: center;
  flex: 1;
}

.file-select-button {
  font-size: 14px;
  padding: 5px 10px;
  color: #fff;
  background-color: #0088cc;
  border-radius: 5px;
  cursor: pointer;
}

.file-select-name {
  margin-left: 10px;
  font-size: 14px;
  color: #555;
}

.file-upload-button {
  margin-left: 10px;
  font-size: 14px;
  padding: 5px 10px;
  color: #fff;
  background-color: #0088cc;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.file-upload-button:hover {
  background-color: #006699;
}
</style>

在上面的代码中，我们定义了一个包含文件上传功能的组件，使用Vue的`v-model`指令将文件上传框的值绑定到组件的数据属性中，监听`@change`事件获取上传的文件，使用CSS样式美化文件上传框和发送按钮。当用户点击发送按钮时，调用`uploadFile`方法来上传文件，可以在该方法中将文件发送到服务器。

最后，您需要将组件导出并在父组件中使用它。例如：

<template>
  <div>
    <file-upload></file-upload>
  </div>
</template>

<script>
import FileUpload from './FileUpload.vue'

export default {
  components: {
    FileUpload
  }
}
</script>

以上是一个简单的使用Vue实现Telegram文件发送样式的示例。您可以根据自己的需求进行修改和扩展。