【项目】UniApp实战多端企业网盘全栈开发 19 删除和重命名功能实现

以你之姓@ 2024-03-22 15:25 9阅读 0赞

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

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

*   *  【项目】UniApp实战多端企业网盘全栈开发
     *   *   *  19 删除和重命名功能实现

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

##### 19 删除和重命名功能实现 #####

当然现在的删除还不是真正的删除，我们可以将其过滤掉

// 处理底部操作条事件
    			handleBottomEvent(item) {
        
    				switch (item.name) {
        
    					case "删除":
    						this.$refs.dialog.open((close) => {
        
    							this.list = this.list.filter(item => !item.checked)
    							close()
    							uni.showToast({
        
    								title: '删除成功',
    								icon: 'none'
    							});
    						});
    						break;
    					default:
    						break;
    				}
    			}

现在的效果

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

下面是重命名

<f-dialog ref="delete">
    			是否删除选中？
    		</f-dialog>
    
    		
    		<f-dialog ref="rename">
    			<input type="text" value="" class="flex-1 bg-light rounded px-2" style="height: 95rpx;" placeholder="重命名"/>
    		</f-dialog>

点击方法

试试

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

可以

接着改

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

编写方法

// 处理底部操作条事件
    			handleBottomEvent(item) {
        
    				switch (item.name) {
        
    					case "删除":
    						this.$refs.delete.open((close) => {
        
    							this.list = this.list.filter(item => !item.checked)
    							close()
    							uni.showToast({
        
    								title: '删除成功',
    								icon: 'none'
    							});
    						});
    						break;
    
    					case '重命名':
    						this.renameValue = this.checkList[0].name
    						this.$refs.rename.open((close) => {
        
    							if (this.renameValue == '') {
        
    								return uni.showToast({
        
    									title: '文件名不能为空',
    									icon: 'none'
    								});
    							}
    							this.checkList[0].name = this.renameValue
    							close()
    						})
    					default:
    						break;
    				}
    			}

看看效果，

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

如果输入为空值

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

修改

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

没问题。

[5067e93c007a4c298927c5cbe606af60.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/9270a79ecb2a401faf121f4f942fee7b.png
[07c50a033b7541e2aac422d4d3023e7d.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/70f9808ffe1b40f5bd2517c2a326ca82.png
[224370ced5194d3e95f7889a4394295e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/2187467fd8334914b0f59c739357d0bc.png
[8c721da36ca14be1aa9f17c1f347671e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/23684bdf4d7c4bb680f7a74899168aec.png
[fd26394cf1cb4d7386b4e4609bdcbfc2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/a3d724d60a674e279021d0dd2f98e696.png
[f6ce1942af5d4ecf9eb91339503c2af2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/292b8cef2d3d43289c40830139033984.png
[005e38cf521d49439657f53bcaaaab57.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/a7070f3eb99e483491b99e4ebec8bafd.png