使用技术vue+饿了吗实现一个二级评论功能，可以使用的组件有哪些，最好有dome
使用Vue和ElementUI实现二级评论样式，可以使用的组件有：ElCollapse、ElCollapseItem、ElButton、ElCheckbox、ElInput、ElDialog。下面是一个示例代码：
// template
<el-collapse v-model="activeNames">
<el-collapse-item v-for="(comment,index) in comments" :key="index" :title="comment.name" name="1">
<el-button @click="handleComment()">评论</el-button>
<el-input v-show="show" placeholder="请输入评论内容"></el-input>
<el-checkbox v-model="comment.checked">回复 Ta</el-checkbox>
<el-dialog :visible.sync="dialogVisible" width="30%">
<span>确定要提交吗？</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</el-collapse-item>
</el-collapse>
//js
export default {
data() {
return {
activeNames: ["1"],
comments: [{
name: '',
checked: false
}],
show: false,
dialogVisible: false
}
},
methods: {
handleComment() {
this.show = true;
}
}
}
该回答引用ChatGPT
请参考下面的解决方案，如果觉得可行，还请点击 采纳，感谢支持！
使用 Vue.js 和 Element UI 实现二级评论功能，您可以使用以下 Element UI 组件：
1、El Comment：用于显示评论内容
2、El Input：用于输入评论
3、El Button：用于提交评论
4、El Collapse：用于隐藏/显示二级评论
<template>
<div>
<el-collapse v-model="activeNames">
<el-collapse-item title="First Comment" name="1">
<el-comment
v-for="comment in comments"
:key="comment.id"
:author="comment.author"
:avatar="comment.avatar"
:content="comment.content">
</el-comment>
<el-input
placeholder="Add a reply..."
v-model="replyInput">
</el-input>
<el-button type="primary" @click="submitReply">Submit</el-button>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
export default {
data() {
return {
activeNames: ['1'],
comments: [
{ id: 1, author: 'Author 1', avatar: 'Avatar 1', content: 'Comment 1' },
{ id: 2, author: 'Author 2', avatar: 'Avatar 2', content: 'Comment 2' }
],
replyInput: ''
};
},
methods: {
submitReply() {
this.comments.push({
id: this.comments.length + 1,
author: 'Author 3',
avatar: 'Avatar 3',
content: this.replyInput
});
this.replyInput = '';
}
}
};
</script>
上面的代码使用了 El Collapse 组件来隐藏/显示二级评论，El Comment 组件来显示评论内容，El Input 组件来输入评论，El Button 组件来提交评论。
不知道你这个问题是否已经解决, 如果还没有解决的话: