Skip to content

M
memberTag-web
Commit 5d6becae by liuchenxi
Options

update: 删除和新增动效

parent d283e3ff
Showing with 109 additions and 17 deletions
src/view/memberGroup/edit-tag.vue
......@@ -21,9 +21,10 @@
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="handleSave" style="margin-bottom: 14px">确 定</el-button>
<el-button ref="animationStart" type="primary" @click="handleSave" style="margin-bottom: 14px">确 定</el-button>
</span>
</el-dialog>
<i id="aniIcon" class="iconfont icon-shougongbiaoqian aniIcon" :style="{ right: `${animationPos.x}px`, bottom: `${animationPos.y}px` }"></i>
</div>
</template>
......@@ -57,7 +58,8 @@ export default {
templateData: [],
tagDataAssgin: {},
templateObj: {},
isAddFlag: false
isAddFlag: false,
animationPos: {},
};
},
watch: {
......@@ -79,13 +81,14 @@ export default {
handleClose() {
this.$emit('update:showEditTagPop', false);
},
handleSave() {
handleSave($event) {
const ret = this.$refs.tagConfig.getTemplateData();
this.templateData = JSON.parse(JSON.stringify(ret));
this.tagId = this.tagDataAssgin.tagId;
this.$refs.tagConfig.saveConfirm().then(res => {
if (res) {
this.startAnimation($event);
this.$emit('update:showEditTagPop', false);
this.$emit('refersh', this.tagDataAssgin);
}
......@@ -98,7 +101,18 @@ export default {
},
returnTagData(list) {
this.$emit('returnTagData', list);
}
},
startAnimation(e) {
this.animationPos = {
x: document.body.offsetWidth - e.pageX,
y: document.body.offsetHeight - e.pageY
}
console.log(document.body.offsetWidth, e.pageX);
document.querySelector('#aniIcon').style.display = 'block'
setTimeout(_ => {
document.querySelector('#aniIcon').style.display = 'none'
}, 1800)
},
}
};
</script>
......@@ -160,6 +174,26 @@ export default {
border-top: 1px solid #ebeef5;
}
}
.aniIcon {
display: none;
position: absolute;
z-index: 99999;
color: #2F54EB;
font-size: 26px;
animation: toTrash 2s infinite;
opacity: 0;
}
@keyframes toTrash {
0% {
opacity: 1;
}
100% {
right: 30px;
bottom: 380px;
font-size: 12px;
opacity: 0;
}
}
</style>
<style>
/* tooltip */
......
src/view/platformTag/tag-container-active.vue
......@@ -49,12 +49,13 @@
<div class="font-0">
<el-button class="m-r-12" type="text" @click="editActiveTag(scope.row)">编辑</el-button>
<el-button class="m-r-12" type="text" @click="editActiveTagValue(scope.row)">详情</el-button>
<el-button class="m-r-12" type="text" @click="deleteActiveTag(scope.row, scope.$index, e)">删除</el-button>
<el-button class="m-r-12" type="text" @click="deleteActiveTag(scope.row, scope.$index, $event)">删除</el-button>
</div>
</template>
</el-table-column>
</el-table>
<delete-tag-dialog :visible.sync="deleteTagDialog.visible" :data="deleteTagDialog.deleteData" @submit="doDelete" />
<i id="activeAniIcon" class="iconfont icon-shougongbiaoqian activeAniIcon" :style="{ right: `${animationPos.x}px`, bottom: `${animationPos.y}px` }"></i>
</div>
</template>
......@@ -90,6 +91,7 @@ export default {
visible: false,
deleteData: {}
},
animationPos: {}
};
},
methods: {
......@@ -162,9 +164,9 @@ export default {
const { errorCode } = res.data;
if (errorCode === 1) {
item.delStatus = 0;
this.startAnimation(e)
this.$store.commit('changeDelTrashNum', this.$store.state.delTrashNum + 1);
this.$message.success('添加成功，请点击右侧「垃圾桶」图标进行删除');
// this.startAnimation(e)
return;
}
errMsg.errorMsg(res.data);
......@@ -175,6 +177,16 @@ export default {
});
});
},
startAnimation(e) {
this.animationPos = {
x: document.body.offsetWidth - e.pageX,
y: document.body.offsetHeight - e.pageY
}
document.getElementById('activeAniIcon').style.display = 'block';
setTimeout(() => {
document.getElementById('activeAniIcon').style.display = 'none';
}, 1800)
},
},
watch: {
data: {
......@@ -227,4 +239,24 @@ export default {
.refresh {
color: #606266;
}
#activeAniIcon {
display: none;
position: fixed;
z-index: 99999;
color: #2F54EB;
font-size: 26px;
animation: toTrash 2s;
opacity: 0;
}
@keyframes toTrash {
0% {
opacity: 1;
}
100% {
right: 30px;
bottom: 380px;
font-size: 12px;
opacity: 0;
}
}
</style>
src/view/platformTag/tag-container.vue
......@@ -67,14 +67,15 @@
<el-table-column label="操作" v-if="(getCodeAuth('edit') || getCodeAuth('setValue') || getCodeAuth('delete'))" min-width="200" fixed="right">
<template slot-scope="scope">
<div class="font-0">
<el-button class="m-r-12" type="text" v-if="!isWeim && getCodeAuth('edit')" :limit-code="getCode('edit')" @click="editHandTag(scope.row)">编辑</el-button>
<el-button class="m-r-12" type="text" v-if="!isWeim && getCodeAuth('edit') && !weimId.includes(scope.row.tagLevelGroupId)" :limit-code="getCode('edit')" @click="editHandTag(scope.row)">编辑</el-button>
<el-button class="m-r-12" type="text" v-if="getCodeAuth('setValue')" :limit-code="getCode('setValue')" @click="editHandTagValue(scope.row)">详情</el-button>
<el-button class="m-r-12" type="text" v-if="!isWeim && getCodeAuth('delete')" :limit-code="getCode('delete')" @click="deleteHandTag(scope.row, scope.$index, $event)">删除</el-button>
<el-button class="m-r-12" type="text" v-if="!isWeim && getCodeAuth('delete') && !weimId.includes(scope.row.tagLevelGroupId)" :limit-code="getCode('delete')" @click="deleteHandTag(scope.row, scope.$index, $event)">删除</el-button>
</div>
</template>
</el-table-column>
</el-table>
<delete-tag-dialog :visible.sync="deleteTagDialog.visible" :data="deleteTagDialog.deleteData" @submit="doDelete" />
<delete-tag-dialog :visible.sync="deleteTagDialog.visible" :data="deleteTagDialog.deleteData" @submit="doDelete" />
<i id="tagAniIcon" class="iconfont icon-shougongbiaoqian tagAniIcon" :style="{ right: `${animationPos.x}px`, bottom: `${animationPos.y}px` }"></i>
</div>
</template>
......@@ -111,6 +112,8 @@ export default {
visible: false,
deleteData: {}
},
weimId: ['3d11ac15963b4c0790762e6147ea9315', '5bdac971673b4f40a9af981e3c9215bf'],
animationPos: {}
};
},
methods: {
......@@ -166,7 +169,6 @@ export default {
},
// 加入到垃圾桶
intoTrash(item, index, e) {
console.log(item);
const para = {
itemId: item.tagId,
type: 1
......@@ -175,10 +177,9 @@ export default {
const { errorCode } = res.data;
if (errorCode === 1) {
item.delStatus = 0;
console.log(this.$store.state.delTrashNum + 1);
this.startAnimation(e);
this.$store.commit('changeDelTrashNum', this.$store.state.delTrashNum + 1);
this.$message.success('添加成功，请点击右侧「垃圾桶」图标进行删除');
// this.startAnimation(e)
return;
}
errMsg.errorMsg(res.data);
......@@ -189,6 +190,16 @@ export default {
});
});
},
startAnimation(e) {
this.animationPos = {
x: document.body.offsetWidth - e.pageX - 30,
y: document.body.offsetHeight - e.pageY
}
document.getElementById('tagAniIcon').style.display = 'block';
setTimeout(() => {
document.getElementById('tagAniIcon').style.display = 'none';
}, 1800)
},
handleTrackParam(type, data) {
let fn = {
addTag: () => {
......@@ -287,11 +298,6 @@ export default {
top: 1px;
}
.sort {
// /deep/ .el-input__inner {
// height: 24px;
// width: 24px;
// padding: 0 7px;
// }
height: 24px;
padding: 0 7px;
display: inline-block;
......@@ -302,4 +308,24 @@ export default {
color: #303133;
border: 1px dashed #C4C6CF;
}
#tagAniIcon {
display: none;
position: fixed;
z-index: 99999;
color: #2F54EB;
font-size: 26px;
animation: toTrash 2s infinite;
opacity: 0;
}
@keyframes toTrash {
0% {
opacity: 1;
}
100% {
right: 30px;
bottom: 380px;
font-size: 12px;
opacity: 0;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment