-
Notifications
You must be signed in to change notification settings - Fork 159
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[t-swipe-cell] 点击侧边按钮后不隐藏按钮 #1014
Labels
question
Further information is requested
Comments
👋 @TryBin03,感谢给 TDesign 提出了 issue。 |
@TryBin03 有没有可能是 ref 同名的问题? 另外没太理解这样封装 tSwipeCell和直接使用的意义和区别在哪里 <template>
<div>
<t-swipe-cell v-for="(item, index) in list" ref="cell" :key="item.text">
<t-cell :title="item.text + item.icon + index" note="辅助信息"></t-cell>
<template #right>
<div class="btn delete-btn" @click="handleDelete(item.text)">删除</div>
</template>
<template #left>
<div class="btn notCounted-btn">不计入总账</div>
<div class="btn edit-btn">编辑</div>
</template>
<template #sure-delete>
<div class="btn delete-btn" @click="handleSureDelete(item.text)">确认删除?</div>
</template>
</t-swipe-cell>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const cell = ref();
const handleDelete = (text: string) => {
const index = list.value.findIndex((i) => i.text === text);
cell.value[index].showSure('sure-delete');
};
const list = ref([
{ text: '点赞1', icon: '👍' },
{ text: '投币', icon: '🪙' },
{ text: '点赞2', icon: '⭐' },
]);
const handleSureDelete = (text: any) => {
const index = list.value.findIndex((i) => i.text === text);
list.value.splice(index, 1);
};
</script>
<style scoped lang="less">
.btn {
display: inline-flex;
justify-content: center;
align-items: center;
height: 100%;
width: 80px;
color: white;
font-size: 14px;
}
.delete-btn {
background-color: red;
}
.edit-btn {
background-color: #747bff;
}
.notCounted-btn {
background-color: #1e80ff;
}
</style> |
感谢🙏,但是有个疑问🤔️为什么 <t-swipe-cell v-for="(item, index) in list" ref="cell" :key="index">
...
</t-swipe-cell> |
index的值不固定,不建议作为key使用。涉及到 diff 算法,网络上有很多完整的详解,可以了解一下~ |
感谢🙏 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
tdesign-mobile-vue 版本
1.0.0-rc.6
重现链接
https://github.com/TryBin03/tdesignMobileVuePopupDemo
重现步骤
1.向左滑动,点击删除
2.点击确认删除
3.删除成功,但是还是会显示删除按钮
期望结果
隐藏删除按钮
实际结果
删除成功,但是还是会显示删除按钮
框架版本
No response
浏览器版本
No response
系统版本
No response
Node版本
No response
补充说明
No response
The text was updated successfully, but these errors were encountered: