【项目】UniApp实战多端企业网盘全栈开发 21 新建文件夹功能实现

秒速五厘米 2024-03-22 15:25 14阅读 0赞

### 【项目】UniApp实战多端企业网盘全栈开发 ###

#### 文章目录 ####

*   *  【项目】UniApp实战多端企业网盘全栈开发
     *   *   *  21 新建文件夹功能实现

![在这里插入图片描述][daac5300626d4b7e9b1e1a7247215b50.png_pic_center]

##### 21 新建文件夹功能实现 #####

组件添加

<f-dialog ref="newdir">
    			<input type="text" v-model="newdirname" class="flex-1 bg-light rounded px-2" style="height: 95rpx;" placeholder="新建文件夹名称"/>
    		</f-dialog>

![在这里插入图片描述][63b0c8a0fb50411692ae9e17a29b5cec.png_pic_center]

默认值为空，增加点击事件

![在这里插入图片描述][b3495d7acb624f059e7b0db278a44ff5.png_pic_center]

实现这个方法：

handleAddEvent(item) {
        
    				this.$refs.add.close()
    				switch (item.name) {
        
    					case "新建文件夹":
    						this.$refs.newdir.open((close) => {
        
    							if (this.newdirname == '') {
        
    								return uni.showToast({
        
    									title: '文件夹名称不能为空',
    									icon: 'none'
    								});
    							}
    
    							// 请求服务器
    							this.list.push({
        
    								type: "dir",
    								name: this.newdirname,
    								create_time: "2023-04-29 21:19",
    								checked: false
    							})
    							uni.showToast({
        
    								title: '新建文件夹成功',
    								icon: 'none'
    							});
    							close()
    						})
    						break;
    					default:
    						break;
    				}
    			}

看看效果

![在这里插入图片描述][f0babcd80a5e4c1eb41122761036fb50.gif_pic_center]

没问题。

[daac5300626d4b7e9b1e1a7247215b50.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/f76cbf888023433285f4163d322c5b78.png
[63b0c8a0fb50411692ae9e17a29b5cec.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/55d3bd8e28d34923a84947e0d30e3b68.png
[b3495d7acb624f059e7b0db278a44ff5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/b478ffd18c8a49ac9661226d1dfa9356.png
[f0babcd80a5e4c1eb41122761036fb50.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/7b550e7c7fd544e88218f77cb8a5a8b6.png