起步

vue-layer 是一款基于 layer.jsopen in new window 的 vue 组件，100%支持 layer.js 的 API

为什么写这个组件

如果你对 layer.js 的 UI 风格足够熟悉，你会发现国内使用 layer.js 的网站非常之多，然而基于 jQuery 的它并不能很好的适配 MVVM 的开发模式，开发这个组件的目的就是为了让大家在 Vue 中也能方便的使用这个多功能弹出层 ~

支持

Vue3 支持
Vue2 支持，正在适配中...

Vue3 安装

ESModule 环境安装

# npm
npm install vue3-layer --save
# yarn
yarn add vue3-layer

1
2
3
4

ESModule 环境使用

步骤 1 main.js 全局注册组件

import { createApp } from 'vue';
import App from './App.vue';

import { s3Layer } from 'vue3-layer';
import 'vue3-layer/dist/s3Layer.css';

const app = createApp(App);
app.component('s3-layer', s3Layer);
app.mount('#app');

1
2
3
4
5
6
7
8
9

步骤 2 App.vue 直接使用

<template>
  <s3-layer v-model="visible" title="标题">
    <span>内容内容</span>
  </s3-layer>
  <button @click="visible = true">显示</button>
</template>

<script setup>
import { ref } from 'vue';
const visible = ref(false);
</script>

1
2
3
4
5
6
7
8
9
10
11

浏览器环境安装

使用 CDN 引入

<head>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/vue3-layer/dist/s3layer.css" />
  <!-- 引入 Vue -->
  <script src="https://unpkg.com/vue@next"></script>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/vue3-layer/dist/s3Layer.umd.min.js"></script>
</head>

1
2
3
4
5
6
7
8

浏览器环境使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <link rel="stylesheet" href="https://unpkg.com/vue3-layer/dist/s3Layer.css" />
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/vue3-layer/dist/s3Layer.umd.min.js"></script>
  </head>
  <body>
    <div id="app">
      <s3-layer v-model="visible" title="标题"> 内容内容 </s3-layer>
      <button @click="visible = true">显示</button>
    </div>
    <script>
      const { ref } = Vue;
      const App = {
        setup() {
          const visible = ref(false);
          return { visible };
        },
      };
      const app = Vue.createApp(App);
      app.component('s3-layer', s3Layer.s3Layer);
      app.mount('#app');
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 起步

# 为什么写这个组件

# 支持

# Vue3 安装

# ESModule 环境安装

# ESModule 环境使用

# 浏览器环境安装

# 浏览器环境使用