Vue 3的响应式导航UI组件 - vue-nav-ui

Vue 3的响应式导航UI组件 - vue-nav-ui
插件名称 vue-nav-ui
发布时间 2021年4月2日
插件作者 dhanielcodes

Vue.js 3的动态,响应式,移动优先的应用导航UI组件。

安装和下载:

# NPM
$ npm i vue-nav-ui

如何使用它:

1.导入并注册导航组件。

import Nav from "vue-nav-ui";
export default {
  components: {
    Nav
  }
}

2.将导航组件添加到应用程序中,并插入您的站点徽标,如下所示:

<Nav :navLinks="navLinks" :navConfig="navConfig" :btnConfig="btnConfig">
  <img class="img" src="logo" alt="" srcset="" />
</Nav>

3.定义您的导航项。

export default {
  components: {
    Nav,
  },
  setup() {
    const navLinks = ref([
      {
        name: "Home",
        path: "/",
      },
      {
        name: "Category",
        path: "/category",
      },
      {
        name: "Works",
        path: "/works",
      },
      {
        name: "About",
        path: "/about",
      },
      {
        name: "Contact",
        path: "/contact",
      },
    ]);
    const navConfig = ref({
      // nav configs here
    });
    const btnConfig = ref({
      // button configs here
    });
    return { navLinks, btnConfig, navConfig };
  },
};

4.可能的配置以自定义导航和导航按钮。

const navConfig = ref({
      whitespace: true, 
      navBg: "#FAFAFA", 
      navBorderRadius: "30px",
      linkFont: "Arial", 
      linkColor: "black",
      responsivePosition: "top", // or "bottom"
});
const btnConfig = ref({
      btnLink: true, 
      btnUrl: "https://www.vue365.cn/", 
      btnText: "View",
      btnBg: "#40269E", 
      btnTextColor: "white",
      btnBorderWidth: "0", 
      btnBorderColor: "black",
      btnBorderRadius: "20px",
});