<template> <div> <el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info" icon-color="red" title="确定退出登陆吗?" @confirm="out" > <el-button slot="reference" type="danger" style="margin-top: 10px" round @click> logout </el-button> </el-popconfirm> </div> </template> <script> export default { name: "logout", methods: { out() { sessionStorage.removeItem("token") this.$router.push('/') } } } </script> <style scoped> </style>
时间: 2023-06-25 22:02:44 浏览: 63
这是一个基于 Vue.js 和 Element UI 组件库的退出登录按钮组件。使用了 Element UI 的 Popconfirm 弹窗组件来提醒用户确认退出登录操作,点击确认按钮后执行 out 方法,删除 sessionStorage 中存储的 token 并跳转到首页。其中,@confirm 是 Popconfirm 确认事件的监听器。如果需要使用该组件,需要先安装 Vue.js 和 Element UI 组件库。
相关问题
<el-table :data="tableData" stripe> <el-table-column prop="id" label="ID" width="80" sortable></el-table-column> <el-table-column prop="content" label="地址"></el-table-column> <el-table-column prop="phone" label="电话"></el-table-column> <el-table-column label="操作" width="180" align="center"> <template slot-scope="scope"> <el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button> <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='我再想想' icon="el-icon-info" icon-color="red" title="您确定删除吗?" @confirm="del(scope.row.id)" > <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button> </el-popconfirm> </template> </el-table-column> </el-table> 解释一下
这段代码是使用 Element UI 框架中的 el-table 组件来展示一个数据表格。其中,tableData 是用来存储表格数据的数组,prop 属性用来指定表格列对应数据中的键名,label 属性用来指定表格列的标题,width 属性用来设置表格列的宽度,sortable 属性用来启用表格列的排序功能。template 标签用来定义一个插槽,使得我们可以在表格中自定义一些操作列的内容。在操作列中,我们使用 el-button 组件来定义编辑按钮,使用 el-popconfirm 组件来定义删除按钮,并且通过 @confirm 事件来触发删除操作。
<div class="popup-content"> <div class="popup-row"> <div class="popup-item">5</div> <div class="popup-item">10</div> <div class="popup-item">20</div> </div> <div class="popup-row"> <div class="popup-item">50</div> <div class="popup-item">100</div> <div class="popup-item">200</div> </div> <div> <div><van-button round type="info">确认提现</van-button></div> </div> </div>点击确认提现弹出选中的div中对应的数字并示范一下
好的,以下是示例代码:
HTML 代码:
```html
<div class="popup-content">
<div class="popup-row">
<div class="popup-item" id="popup-item-1">5</div>
<div class="popup-item" id="popup-item-2">10</div>
<div class="popup-item" id="popup-item-3">20</div>
</div>
<div class="popup-row">
<div class="popup-item" id="popup-item-4">50</div>
<div class="popup-item" id="popup-item-5">100</div>
<div class="popup-item" id="popup-item-6">200</div>
</div>
<div>
<div><van-button round type="info" id="confirm-button">确认提现</van-button></div>
</div>
</div>
```
JavaScript 代码:
```javascript
// 获取确认提现按钮元素
var confirmButton = document.getElementById("confirm-button");
// 添加点击事件处理程序
confirmButton.onclick = function() {
// 获取所有选项元素
var popupItems = document.getElementsByClassName("popup-item");
// 遍历选项元素
for (var i = 0; i < popupItems.length; i++) {
// 判断当前选项元素是否被选中
if (popupItems[i].classList.contains("selected")) {
// 提取选项元素中的数字并弹出提示框
var selectedNumber = popupItems[i].innerHTML;
alert("您选中了:" + selectedNumber);
break;
}
}
}
// 获取所有选项元素
var popupItems = document.getElementsByClassName("popup-item");
// 遍历选项元素
for (var i = 0; i < popupItems.length; i++) {
// 添加点击事件处理程序
popupItems[i].onclick = function() {
// 取消所有选中状态
for (var j = 0; j < popupItems.length; j++) {
popupItems[j].classList.remove("selected");
}
// 添加选中状态
this.classList.add("selected");
}
}
```
示例代码中,我们给每个选项元素添加了一个唯一的 ID,然后在确认提现按钮的点击事件中,遍历所有选项元素,找到被选中的元素,提取其中的数字,并弹出提示框。
同时,我们也给每个选项元素添加了一个点击事件处理程序,当用户点击一个选项时,我们会取消所有选中状态,然后将当前选项设为选中状态。这样,用户就可以通过点击选项来选择要提现的金额。