基于vue3的系统引导步骤组件。

.browserslistrc

@@ -0,0 +1,3 @@
+current node
+last 2 versions and > 2%
+ie > 10

.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules/
+/dist/
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

README.md

@@ -0,0 +1,112 @@
+## vue3-intro-step
+
+> 基于vue3的系统引导步骤组件。
+> 更加便捷的操作引导步骤。
+> vue2版本的引导步骤组件请移步 [vue-intro-step](https://www.npmjs.com/package/vue-intro-step)
+
+### 安装
+
+```shell
+npm i vue3-intro-step --save
+```
+
+> [可选] 为了更好的使用 *vue3-intro-step* 使引导组件显示、隐藏不突兀
+> 可以安装 animate.css 实现动画效果
+> ```shell
+> npm i animate.css --save
+> 
+> # 在main.js中引入
+> import 'animate.css'
+> ```
+
+### 全局引用
+
+`main.js`
+
+```js
+import Vue from 'vue'
+import Vue3IntroStep from 'vue3-intro-step'
+
+Vue.component('vue3-intro-step', Vue3IntroStep);
+
+```
+
+### 局部引用
+
+```vue
+
+<template>
+  <vue3-intro-step
+      v-model:show="show"
+      :config="config"
+      @close:show="closeIntro"
+  />
+</template>
+
+<script>
+import Vue3IntroStep from 'vue3-intro-step'
+
+export default {
+  name: 'App',
+  components: {
+    Vue3IntroStep
+  },
+  data () {
+    return {
+      show: false,
+      config: {
+        tips: [
+          {
+            el: '#intro_title',
+            tipPosition: 'bottom',
+            title: '欢迎使用问答管理系统',
+            content: '点击左侧菜单进行操作',
+          },
+          {
+            el: '#intro_mine',
+            tipPosition: 'left',
+            // title: '点击进入个人中心',
+            content: '查看个人信息，修改密码查看个人信息，修改密码查看个人信息，修改密码查看个人信息，修改密码查看个人信息，修改密码查看个人信息，修改密码查看个人信息，修改密码查看个人信息，修改密码'
+          },
+          {
+            el: '#intro_user',
+            tipPosition: 'right',
+            title: '点击进入用户管理',
+            content: '查看用户信息，添加用户',
+            onNext: () => {
+              return Promise.resolve(true)
+            }
+          },
+          {
+            el: '#intro_save',
+            tipPosition: 'top',
+            title: '点击进入用户管理',
+            content: '查看用户信息，添加用户'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    closeIntro() {
+      // 不需要this.show = false，因为v-model会自动更新
+      console.log('关闭');
+    },
+  }
+}
+</script>
+```
+
+## 组件参数
+
+> `v-model:show` 参数：控制引导步骤组件是否显示
+> 
+> `config` 参数：配置引导步骤组件的参数
+>   - `tips` 参数：用于盛放哪些元素需要引导
+>       - `el` 参数：元素的选择器，切记目前只支持id选择器
+>       - `tipPosition` 参数：引导元素提示信息的位置，可选值有：`top`, `bottom`, `left`, `right`
+>      - `title?` 参数：引导元素提示信息的标题
+>      - `content` 参数：引导元素提示信息的内容
+>     - `onNext?` 参数：引导元素提示信息点击 *下一步* 按钮时的回调函数，返回一个promise，如果返回的promise成功，则继续下一步，否则不继续下一步
+> 
+> `@close:show` 事件参数：关闭引导步骤组件时会触发的事件

babel.config.js

@@ -0,0 +1,17 @@
+const devPresets = ['@vue/babel-preset-app'];
+const buildPresets = [
+  [
+    '@babel/preset-env',
+    // Config for @babel/preset-env
+    {
+      // Example: Always transpile optional chaining/nullish coalescing
+      // include: [
+      //   /(optional-chaining|nullish-coalescing)/
+      // ],
+    },
+  ],
+  '@babel/preset-typescript',
+];
+module.exports = {
+  presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets),
+};

build/rollup.config.js

@@ -0,0 +1,180 @@
+// rollup.config.js
+import fs from 'fs';
+import path from 'path';
+import vue from 'rollup-plugin-vue';
+import alias from '@rollup/plugin-alias';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
+import babel from '@rollup/plugin-babel';
+import PostCSS from 'rollup-plugin-postcss';
+import { terser } from 'rollup-plugin-terser';
+import ttypescript from 'ttypescript';
+import typescript from 'rollup-plugin-typescript2';
+import minimist from 'minimist';
+
+// Get browserslist config and remove ie from es build targets
+const esbrowserslist = fs.readFileSync('./.browserslistrc')
+  .toString()
+  .split('\n')
+  .filter((entry) => entry && entry.substring(0, 2) !== 'ie');
+
+// Extract babel preset-env config, to combine with esbrowserslist
+const babelPresetEnvConfig = require('../babel.config')
+  .presets.filter((entry) => entry[0] === '@babel/preset-env')[0][1];
+
+const argv = minimist(process.argv.slice(2));
+
+const projectRoot = path.resolve(__dirname, '..');
+
+const baseConfig = {
+  input: 'src/entry.ts',
+  plugins: {
+    preVue: [
+      alias({
+        entries: [
+          {
+            find: '@',
+            replacement: `${path.resolve(projectRoot, 'src')}`,
+          },
+        ],
+      }),
+    ],
+    replace: {
+      'process.env.NODE_ENV': JSON.stringify('production'),
+    },
+    vue: {
+    },
+    postVue: [
+      resolve({
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+      }),
+      // Process only `<style module>` blocks.
+      PostCSS({
+        modules: {
+          generateScopedName: '[local]___[hash:base64:5]',
+        },
+        include: /&module=.*\.css$/,
+      }),
+      // Process all `<style>` blocks except `<style module>`.
+      PostCSS({ include: /(?<!&module=.*)\.css$/ }),
+      commonjs(),
+    ],
+    babel: {
+      exclude: 'node_modules/**',
+      extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+      babelHelpers: 'bundled',
+    },
+  },
+};
+
+// ESM/UMD/IIFE shared settings: externals
+// Refer to https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
+const external = [
+  // list external dependencies, exactly the way it is written in the import statement.
+  // eg. 'jquery'
+  'vue',
+];
+
+// UMD/IIFE shared settings: output.globals
+// Refer to https://rollupjs.org/guide/en#output-globals for details
+const globals = {
+  // Provide global variable names to replace your external imports
+  // eg. jquery: '$'
+  vue: 'Vue',
+};
+
+// Customize configs for individual targets
+const buildFormats = [];
+if (!argv.format || argv.format === 'es') {
+  const esConfig = {
+    ...baseConfig,
+    input: 'src/entry.esm.ts',
+    external,
+    output: {
+      file: 'dist/vue3-intro-step.esm.js',
+      format: 'esm',
+      exports: 'named',
+    },
+    plugins: [
+      replace(baseConfig.plugins.replace),
+      ...baseConfig.plugins.preVue,
+      vue(baseConfig.plugins.vue),
+      ...baseConfig.plugins.postVue,
+      // Only use typescript for declarations - babel will
+      // do actual js transformations
+      typescript({
+        typescript: ttypescript,
+        useTsconfigDeclarationDir: true,
+        emitDeclarationOnly: true,
+      }),
+      babel({
+        ...baseConfig.plugins.babel,
+        presets: [
+          [
+            '@babel/preset-env',
+            {
+              ...babelPresetEnvConfig,
+              targets: esbrowserslist,
+            },
+          ],
+        ],
+      }),
+    ],
+  };
+  buildFormats.push(esConfig);
+}
+
+if (!argv.format || argv.format === 'cjs') {
+  const umdConfig = {
+    ...baseConfig,
+    external,
+    output: {
+      compact: true,
+      file: 'dist/vue3-intro-step.ssr.js',
+      format: 'cjs',
+      name: 'Vue3IntroStep',
+      exports: 'auto',
+      globals,
+    },
+    plugins: [
+      replace(baseConfig.plugins.replace),
+      ...baseConfig.plugins.preVue,
+      vue(baseConfig.plugins.vue),
+      ...baseConfig.plugins.postVue,
+      babel(baseConfig.plugins.babel),
+    ],
+  };
+  buildFormats.push(umdConfig);
+}
+
+if (!argv.format || argv.format === 'iife') {
+  const unpkgConfig = {
+    ...baseConfig,
+    external,
+    output: {
+      compact: true,
+      file: 'dist/vue3-intro-step.min.js',
+      format: 'iife',
+      name: 'Vue3IntroStep',
+      exports: 'auto',
+      globals,
+    },
+    plugins: [
+      replace(baseConfig.plugins.replace),
+      ...baseConfig.plugins.preVue,
+      vue(baseConfig.plugins.vue),
+      ...baseConfig.plugins.postVue,
+      babel(baseConfig.plugins.babel),
+      terser({
+        output: {
+          ecma: 5,
+        },
+      }),
+    ],
+  };
+  buildFormats.push(unpkgConfig);
+}
+
+// Export config
+export default buildFormats;

dev/serve.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import Dev from './serve.vue';
+
+const app = createApp(Dev);
+app.mount('#app');

dev/serve.vue

@@ -0,0 +1,42 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Vue3IntroStep from '@/vue3-intro-step.vue';
+
+export default defineComponent({
+  name: 'ServeDev',
+  components: {
+    Vue3IntroStep
+  },
+  data(){
+    return{
+      lastName: '',
+      show: false,
+      config: {
+        tips: [
+          {
+            el: '#xxx',
+            tipPosition: 'bottom',
+            title: '欢迎使用问答管理系统',
+            content: '点击左侧菜单进行操作',
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    close(){
+      this.show = false;
+    }
+  }
+});
+</script>
+
+<template>
+  <div id="app">
+    <img id="xxx" alt="Vue logo" src="http://pic.iask.cn/fimg/183674993053.jpg">
+    <button @click="show = true">改变</button>
+    {{lastName}}
+    {{show}}
+    <vue3-intro-step v-model:show="show" :config="config" />
+  </div>
+</template>