feat: add Vue 2.7 example

Author: worldzhao

examples/vue2.7/.gitignore

@@ -0,0 +1,13 @@
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea

examples/vue2.7/.prettierignore

@@ -0,0 +1,4 @@
+# Lock files
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

examples/vue2.7/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

examples/vue2.7/README.md

@@ -0,0 +1,29 @@
+# Rsbuild project
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get started
+
+Start the dev server:
+
+```bash
+pnpm dev
+```
+
+Build the app for production:
+
+```bash
+pnpm build
+```
+
+Preview the production build locally:
+
+```bash
+pnpm preview
+```

examples/vue2.7/eslint.config.mjs

@@ -0,0 +1,8 @@
+import js from '@eslint/js';
+import globals from 'globals';
+
+export default [
+  { languageOptions: { globals: globals.browser } },
+  js.configs.recommended,
+  { ignores: ['dist/'] },
+];

examples/vue2.7/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "vue2.7",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "rsbuild build",
+    "dev": "rsbuild dev --open",
+    "format": "prettier --write .",
+    "lint": "eslint .",
+    "preview": "rsbuild preview"
+  },
+  "dependencies": {
+    "element-ui": "^2.15.14",
+    "vue": "^2.7.16",
+    "vue-nice-modal": "2.1.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@rsbuild/core": "^1.2.16",
+    "@rsbuild/plugin-vue2": "^1.0.2",
+    "eslint": "^9.21.0",
+    "globals": "^16.0.0",
+    "prettier": "^3.5.2"
+  }
+}

examples/vue2.7/rsbuild.config.mjs

@@ -0,0 +1,6 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginVue2 } from '@rsbuild/plugin-vue2';
+
+export default defineConfig({
+  plugins: [pluginVue2()],
+});

examples/vue2.7/src/App.vue

@@ -0,0 +1,10 @@
+<template>
+  <NiceModalProvider>
+    <Example />
+  </NiceModalProvider>
+</template>
+
+<script setup>
+import { Provider as NiceModalProvider } from 'vue-nice-modal';
+import Example from './Example.vue';
+</script>

examples/vue2.7/src/Example.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <el-card header="推荐-基础用法 直接使用组件">
+      <el-button @click="handleBasicClick">打开模态框</el-button>
+    </el-card>
+
+    <el-button @click="handleDeclarationClick">打开模态框</el-button>
+
+    <!-- 声明式用法需要的模态框声明 -->
+    <MyDialog id="declaration-modal" />
+
+    <el-card header="Hook 用法">
+      <el-button @click="handleHookClick">打开模态框</el-button>
+    </el-card>
+
+    <el-card header="注册 用法">
+      <el-button @click="handleRegisterClick">打开模态框</el-button>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+// 基础用法
+import NiceModal from 'vue-nice-modal';
+import { MyDialog } from './components/MyDialog';
+const handleBasicClick = async () => {
+  try {
+    const res = await NiceModal.show(MyDialog, {
+      title: '基础用法',
+      content: '直接使用组件方式调用模态框',
+    });
+    console.log('基础用法结果:', res);
+  } catch (error) {
+    console.log('基础用法取消:', error);
+  }
+};
+
+// 声明式用法
+const handleDeclarationClick = async () => {
+  try {
+    const res = await NiceModal.show('declaration-modal', {
+      title: '声明式用法',
+      content: '通过 ID 引用已在模板中声明的模态框',
+    });
+    console.log('声明式用法结果:', res);
+  } catch (error) {
+    console.log('声明式用法取消:', error);
+  }
+};
+
+// Hook 用法
+const hookModal = NiceModal.useModal(MyDialog);
+
+const handleHookClick = async () => {
+  try {
+    const res = await hookModal.show({
+      title: 'Hook 用法',
+      content: '使用 useModal 组合式 API 调用模态框',
+    });
+    console.log('Hook 用法结果:', res);
+  } catch (error) {
+    console.log('Hook 用法取消:', error);
+  }
+};
+
+// 注册用法
+NiceModal.register('register-modal', MyDialog);
+const handleRegisterClick = async () => {
+  try {
+    const res = await NiceModal.show('register-modal', {
+      title: '注册用法',
+      content: '通过预先注册后使用 ID 调用模态框',
+    });
+    console.log('注册用法结果:', res);
+  } catch (error) {
+    console.log('注册用法取消:', error);
+  }
+};
+</script>

examples/vue2.7/src/components/MyDialog/MyDialog.vue

@@ -0,0 +1,31 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible="modal.visible.value"
+    width="30%"
+    @close="handleCancel"
+    @closed="modal.remove"
+  >
+    <span>这是一段信息 {{ content }}</span>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleCancel">取 消</el-button>
+      <el-button type="primary" @click="handleConfirm">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+<script setup>
+import { useModal } from 'vue-nice-modal';
+
+const modal = useModal();
+defineProps(['title', 'content']);
+
+const handleCancel = () => {
+  modal.reject('cancel');
+  modal.hide();
+};
+
+const handleConfirm = () => {
+  modal.resolve('confirm');
+  modal.hide();
+};
+</script>

examples/vue2.7/src/components/MyDialog/index.js

@@ -0,0 +1,4 @@
+import { create } from 'vue-nice-modal';
+import _MyDialog from './MyDialog.vue';
+
+export const MyDialog = create(_MyDialog);

examples/vue2.7/src/index.js

@@ -0,0 +1,12 @@
+import Vue from 'vue';
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import App from './App.vue';
+
+Vue.use(ElementUI, { size: 'small', zIndex: 3000 });
+Vue.config.productionTip = false;
+
+new Vue({
+  el: '#root',
+  render: (h) => h(App),
+});

package.json

@@ -15,9 +15,13 @@
   "devDependencies": {
     "husky": "^8.0.3",
     "lint-staged": "^13.2.2",
-    "pnpm": "9.15.4",
+    "pnpm": "9.15.5",
     "prettier": "^2.8.8",
     "prettier-plugin-packagejson": "^2.4.3"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "volta": {
+    "node": "20.19.0",
+    "pnpm": "9.15.5"
+  }
 }

packages/vue-nice-modal/package.json

@@ -44,6 +44,7 @@
     "build": "rm -rf dist && npm run build:esm && npm run build:cjs && cp ./src/index.d.ts ./dist/index.d.ts",
     "build:cjs": "BUILD_FORMAT=cjs vite build",
     "build:esm": "BUILD_FORMAT=esm vite build",
+    "prepare": "npm run build",
     "start": "npm run build:esm -- --watch",
     "test": "echo \"Error: no test specified\" && exit 1"
   },