Vue应用程序的UI文件/工具栏菜单

Vue文件工具栏菜单 (vue-file-toolbar-menu)

UI file/toolbar menus for Vue apps.

Vue应用程序的UI文件/工具栏菜单。

View Demo 查看演示 View Github 查看Github

特征 (Features)

• Reactive content is stored in Vue.js computed/data fields, not in template

  React性内容存储在Vue.js计算/数据字段中，而不是模板中

• Easy styling

  造型简单

• Add your own custom components for menus and buttons

  为菜单和按钮添加自己的自定义组件

• Uses standard Material Icons

  使用标准的材质图标

• Hotkey support

  热键支持

• Touch-device compatible

  兼容触摸设备

• Easy multi-language implementation (vue-i18n)

  简单的多语言实施( vue-i18n )

安装 (Installation)

In your Vue.js project:

在您的Vue.js项目中：

npm install vue-file-toolbar-menu

：speech_balloon：如果您喜欢静态文件，请从dist文件夹导入资产 (:speech_balloon: If you prefer static files, import assets from the dist folder)

基本例子 (Basic example)

MyComponent.vue (MyComponent.vue)

<template>
  <div> <vue-file-toolbar-menu :content="my_menu" /> </div>
</template>

<script>
import VueFileToolbarMenu from 'vue-file-toolbar-menu'

export default {
  components: { VueFileToolbarMenu },

  data () { return { happy: false } },

  computed: {
    my_menu () {
      return [
        { text: "My Menu", menu: [
          { text: "Item 1", click: () => alert("Action 1") },
          { text: "Item 2", click: () => alert("Action 2") }
        ] }, {
          text: "My Button",
          active: this.happy,
          icon: this.happy ? "sentiment_very_satisfied" : "sentiment_satisfied",
          click: () => { this.happy = !this.happy }
        }
      ]
    }
  }
}
</script>

Should render this:

应该渲染这个：

完整的例子 (Complete example)

See the Demo.vue file corresponding to the live demo. Also read the API.

请参阅与现场演示相对应的Demo.vue文件。 另请阅读API 。

造型 (Styling)

Styling can be done either by writing CSS variables or by overloading CSS properties using !important. View the default stylesheet for reference.

可以通过编写CSS变量或使用!important重载CSS属性来完成样式设置。 查看默认样式表以供参考。

：speech_balloon：如果您需要缺少一些变量，请编辑样式表，然后提交PR。 (:speech_balloon: If you need some variables that are missing, edit the stylesheet then submit a PR.)

像文档一样： (Docs-like:)

View CSS variables

查看CSS变量

:root {
  --bar-font-color: rgb(32, 33, 36);
  --bar-font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
  --bar-font-size: 15px;
  --bar-font-weight: 500;
  --bar-letter-spacing: 0.2px;
  --bar-padding: 3px;
  --bar-button-icon-size: 20px;
  --bar-button-padding: 4px 6px;
  --bar-button-radius: 4px;
  --bar-button-hover-bkg: rgb(241, 243, 244);
  --bar-button-active-color: rgb(26, 115, 232);
  --bar-button-active-bkg: rgb(232, 240, 254);
  --bar-button-open-color: rgb(32, 33, 36);
  --bar-button-open-bkg: rgb(232, 240, 254);
  --bar-menu-bkg: white;
  --bar-menu-border-radius: 0 0 3px 3px;
  --bar-menu-item-chevron-margin: 0;
  --bar-menu-item-hover-bkg: rgb(241, 243, 244);
  --bar-menu-item-padding: 5px 8px 5px 35px;
  --bar-menu-item-icon-size: 15px;
  --bar-menu-item-icon-margin: 0 9px 0 -25px;
  --bar-menu-padding: 6px 1px;
  --bar-menu-shadow: 0 2px 6px 2px rgba(60, 64, 67, 0.15);
  --bar-menu-separator-height: 1px;
  --bar-menu-separator-margin: 5px 0 5px 34px;
  --bar-menu-separator-color: rgb(227, 229, 233);
  --bar-separator-color: rgb(218, 220, 224);
  --bar-separator-width: 1px;
  --bar-sub-menu-border-radius: 3px;
}

类似macOS： (macOS-like:)

：显微镜：(CSS背景滤镜仍处于实验阶段！) (:microscope: (CSS backdrop filter is still experimental!))

View CSS variables

查看CSS变量

:root {
  --bar-font-color: rgba(0, 0, 0, 0.75);
  --bar-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --bar-font-size: 15.5px;
  --bar-button-icon-size: 20px;
  --bar-button-padding: 4px 7px 5px 7px;
  --bar-button-radius: 0;
  --bar-button-hover-bkg: none;
  --bar-button-active-color: white;
  --bar-button-active-bkg: rgba(41, 122, 255, 0.9);
  --bar-button-open-color: white;
  --bar-button-open-bkg: rgba(41, 122, 255, 0.9);
  --bar-menu-bkg: rgba(255, 255, 255, 0.95);
  --bar-menu-backdrop-filter: saturate(180%) blur(20px);
  --bar-menu-backdrop-filter-bkg: rgba(255, 255, 255, 0.3);
  --bar-menu-border: solid 1px #BBB;
  --bar-menu-border-radius: 0 0 6px 6px;
  --bar-menu-item-chevron-margin: 0;
  --bar-menu-item-hover-color: white;
  --bar-menu-item-hover-bkg: rgba(41, 122, 255, 0.9);
  --bar-menu-item-padding: 1px 12px 2px 25px;
  --bar-menu-item-icon-size: 16px;
  --bar-menu-item-icon-margin: 0 4px 0 -20px;
  --bar-menu-padding: 3px 0;
  --bar-menu-shadow: 0 6px 13px 0 rgba(60, 60, 60, 0.4);
  --bar-menu-separator-height: 2px;
  --bar-menu-separator-margin: 5px 0;
  --bar-menu-separator-color: rgba(0, 0, 0, 0.08);
  --bar-sub-menu-border-radius: 6px;
}

项目发展 (Project development)

• npm run serve compiles and hot-reloads demo for development

  npm run serve编译和热重装演示以进行开发

• npm run lint lints and fixes files

  npm run lint皮npm run lint并修复文件

• npm run build compiles and minifies production files and demo

  npm run build编译并最小化生产文件和演示

翻译自: https://vuejsexamples.com/ui-file-toolbar-menus-for-vue-apps/