帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

Vue.js可拖动的浮动菜单组件(vue-float-menu)

帝国模板之家 2020-12-30 网页特效 评论

介绍

一个Vue.js组件,用于在Vue.js应用程序上创建可拖动,可自定义,多层,键盘可访问的浮动菜单。

使用方法

1.导入组件及其样式表。

import { FloatMenu } from "vue-float-menu";
import "vue-float-menu/dist/vue-float-menu.css";

2.注册组件。

export default {
  components: {
    FloatMenu,
  }
  // ...
};

3.将浮动菜单添加到模板。

<float-menu
  :menu-data="items"
  :on-selected="handleSelection"
>
  Drag
</float-menu>

4. 设置浮动菜单并定义嵌套菜单数据,如下所示:

export default {
  components: {
    FloatMenu,
  },
  setup() {
    const handleSelection = (selectedItem: string) => {
      console.log(selectedItem);
    };
    return {
      handleSelection,
    };
  },
  data() {
    return {
      items: [
        { name: "Home" },
        {
          name: "Category",
          subMenu: {
            name: "JavaScript",
            items: [
              { name: "React" }, 
              { name: "Vue" }
            ],
          },
        },
        {
          name: "Contact"
        },
        {
          name: "About",
        }
      ],
    };
  },
};

5.浮动菜单配置项。

/**
* dimension of the menu head. sets both the width and height
*
* @type {number}
*/
dimension: {
  type: Number,
  default: 45,
},
/**
* sets the initial position of the menu.
*
* @type {string}
*/
position: {
  type: String,
  default: "bottom right",
},
/**
* disables dragging and sets the position to fixed.
*
* @type {boolean}
*/
fixed: {
  type: Boolean,
  default: false,
},
/**
* sets the height and width of the menu.
*
* @type {Object}
*/
menuDimension: {
  type: Object as PropType<{ height: number; width: number }>,
  default: {
    height: 250,
    width: 250,
  },
},
/**
* data to generate the menu. array of type MenuItem
*
* @type {array}
*/
menuData: {
  type: Array as PropType<MenuItem[]>,
  default: [],
},
useCustomContent: {
  type: Boolean,
  default: false,
},
/**
* hook that gets called on selection of the menu item.
*
* @type {function}
*/
onSelected: {
  type: Function as PropType<(val: string) => void>,
  default: null,
},
/**
* flips the content of the menu on the right edges of the screen
*
* @type {boolean}
*/
flipOnEdges: {
  type: Boolean,
  default: false,
},
/**
* theme object.
*
* @type {boolean}
*/
theme: {
  type: Object as PropType<{
    /**
     * targets the bg color of the menu head and selection highlight for sub menus.
     *
     * @type {string}
     */
    primary: string;
    /**
     * targets the text color
     *
     * @type {string}
     */
    textColor: string;
    /**
     * targets the background color of the menu
     *
     * @type {string}
     */
    menuBgColor: string;
    /**
     * targets the text color of the menu item when the item has a sub menu
     *
     * @type {string}
     */
    textSelectedColor: string;
  }>,
  required: false,
  default: {
    primary: "#0080ff",
    textColor: "#000",
    menuBgColor: "#fff",
    textSelectedColor: "#fff",
  },
},
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言