<van-cell is-link @click="$router.push('sign')"> <template #title> <i class="icon icon-sign"></i> <span>签约管理</span> </template> </van-cell>在签约管理后面加一个圆形红色点,接口返回结果显示,接口不返回结果不显示
时间: 2023-11-16 10:42:57 浏览: 39
您可以使用`van-badge`组件来实现在"签约管理"后面加一个圆形红色点的效果。首先,在`van-cell`组件的外部包裹一个`van-badge`组件,并设置其属性`dot`为真,表示显示一个圆形红色点。然后,根据接口返回的结果来控制`van-badge`组件的显示与隐藏。
以下是示例代码:
```html
<van-cell is-link @click="$router.push('sign')">
<template #title>
<i class="icon icon-sign"></i>
<span>签约管理</span>
</template>
<van-badge v-if="showBadge" dot type="danger"></van-badge>
</van-cell>
```
在上述代码中,我们使用了一个名为`showBadge`的变量来控制`van-badge`组件的显示与隐藏。当接口返回结果时,将`showBadge`设置为真,即可显示红色点;当接口不返回结果时,将`showBadge`设置为假,即可隐藏红色点。
请注意,以上代码仅为示例,您需要根据您的实际情况进行适当调整。
相关问题
<el-button @click="this.$router.back()">返回首页</el-button> 为何报错
报错的原因可能是因为使用了错误的语法或方法导致的。下面是一些可能的原因和解决方法:
1. `this.$router` 是否正确引入:确保你已经在组件中正确导入了 `$router` 对象。如果没有正确导入,可以尝试在组件的 `data` 属性中添加 `router` 对象来进行访问。
```javascript
data() {
return {
router: this.$router
}
}
```
2. `@click` 事件绑定是否正确:确认你是否正确绑定了 `@click` 事件,并且传入了正确的函数或方法。
```html
<el-button @click="goBack">返回首页</el-button>
```
3. `goBack` 方法是否存在:确保你在组件的方法中定义了 `goBack` 方法,并且实现了返回首页的逻辑。
```javascript
methods: {
goBack() {
this.$router.back();
}
}
```
4. 路由对象是否正确配置:确认你的路由对象是否正确配置,并且包含了正确的路由路径和组件。
```javascript
const routes = [
{
path: '/',
name: 'Home',
component: Home
}
]
```
请根据具体情况逐一检查以上可能的原因,并逐步解决问题。如果问题仍然存在,请提供更多的代码和错误信息以便我能够更好地帮助你解决问题。
<div v-else> <el-badge class="badge" :value="unread.length" :max="10" style="cursor: pointer" @click="clickRead"> <el-icon style="color: #666" size="25"><Bell /></el-icon> </el-badge> <span style="margin-right: 5px; color: steelblue">欢迎您,{{ user.name }}</span> <el-dropdown> <el-avatar :size="40" :src="user.avatar" style="margin-top: 10px" /> <template #dropdown> <el-dropdown-menu> <el-dropdown-item><div @click="router.push('/front/dynamic')">我的动态</div></el-dropdown-item> <el-dropdown-item><div @click="router.push('/front/collect')">我的收藏</div></el-dropdown-item> <el-dropdown-item><div @click="router.push('/front/address')">我的收货地址</div></el-dropdown-item> <el-dropdown-item><div @click="router.push('/front/person')">个人信息</div></el-dropdown-item> <el-dropdown-item><div @click="router.push('/front/password')">修改密码</div></el-dropdown-item> <el-dropdown-item><div @click="logout">退出登录</div></el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div>
这是一个 Vue.js 组件,包含了用户登录后的界面,其中包括一个带有数字标记的消息提醒图标,显示当前用户的用户名,并提供了一个下拉菜单。下拉菜单中包含了用户的个人信息、动态、收藏、收货地址、修改密码和退出登录等选项。具体实现细节如下:
- 使用 v-else 指令,当用户已登录时,显示该 div 元素。
- 使用 ElementUI 的 el-badge 组件,用于显示消息提醒图标,并根据未读消息数量进行标记。
- 使用 ElementUI 的 el-icon 组件,用于显示消息提醒图标中的图标,这里使用了一个名为 Bell 的组件。
- 使用 ElementUI 的 el-dropdown 组件,用于实现下拉菜单。
- 使用 ElementUI 的 el-avatar 组件,用于显示用户头像。
- 使用 ElementUI 的 el-dropdown-menu 组件,用于实现下拉菜单的选项。
- 通过 @click 事件监听器,实现了下拉菜单选项的点击事件,根据用户的选择跳转到对应的路由或执行对应的操作。