搜索功能如何做?
首先给input框绑定v-module=‘search’ 点击搜索按钮获取搜索的接口
判断数组中是否包含搜索的内容,包含就进行渲染
网盘项目删除功能
1.给删除按钮绑定del事件 ,绑定弹框
2.点击确定的时候通过$emit(' 事件名',{})传递下标和对象
this.$emit('on-event',{
type:'delete',
item:this.item,
index:this.index
})
3.给父组件绑定监听
<Tablelist @on-event='onEvent'></Tablelist>
在父组件中定义onEvent方法
onEvent(e){
switch(e.type){
case 'delete':
this.list.splice(e.type.index,1)
}
}
全选功能
1.给多选框绑定changeSelect事件
<Checkbox @on-change='changeSelect' >全选</Checkbox>
点击的时候使用map遍历
changeSelect(e){
this.list.map((item,index)=>{
console.log(item)
item.checked=e
})
}
单选框
<Checkbox class="mb-0 mr-3" v-model='item.checked'></Checkbox>
反选
computed计算属性 单选框绑定onChange事件
<Checkbox @on-change='onChange' v-model='item.checked'></Checkbox>
点击的时候向父组件传递checked,item,index,和value
onChange(e){
this.$emit('on-event',{
type:'checked',
item:this.item,
index:this.index,
value:e
})
}
父组件
<Checkbox :value="checkAllStatus" @on-change='changeSelect' />
case "checked":
this.list[e.index].checked=e.value;
父组件定义一个计算属性checkList,使用filter过滤出checked为true的数量
checkList() {
return this.list.filter(item => item.checked == true)
},
checkAllStatus() {
return this.list.length == this.checkList.length
},
显示隐藏
checkedCount() {
return this.checkList.length
}
//重命名
给子组件重命名按钮绑定rename事件 绑定文字框
rename(){
this.$emit('on-event',{
type:'rename;
index:this.index
}
}
父组件
case 'rename' :
this.rename(e.index) 父组件点击的时候会执行rename方法
value:'' 输入框里的内容
弹框
rename(index=false){
let item = index == false ? this.checkList[0] : this.list[index];
let value = item.name
this.$Modal.confirm({
render: (h) => {
return h('Input', {
props: {
value: value,
autofocus: true,
placeholder: '请填写新的名称...'
},
on: {
input: (val) => {
this.value = val;
}
}
})
},
onOk: () => {
item.name = this.value
},
})
}
注册的业务逻辑:
1. 点击注册按钮
2. 获取文本框输入的数据
3. 判断输入的密码和确认的密码是否一致
4. 可选(使用md5对密码进行加密)
5. 调用注册接口,将文本框输入的数据通过注册接口发送给后台
6. 如果注册成功,判断后台返回的状态码是否为200,后台会返回成功的状态码和成功的数据信息
6.1 通过message提示框弹出一个提示,内容为注册成功
6.2 切换到登录界面
7. 如果注册失败,后台会返回失败的状态和失败的数据信息
7.1 根据对用状态码和对应的数据信息给用户进行不同的提示
登录业务逻辑:
1. 点击登录按钮
2. 通过iview的form表单的rules验证规则判断输入的用户名和密码是否符合输入的要求
3. 获取输入的用户名和密码
4. 调用登录接口,将获取到的用户名和密码发送给后台
5. 根据后台返回的状态码和数据进行下一步逻辑处理
5.1 如果状态码为200的话,则表示登录成功,通过message进行登录成功的信息提示, 跳转首页
5.2 如果状态码不为200的话,通过catch捕获错误,将对应的错误信息通过message进行提示