jquery popover plugin

本文介绍了一个Popover UI效果的在线演示页面,该页面展示了如何使用Popover插件来增强网站交互体验。通过此示例可以了解Popover的基本用法及配置选项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

http://effinroot.eiremedia.netdna-cdn.com/repo/plugins/effects-ui/popover/index.html

<template> <div class=“tag-list”> <d-tag v-for=“(item, index) in listMap.limitList” :key=“index” :color=“getColorByIndex(index)” class=“tag-item” @click=“tagClickHandle(item)” >{{ item }}</d-tag > <d-popover v-if=“listMap.scopeList.length” style=“width: fit-content; background-color: #fff” class=“cus-popover” trigger=“hover” > <d-tag class=“more-tag”>···</d-tag> <template #content> <ul class=“list-menu”> <li v-for=“(tag, index) in listMap.scopeList” :key=“index” class=“menu-item” @click=“tagClickHandle(tag)” > <d-tag type=“primary”>{{ tag }}</d-tag> </li> </ul> </template> </d-popover> </div> </template> <script setup> import { toRefs, computed } from “vue”; const emits = defineEmits([“tag-click”]); const props = defineProps({ list: { type: Array, default: () => [], }, limit: { type: Number, default: 8, }, }); const { list, limit } = toRefs(props); const tagColors = [ “blue-w98”, “aqua-w98”, “olivine-w98”, “green-w98”, “yellow-w98”, “orange-w98”, “pink-w98”, “purple-w98”, “#007d65”, “#aa2116”, “#007d65”, ]; const listMap = computed(() => { return { limitList: list.value.slice(0, limit.value).filter((tag) => tag), scopeList: list.value.slice(limit.value).filter((tag) => tag), }; }); function getColorByIndex(index) { const colorIndex = index % tagColors.length; return tagColors[colorIndex]; } const tagClickHandle = (value) => { emits(“tag-click”, value); }; </script> 完成以上代码的单元测试用例
最新发布
06-06
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值