LayerVue

Appearance

当前页

安装 ​

注意，最新版仅支持 Vue3。如果你在使用 Vue2，请安装小于 2.0 的版本 Vue2 版本文档。

在 CodeSandbox 上查看 Vue2 版本的 LayerVue

使用包管理器安装 LayerVue ​

sh
$ npm i layer-vue@next
sh
$ pnpm i layer-vue@next
sh
$ yarn add layer-vue@next

使用 CDN 引入 LayerVue ​

你可以通过 CDN 的方式引入 LayerVue，不过请注意，你需要额外引入 Vue3。

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/layer-vue/dist/layer-vue.css" />

    <!-- 引入 Vue3 -->
    <script src="https://unpkg.com/vue@next"></script>

    <!-- 引入组件库 -->
    <script src="https://unpkg.com/layer-vue/dist/layer-vue.umd.js"></script>
  </head>
  <body>
    <div id="app">
      <button @click="visible = true">打开弹出层</button>
      <layer-vue v-model:visible="visible"></layer-vue>
    </div>
    <script>
      const App = {
        setup() {
          return {
            visible: false,
          };
        },
      };
      const app = Vue.createApp(App);
      app.use(LayerVue);
      app.mount('#app');
    </script>
  </body>
</html>