前言

很多 App 应用中会有添加和删除常用的应用功能，今天就用 Vue 来实现这个功能。步骤如下：

点击编辑按钮，常用应用出现减号 -，可以删除。非常用应用出现加号+，可以添加到常用应用中。
常用应用不可超过11个，不可少于4个。

一、分析思路

因为是动态渲染，所以需要两重循环，采用二维数组，第一层是循环类别，第二层循环类别里的具体应用。
点击减号删除时，从数据 list 中删掉相关的对象。
点击加号添加时，将相关的对象 push 到数组 list。

二、代码实现

数据格式整理，myList是我的应用数组，appList 是其他分类的数组。

    data(){return {myList:[{typeName: '常用的应用', typeId: 1,list: [{appIcon: "https://static.dingtalk.com/media/lALPDeC2t_t1SR3NAZDNAZA_400_400.png_450x10000q90.jpg",appName: '应用1',homepageLink: ''},{appIcon: "https://static.dingtalk.com/media/lALPDeC2t_t1SR3NAZDNAZA_400_400.png_450x10000q90.jpg",appName: '应用2',homepageLink: ''},{appIcon: "https://static.dingtalk.com/media/lALPDeC2t_t1SR3NAZDNAZA_400_400.png_450x10000q90.jpg",appName: '应用3',homepageLink: ''},{appIcon: "https://static.dingtalk.com/media/lALPDeC2t_t1SR3NAZDNAZA_400_400.png_450x10000q90.jpg",appName: '应用4',homepageLink: ''},{appIcon: "https://static.dingtalk.com/media/lALPDeC2t_t1SR3NAZDNAZA_400_400.png_450x10000q90.jpg",appName: '应用5',homepageLink: ''},{appIcon: "https://static.dingtalk.com/media/lALPDeC2t_t1SR3NAZDNAZA_400_400.png_450x10000q90.jpg",appName: '应用6',homepageLink: ''},{appIcon: "https://static.dingtalk.com/media/lALPDeC2t_t1SR3NAZDNAZA_400_400.png_450x10000q90.jpg",appName: '应用7',homepageLink: ''},{appIcon: "https://static.dingtalk.com/media/lALPDeC2t_t1SR3NAZDNAZA_400_400.png_450x10000q90.jpg",appName: '应用8',homepageLink: ''},{appIcon: "https://static.dingtalk.com/media/lALPDeC2t_t1SR3NAZDNAZA_400_400.png_450x10000q90.jpg",appName: '应用9',homepageLink: ''},{appIcon: "https://static.dingtalk.com/media/lALPDeC2t_t1SR3NAZDNAZA_400_400.png_450x10000q90.jpg",appName: '应用10',homepageLink: ''},{appIcon: "https://static.dingtalk.com/media/lALPDeC2t_t1SR3NAZDNAZA_400_400.png_450x10000q90.jpg",appName: '应用11',homepageLink: ''},]}],appList: [ {list: [{appIcon: "https://static.dingtalk.com/media/lALPDeC2t_t1SR3NAZDNAZA_400_400.png_450x10000q90.jpg",appName: '应用111',homepageLink: ''},{appIcon: "https://static.dingtalk.com/media/lALPDeC2t_t1SR3NAZDNAZA_400_400.png_450x10000q90.jpg",appName: '应用112',homepageLink: ''},{appIcon: "https://static.dingtalk.com/media/lALPDeC2t_t1SR3NAZDNAZA_400_400.png_450x10000q90.jpg",appName: '应用113',homepageLink: ''},{appIcon: "https://static.dingtalk.com/media/lALPDeC2t_t1SR3NAZDNAZA_400_400.png_450x10000q90.jpg",appName: '应用114',homepageLink: ''},{appIcon: "https://static.dingtalk.com/media/lALPDeC2t_t1SR3NAZDNAZA_400_400.png_450x10000q90.jpg",appName: '应用115',homepageLink: ''},{appIcon: "https://static.dingtalk.com/media/lALPDeC2t_t1SR3NAZDNAZA_400_400.png_450x10000q90.jpg",appName: '应用116',homepageLink: ''},{appIcon: "https://static.dingtalk.com/media/lALPDeC2t_t1SR3NAZDNAZA_400_400.png_450x10000q90.jpg",appName: '应用117',homepageLink: ''},{appIcon: "https://static.dingtalk.com/media/lALPDeC2t_t1SR3NAZDNAZA_400_400.png_450x10000q90.jpg",appName: '应用118',homepageLink: ''},{appIcon: "https://static.dingtalk.com/media/lALPDeC2t_t1SR3NAZDNAZA_400_400.png_450x10000q90.jpg",appName: '应用119',homepageLink: ''},{appIcon: "https://static.dingtalk.com/media/lALPDeC2t_t1SR3NAZDNAZA_400_400.png_450x10000q90.jpg",appName: '应用120',homepageLink: ''},{appIcon: "https://static.dingtalk.com/media/lALPDeC2t_t1SR3NAZDNAZA_400_400.png_450x10000q90.jpg",appName: '应用121',homepageLink: ''},], typeName: '生活娱乐', typeId: 2}],  allList:[],     typeList: [],    isShow: 0,//用来控制是否显示编辑按钮，只有在常用应用，也就是第一行的时候显示。       }}

渲染页面

<template><div class="modify-bg-color"v-loading="loading"element-loading-text="拼命加载中"element-loading-spinner="el-icon-loading"><div class="cm-bc-white cm-mt-02" v-if="!isDrag"><div class="cm-pt-02 cm-plr-02 cm-mlr-02"><div class="cm-flex  cm-jc-sb cm-ai-c"><div class="modify-back" @click="goBack()"><img :src="backIcon" alt="" class="modify-back-icon"></div><div class="cm-fw-bold cm-fs-032">{{myList[0] && myList[0].typeName||"我的应用"}}</div><div class="modify-edit" @click="displayOperate('edit')">编辑</div></div><div class="cm-mtb-02 cm-c-999 cm-tx-c">你可以通过编辑将常用应用添加到首页</div></div><div class="cm-p-02" ><div class="modify-wrapper"v-for="(item,index) in myList":key="index"@click="goApp(item.homepageLink)"><div class="cm-flex"><div class="modify-empty"></div><div class="cm-tx-c"><div><img class="cm-img-08 cm-border-radius-10":src="item.appIcon"alt=""></div></div><div class="modify-empty" ></div></div><div class="modify-label">{{item.appName}}</div></div></div></div><div class="cm-bc-white cm-mt-02" v-if="isDrag"><div class="cm-pt-02 cm-plr-02 cm-mlr-02"><div class="cm-flex  cm-jc-sb cm-ai-c"><div class="modify-back" @click="cancel()"><img :src="cancelIcon" alt="" class="modify-cancel-icon"></div><div class="cm-fw-bold cm-fs-032">{{myList[0] && myList[0].typeName||"我的应用"}}</div><div class="modify-done" @click="displayOperate('done')">完成</div></div><div class="cm-mtb-02 cm-c-999 cm-tx-c">你可以按住拖动调整我的应用顺序</div></div><draggable  @end="end" v-model="myList"><transition-group class="cm-p-02 modify-block"><div class="modify-wrapper-bg"v-for="(item,index) in myList":key="item.appName"@click="goApp(item.homepageLink)"><div class="cm-flex"><div class="modify-empty"></div><div class="cm-tx-c"><div><img class="cm-img-08 cm-border-radius-10":src="item.appIcon"alt=""></div></div><div class="modify-empty"><img :src="delIcon"class="already-add-size"@click.stop="changeSort('reduce',index,item)"></div></div><div class="modify-label">{{item.appName}}</div></div></transition-group></draggable></div><div v-for="(itemList,index1) in appList" class="cm-bc-white cm-mt-02" v-if="itemList.list.length>0"><div class="cm-flex cm-jc-sb cm-pt-02 cm-plr-02"><div class="cm-fs-030 cm-fw-bold">{{itemList.typeName}}</div></div><div class="cm-p-02" ><div :class="[isDrag? 'modify-wrapper-bg': 'modify-wrapper']"v-for="(item,index) in itemList.list"@click="goApp(item.homepageLink)"><div class="cm-flex"><div class="modify-empty"></div><div class="cm-tx-c"><div><img class="cm-img-08 cm-border-radius-10":src="item.appIcon"alt=""></div></div><div class="modify-empty"><img :src="addIcon" class="already-add-size" alt=""v-if="isDrag && !item.selected"@click.stop="changeSort('add',index,item)"><img :src="alreadyAdd"class="already-add-size"alt=""v-if="isDrag && item.selected"></div></div><div class="modify-label">{{item.appName}}</div></div></div></div><div><img class="modify-bottom" :src="bottomObj.bgImg" alt=""></div></div>
</template>

编写逻辑。

created(){self = this;var promise1 = new Promise(function (resolve) {self.getAppList(function (res) {resolve(res);});});var promise2 = new Promise(function (resolve) {self.getAppTypeList(function (res) {resolve(res);});});var promise3 = new Promise(function (resolve) {self.getMyList(function (res) {resolve(res);});});var pro = Promise.all([promise1,promise2,promise3]);pro.then(function ([list,typeList,myList]) {self.loading = false;self.typeList = typeList;self.allList = list;//其他应用中包含我的应用时，修改selected状态为trueconsole.log(list);console.log(myList);list.map((item,index)=>{for (var k = 0; k < myList.length; k++) {if(item.appName === myList[k].appName){item.selected = true;}}});for (var i = 0; i < typeList.length; i++){var item = typeList[i];self.typeList[i].list = [];for (var j = 0; j < list.length; j++) {if (item.id == list[j].typeId) {self.typeList[i].list.push(list[j]);}}}self.appList = self.typeList;})},methods: {end(){self.$forceUpdate();},goBack:()=>{self.$router.push({name: "home"});},cancel(){self.isDrag = !self.isDrag;},goApp(url){dd.biz.util.openLink({url:url,//要打开链接的地址onSuccess : function(result) {/**/},onFail : function(err) {}});},changeSort: (str,index,item) => {var arr = self.myList;console.log(item);//如果点击的是删除按钮if (str == 'reduce') {if (arr.length <= self.minNum) {//常用应用个数小于或等于3则弹出提示框self.$message.error('自建应用不能少于'+self.minNum+'个');} else {//常用应用个数大于3才能删除self.myList.splice(index, 1);if(item.selected){item.selected = !item.selected;}self.allList.map((item1,index)=>{if(item1.appName === item.appName){item1.selected = false;}});self.$forceUpdate();}} else {//如果点击的是添加按钮if (arr.length >= self.maxNum) {//添加时如果大于或等于11个应用时，则弹出提示框self.$message.error('自建应用不能多于'+self.maxNum+'个');} else {arr.push(item);item.selected = true;}}},displayOperate: (operate) => {//判断是否显示编辑按钮，编辑按钮在第一行显示self.isDrag = !self.isDrag;var data = [];self.myList.map((item,index)=>{data.push({"agentId":item.agentId,"orderId":index})});console.log(data);if(operate == 'done'){getData({method: 'post',url: 'appInfo/addUserAppList',data:{"appList": data},successCB: (res) => {//cb(res.result);}});}},getAppList: (cb) => {getData({method: 'post',url: 'appInfo/getappList',data:{pageCount: 1,pageSize: 200},successCB: (res) => {cb(res.result);}});},getMyList: (cb) => {getData({method: 'post',url: 'appInfo/getappListForHome',data:{},successCB: (res) => {self.myList = res.result;cb(res.result);}});},getAppTypeList(cb){getData({method: 'post',url: 'appInfo/getappTypeList',data:{pageCount: 1,pageSize: 200},successCB: (res) => {console.log(res);cb(res.result);}});}}

三、效果

以下是将常用应用的“应用10”和"应用11"删除，将生活娱乐中的"应用111"和"应用112"添加到常用应用中。

四、总结

这个功能的重点是先要封装数据结构，处理成二维数组的形式。
数据结构清晰之后，如果是删除，则通过 splice 来删除数组中的对象；如果是添加，则通过 push 将对象添加到数组中。

实战 Vue 之实现添加和删除常用应用功能相关推荐

后盾网lavarel视频项目---vue实现动态添加和删除板块
后盾网lavarel视频项目---vue实现动态添加和删除板块一.总结一句话总结: 原理就是:列表时根据vue中的videos变量中的元素来遍历的,初始时videos:[{title:'',pat ...
JavaWeb项目----实现用户登录、注册、对商品信息进行的添加、删除、修改功能
MySQL部分 #创建数据库 create database mydb;#创建表 create table t_user (uid int primary key auto_increment,use ...
用js实现添加和删除元素的功能
一.实现效果二.HTML.CSS.JS代码 <!doctype html> <html> <head><meta charset="utf-8&q ...
实战 Vue 之实现拖曳排序功能
实现拖曳排序功能前言一.功能描述二.代码实现三.使用 draggable 组件小结四.完整代码前言在前面一节 <实现添加和删除常用应用功能> 讲到了删除和添加常用应用功能,今 ...
vue根据索引删除数组中的一个对象_Vue实现动态添加或者删除对象和对象数组的操作方法...
添加核心代码如下: this.data.push({ type: [{ value: '选项1', label: 'in' }, { value: '选项3', label: 'out' }], va ...
Android中删除常用联系人（上）
在Android 4.0中,google已经把移除常用联系人这个功能去掉. 当用户在进行拨打电话,接听电话等电话行为时,系统会自动对其对应号码的使用进行计数.然后根据计数情况来显示常用联系人. 移除常 ...
JS实现动态添加和删除div
实现方式一:只在最后一个数据中动态添加或者删除 | 背景需要做一个页面,页面可以输入参数,点击确认按钮可以发请求给某接口.但是接口的某个字段是数组类型,所以在页面上需要实现添加或者删除元素的功能. ...
JSP中动态添加或删除table的行
个想要实现如上图动态添加或者删除一行的功能,代码如下:(包含点击"环节参与人员"空白栏时弹出组织结构人员树时的弹窗功能) HTML部分: <body ><di ...
【Vue案例二】实现对表单数据的添加、删除以及关键字查询操作
本文我们通过一个小案例来巩固一下前面学到的内容,即实现对表单数据的添加,删除和关键字查询的操作,具体案例效果如下: <!DOCTYPE html> <html lang=" ...

实战 Vue 之实现添加和删除常用应用功能

实现添加和删除常用应用功能

前言

一、分析思路

二、代码实现

三、效果

四、总结

实战 Vue 之实现添加和删除常用应用功能相关推荐

最新文章

热门文章