在 Vue 3 上使用 MDUI 1.0.2

[gxres042]

个人比较喜欢 Material Design 1 / 2，目前能找到的、好用的库就是 MDUI 1.0.2 了

但是 MDUI 1 的文档提供的 example 比较古老，所以很好奇现阶段在 Vue 3 上要怎么使用 MDUI 1.0.2。以及它的手册是用 Vue 写的吗？想看看相关源码（趴

[gxres042]

* 由于配置对接问题，这个想法暂时作废

[zdhxiong]

可以在项目的入口文件中导入 mdui 文件：

import 'mdui/dist/css/mdui.min.css';
import 'mdui';

在需要用到 mdui 对象的地方可以导入：

import mdui from 'mdui';

部分组件需要进行初始化，可以在项目的入口文件中监听路由变更后，执行：

mdui.mutation();

具体组件的使用按文档说明就行，没有其他需要注意的地方了。

[gxres042]

可以在项目的入口文件中导入 mdui 文件：

import 'mdui/dist/css/mdui.min.css';
import 'mdui';

在需要用到 mdui 对象的地方可以导入：

import mdui from 'mdui';

部分组件需要进行初始化，可以在项目的入口文件中监听路由变更后，执行：

mdui.mutation();

具体组件的使用按文档说明就行，没有其他需要注意的地方了。

嗯，我先试一下

[gxres042]

<template>
  <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-hide">
    <div class="mdui-toolbar mdui-color-theme">
      <button mdui-drawer="{target:'#left-drawer',overlay:true,swipe:true}" class="mdui-btn mdui-btn-icon">
        <i class="mdui-icon material-icons">menu</i>
      </button>
      <a href="javascript:;" class="mdui-typo-headline">MDUI</a>
      <a href="javascript:;" class="mdui-typo-title">Title</a>
      <div class="mdui-toolbar-spacer"></div>
      <a href="javascript:;" class="mdui-btn mdui-btn-icon">
        <i class="mdui-icon material-icons">search</i>
      </a>
      <a href="javascript:;" class="mdui-btn mdui-btn-icon">
        <i class="mdui-icon material-icons">refresh</i>
      </a>
      <a href="javascript:;" class="mdui-btn mdui-btn-icon">
        <i class="mdui-icon material-icons">more_vert</i>
      </a>
    </div>
  </div>
  <div class="mdui-drawer mdui-color-white mdui-drawer-full-height mdui-drawer-close" id="left-drawer">
    ... drawer content ...
  </div>
</template>

<script lang="ts" setup>

</script>

<style></style>

像这种 App Bar + Drawer 的组件，在 Vue 3 + Nuxt 3 上有什么比较好的触发解决方案吗（？

[zdhxiong]

<template>
  <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-hide">
    <div class="mdui-toolbar mdui-color-theme">
      <button mdui-drawer="{target:'#left-drawer',overlay:true,swipe:true}" class="mdui-btn mdui-btn-icon">
        <i class="mdui-icon material-icons">menu</i>
      </button>
      <a href="javascript:;" class="mdui-typo-headline">MDUI</a>
      <a href="javascript:;" class="mdui-typo-title">Title</a>
      <div class="mdui-toolbar-spacer"></div>
      <a href="javascript:;" class="mdui-btn mdui-btn-icon">
        <i class="mdui-icon material-icons">search</i>
      </a>
      <a href="javascript:;" class="mdui-btn mdui-btn-icon">
        <i class="mdui-icon material-icons">refresh</i>
      </a>
      <a href="javascript:;" class="mdui-btn mdui-btn-icon">
        <i class="mdui-icon material-icons">more_vert</i>
      </a>
    </div>
  </div>
  <div class="mdui-drawer mdui-color-white mdui-drawer-full-height mdui-drawer-close" id="left-drawer">
    ... drawer content ...
  </div>
</template>

<script lang="ts" setup>

</script>

<style></style>

像这种 App Bar + Drawer 的组件，在 Vue 3 + Nuxt 3 上有什么比较好的触发解决方案吗（？

在入口文件中监听路由变更，执行 mdui.mutation(); 就行，在 Nuxt 中或许需要进行判断仅在客户端运行。