vue 杂烩

1、路由的使用

  • 1、创建组件;
  • 2、在路由中引入 组件  配置路由
  • 3、使用路由 router-link ;router-view 

2、路由的参数 :  $route.params;

  • 1、获取具体的参数值: 
  • 2、$route.params.具体的参数名称
  • 3、路由中path配置  /xx/:具体的参数名称(:动态路由的参数);

3、子路由

  • 1、创建子组件   
  • 2、引入子组件  在父组件路由中使用

             children: [

                            {path:'xx',component:xx},

                            {path:'xxx',component:xxx}

                           ]

  • 3、在父组件中使用 router-view  占位
### 实现 Vue2 图片上传组件并带有进度条 为了构建一个适用于 Vue 2 的图片上传组件,并集成进度条功能,可以从创建一个新的 Vue 组件开始。此组件不仅能够处理文件的选择与提交操作,还能实时反馈上传过程中的进展状况。 #### 创建 `ImageUploadWithProgress` 组件 ```html <template> <div class="upload-container"> <input type="file" @change="onFileChange"/> <progress :value="progressPercentage" max="100">{{ progressPercentage }}</progress> <span v-if="progressPercentage > 0"> {{ progressPercentage }}% </span> </div> </template> <script> export default { data() { return { file: null, progressPercentage: 0, // 初始进度为0% }; }, methods: { onFileChange(event) { // 当用户选择了文件时触发的方法 this.file = event.target.files[0]; const formData = new FormData(); formData.append('image', this.file); let xhr = new XMLHttpRequest(); // 使用原生 XHR 来模拟上传请求 xhr.upload.addEventListener("progress", (event) => { if (event.lengthComputable) { this.progressPercentage = Math.round((event.loaded * 100) / event.total); } }, false); // 监听上传事件以获取当前进度 xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { console.log('上传成功'); } else if (xhr.readyState === 4){ console.error('上传失败'); } }; xhr.open("POST", "/api/upload"); // 替换成实际的服务端接口地址 xhr.send(formData); } } }; </script> <style scoped> /* 添加一些基本样式 */ .upload-container{ margin-top: 20px; } progress { width: 100%; height: 20px; border-radius: 5px; } progress[value]::-webkit-progress-bar { background-color: lightgray; border-radius: 5px; } progress[value]::-webkit-progress-value { background-color: green; border-radius: 5px; } </style> ``` 上述代码展示了如何利用 HTML `<input>` 元素让用户选择要上传的图像文件,并通过监听 `XMLHttpRequest` 对象上的 `progress` 事件来跟踪上传状态的变化[^2]。每当有新的进度数据可用时,就会相应地调整视图中显示的进度百分比。 此外,在样式部分定义了一些简单的 CSS 样式用于美化进度条外观。值得注意的是,这里假设服务器端有一个 `/api/upload` 接口用来接收客户端发送过来的数据包;在真实环境中应当替换为此路径指向的实际 API 地址。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值