分享一个基于vue的环形菜单组件

2023-10-29

vue-quick-menu是一个应用于移动端的快速导航组件。它拥有炫酷的展开和收起时的动画效果。它支持自定义菜单的显示位置,菜单的数量,颜色等属性。

demo

图片描述

安装

通过NPM安装

npm install vue-quick-menu --save

插件应用

这是一个使用的例子

<quick-menu :menu-count=count :icon-class=icons :menu-url-list=list></quick-menu>

import Vue from 'vue'
import quickMenu from 'vue-quick-menu'

export default {
  ...
  components: {
    quickMenu
  },
  ...
}

插件参数

Property Type Default Description
menuCount Number 4 导航菜单的数量 可选2,3,4
menuUrlList Array - 菜单的url的数组
iconClass Array - 菜单项的图标
position top-left,top-right,bottom-left or bottom-right top-left 菜单的位置
backgroundColor String #009dc7 菜单的背景色
color String #ffffff 菜单图标的颜色
isOpenNewTab Boolean false 是否在原窗口打开菜单指向的url

最后推荐一下轮子工厂--一个分享vue,angular优秀组件的网站

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

分享一个基于vue的环形菜单组件 的相关文章

  • 浏览器视口大小(以设备像素为单位)

    Goal 我希望 Flash 能够获得有关浏览器视口宽度和高度 以设备像素为单位 的准确信息初始化 调整大小或浏览器缩放事件时 规格 我需要将 flash 嵌入到在 chrome safari firefox 等中运行的 html 页面中
  • 如何在没有 jQuery 的情况下删除 Javascript 中的元素

    我试图通过以下方式从 DOM 中删除 Div a 标签嵌套在其中 我想我正在寻找的是 jQuery 的纯 Javascript 版本 div remove 这是html设置 div a href Click me to remove the
  • 使用 Node.js 构建网站的最佳实践

    这个问题的答案是社区努力 help privileges edit community wiki 编辑现有答案以改进这篇文章 目前不接受新的答案或互动 我想知道如何使用 Node js 从头开始 开发一个网站 我明白我怎么能possibly
  • 如何使用有角度的材料创建卡片网格?

    我正在尝试使用 ng repeat 创建每行三张卡片的网格 我有一个普通的 javascript 对象数组附加到范围 下面的代码将为每张卡创建一个新行 div div
  • 想要动态处理与分页相关的页码显示:ReactJS

    我有一些分页逻辑工作得很好 唯一的问题是我只能让它显示并固定数量的页面可供选择 现在我已经把它放到了 5 页 但我希望它能够根据总记录动态更改 假设我有 100 条记录 每页限制为 10 条 将有 10 页 现在我只能让它以这种方式显示 第
  • 如何在网站上使用 svg 元素制作块的屏幕截图?

    我在网站上创建了一个构造函数 其本质是将所选元素及其颜色 svg中的元素 添加到访问者选择的背景和背景颜色 png中的背景 中 然后必须单击 保存 结果 按钮并仅执行工作区的屏幕截图 我写了这个脚本 但它需要屏幕截图 但只有背景 并忽略选定
  • 按下回车键时不刷新页面

    我遇到了一些问题 只要表单中有输入 回车键就会触发页面刷新 下面的代码 如果按下回车并且文本区域 input 中没有输入任何文本 则不会刷新页面 但是如果按下回车并且 input中有输入或者光标位于文本区域 我不确定是什么触发了它 因为 s
  • ReactTransitionGroup 不适用于 React-redux 连接组件

    我正在开发一个更大的项目 但我创建了这个简短的示例来说明问题 如果我使用Box组件 它的工作原理 它在控制台中输出componentWillEnter and componentWillLeave当我们点击按钮时 如果我使用BoxConta
  • 如何使用 Greasemonkey 监视静态 HTML 页面的更改?使用哈希?

    我希望我的 Greasemonkey 脚本仅在其访问的静态页面具有与以前完全相同的内容时运行 现在我可以设置一个包含该页面哈希的变量 我正在寻找一种动态散列页面的方法 以便我可以将我的散列与生成的散列进行比较 关于如何即时实现散列的任何想法
  • JavaScript推送函数中的动态变量

    我在 JavaScript 中使用推送功能 var chartData for var i 0 i lt 3 i chartData push date new Date year s mon s date s hr s min s sec
  • JavaScript RegEx:不同的结果:使用字符串和使用正则表达式“文字”构建模式?

    使用 RegExp 文字与字符串之间有什么区别吗 http jsfiddle net yMMrk http jsfiddle net yMMrk String prototype lastIndexOf function pattern p
  • 表单发布请求并存储收到的数据

    我有一个非常简单的表单 在提交时发出发布请求
  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象?

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style
  • Google Maps API (v3) 添加/更新标记

    编辑 它现在可以工作 但如果用户不允许或没有基于位置的服务 则不会加载 请参阅 jsfiddle 示例接受的答案评论 我已经浏览了一些教程和问题 但我无法安静地理解正在发生的事情 或者在这种情况下 没有发生 当用户单击链接时 我正在加载地图
  • 如何从浏览器向服务器发送“页面将关闭”消息?

    我想向每个 html 文档添加一个脚本 JavaScript 该脚本向服务器发送两条消息 页面确实打开了 页面将关闭 此消息包含页面打开的时间 打开消息应在文档加载时 或加载完成时 发送 这是简单的部分 The close message
  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用
  • 主页(网格)上的缩略图现在显得模糊。如何纠正?

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小
  • 有没有办法使用 ko.observableArray 作为地图?

    有没有办法使用ko observableArray http knockoutjs com documentation observableArrays html像地图 字典一样 例如 var arr ko observableArray
  • 仅当显式选择行时才关闭 ui-bootstrap typeahead

    我创建了这个jsBin http jsbin com livuqafe 2 edit来证明我遇到的问题 如果您转到此处 请尝试输入 五 并继续 你的自然反应是输入 五 然后按 Tab 如果你想要 五百 你可以向下箭头一次 但是 在这种情况下
  • 如何通过索引访问 JSON 对象中的字段

    我知道这不是最好的方法 但我别无选择 我必须通过索引访问 JSONObject 中的项目 访问对象的标准方法是只写this objectName or this objectName 我还找到了一种获取 json 对象内所有字段的方法 fo

随机推荐

  • 网桥、vlan、源目MAC地址的链路层处理

    一 链路层 在报文接收方向上 网卡驱动把接收到的数据按照其对应的链路层协议 如以太网 组装成报文 然后把它上交给链路层 接口是netif receive skb 至此网卡驱动的任务就结束了 报文交给链路层处理 在报文发送方向上 网卡驱动受链
  • 常用计算机维修方法有哪些,计算机常见硬件故障的诊断及其处理分析

    摘 要 计算机已经成为我们生活中不可缺少的一部分 但是使用过程中会遇到很多的硬件故障 导致计算机无法正常使用 这就要求我们对故障进行正确的诊断 判断问题的所在 进行处理 使计算机能够正常运转 关键词 计算机 硬件故障 诊断 处理 中图分类号
  • vue如何使用腾讯地图JavaScript API GL进行打点标记

    1 创建一个TMap js文件 export function TMap0 return new Promise function resolve reject window init function resolve window TMa
  • space quota exceeded for tablespace(表空间不足)

    space quota exceeded for tablespace 表空间不足 解决之道 方法一 测试成功 SQL gt alter user 用户 quota unlimited on 表空间名 User altered 方法二 SQ
  • 区块链七大应用场景

    一 应用场景 信息共享 这应该是区块链最简单的应用场景 就是信息互通有无 1 传统的信息共享的痛点 要么是统一由一个中心进行信息发布和分发 要么是彼此之间定时批量对账 典型的每天一次 对于有时效性要求的信息共享 难以达到实时共享 信息共享的
  • AndroidStudio apk安装失败总结

    失败 1 INSTALL FAILED DUPLICATE PERMISSION 1 1 具体信息 1 2 原因分析 1 3 解决方法 2 INSTALL FAILED USER RESTRICTED 2 1 具体信息 2 2 原因分析 3
  • USB3.2-Physical Layer---Link Initialization and Training

    这里写目录标题 Training sequences gen1 training sequence rule gen2 training sequence rule gen2 block Alignment Lane Polarity In
  • 使用for循环输出1-10之间的整数

    for i in range 1 11 print i
  • BS架构和CS架构的区别

    介绍 BS Browser Server 浏览器 服务器模式 web应用 可以实现跨平台 客户端零维护 但是个性化能力低 响应速度较慢 CS Client Server 客户端 服务器模式 桌面级应用 响应速度快 安全性强 个性化能力强 响
  • CSP 202305-1 重复局面

    题目背景 国际象棋在对局时 同一局面连续或间断出现3次或3次以上 可由任意一方提出和棋 问题描述 国际象棋每一个局面可以用大小为 8 8 的字符数组来表示 其中每一位对应棋盘上的一个格子 六种棋子王 后 车 象 马 兵分别用字母 k q r
  • 杭电ACM2005题(第几天?)------C语言

    第几天 Time Limit 2000 1000 MS Java Others Memory Limit 65536 32768 K Java Others Total Submission s 127309 Accepted Submis
  • 职能管理,最关键的是找到衡量价值的指标

    最近一位同事过来和我讨论职能管理的经验 说实话 我是不敢妄谈经验的 自己也没有取得如何的成就 盲目的建议 会出现相反的效果 不过我们的交流还是很有收获的 因为我们发现了很多共同的认知 并且这些认知在小范围内还是得到认可的 第一 定位职能的价
  • c语言0加到10的结果,如何编写一个C语言程序,让计算机自动出四则运算计算题,要求自动出0-10之间的四则运算题,并批改结果?...

    优质解答 少年 写好了 给你参考一下 还可以更复杂 include include include define N 10 int Test int num 0 int answer 0 int result 0 int m 0 int n
  • 【状态估计】卡尔曼滤波器、扩展卡尔曼滤波器、双卡尔曼滤波器和平方根卡尔曼滤波器研究(Matlab代码实现)

    欢迎来到本博客 博主优势 博客内容尽量做到思维缜密 逻辑清晰 为了方便读者 座右铭 行百里者 半于九十 本文目录如下 目录 1 概述 2 运行结果 3 参考文献 4 Matlab代码实现 1 概述 本文包括 1 标准卡尔曼滤波器 2 扩展卡
  • 操作系统基础

    进程间的通信的几种方式 匿名管道 pipe 管道是一种半双工的通信方式 数据只能单向流动 而且只能在具有亲缘关系的进程间使用 进程的亲缘关系通常是指父子进程关系 有名管道通信 半双工的通信方式 但是它允许无亲缘关系进程间的通信 消息队列通信
  • Window根据端口号杀进程

    Window根据端口号杀进程 一 打开cmd命令窗口 输入命令 根据端口号查找对应的进程号 netstat ano 列出所有进程 例 杀死占用端口1099的进程 1 netstat ano findstr 1099 2 列出端口号为1099
  • 联合体的特点及其大小的计算

    上篇博客 笔者详细的介绍了联合的的使用方法 所以 笔者在这篇文章打算进行 联合体的特点及其大小的计算的讲述 联合体的特点 联合体的成员是共用一块内存空间的 这样一个联合体变量的大小 至少是最大的成员的大小 因为联合体至少得有能力保存最大的那
  • QT框架总结

    一 QT介绍 1 什么是QT 跨平台C 图形用户界面应用程序开发框架 1 跨平台 支持各种的操作系统 windows Linux MAC 2 编程语言 C 面向对象编程 类 3 应用程序开发框架 图形用户界面 GUI应用程序 非GUI的应用
  • oracle nvl sign,oracle decode函数和 sign函数

    流程控制函数 DECODE decode 函数简介 主要作用 将查询结果翻译成其他值 即以其他形式表现出来 以下举例说明 使用方法 Select decode columnname 值1 翻译值1 值2 翻译值2 值n 翻译值n 缺省值 F
  • 分享一个基于vue的环形菜单组件

    vue quick menu是一个应用于移动端的快速导航组件 它拥有炫酷的展开和收起时的动画效果 它支持自定义菜单的显示位置 菜单的数量 颜色等属性 demo 安装 通过NPM安装 npm install vue quick menu sa