chore(build): 新增发布demo脚本

package.json

@@ -5,9 +5,11 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "build:demo": "npm run build && node ./scripts/demo",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "clipboard": "^2.0.4",
     "core-js": "^2.6.5",
     "node-sass": "^4.12.0",
     "sass-loader": "^7.1.0",
@@ -17,6 +19,9 @@
     "@vue/cli-plugin-babel": "^3.8.0",
     "@vue/cli-plugin-eslint": "^3.8.0",
     "@vue/cli-service": "^3.8.0",
+    "chalk": "^2.4.2",
+    "gh-pages": "^2.0.1",
+    "shelljs": "^0.8.3",
     "vue-template-compiler": "^2.6.10"
   },
   "eslintConfig": {

public/index.html

@@ -11,6 +11,7 @@
         * {
             padding: 0;
             margin: 0;
+            box-sizing: border-box;
         }
         input{
           outline: none;

scripts/demo.js

@@ -0,0 +1,22 @@
+var ghpages = require('gh-pages');
+const shell = require('shelljs');
+const chalk = require('chalk');
+
+// shell.rm('-rf', './demo');
+// shell.mkdir('-p','./demo/dist');
+// shell.mkdir('-p','./demo/example');
+// shell.cp('-Rf', './example/*', './demo/example');
+// shell.cp('-Rf', './dist/*', './demo/dist');
+// shell.rm('-rf', './dist');
+
+// 发布
+ghpages.publish('./dist', {
+    branch: 'gh-pages',
+}, (err) => {
+    if(err) {
+        console.log(chalk.red(err));
+    } else {
+        shell.rm('-rf', './dist');
+        console.log(chalk.green('demo同步完成!'));
+    }
+});

src/App.vue

@@ -2,25 +2,50 @@
     <main>
         <header>
             <h1>正则大全</h1>
+            <input
+                ref="searchInput"
+                v-model="keyword"
+                autofocus
+                @keyup="search"
+                @mouseenter="selectSearchInputText"
+                @focus="selectSearchInputText"
+                class="search-input"
+                placeholder="搜索关键词, 如'手机'"
+                type="text"
+            >
         </header>
 
         <article>
-            <ul class="list">
+            <ul v-if="0 < rules.length" class="list">
-                <li v-for="({title, rule, events}, index) in RULES" :key="title" class="row">
+                <li
+                    @mouseenter="mouseenterHandler(index)"
+                    v-for="({title, rule, events}, index) in rules"
+                    :key="title"
+                    class="row"
+                >
+                    <i class="border"></i>
                     <h2>{{title}}</h2>
-                    <p class="rule">{{rule}}</p>
+                    <p class="rule">
+                        <span :data-clipboard-text="rule" class="btn-copy">复制</span>
+                        {{rule}}
+                    </p>
                     <section class="verification">
                         <label>
                             <input
+                                ref="input"
                                 v-model="list[index].value"
                                 @blur="check(index, 'blur')"
                                 @keyup="check(index, 'keyup')"
                             >
+                            <span class="btn-clear" @click="reset(index)">清空</span>
                         </label>
-                        <template v-if="undefined !== list[index].isOk">
+
-                            <span v-if="list[index].isOk" class="success">通过</span>
+                        <div class="tip">
-                            <span v-else class="error">不通过</span>
+                            <template v-if="undefined !== list[index].isOk">
-                        </template>
+                                <p v-if="list[index].isOk" class="success">通过</p>
+                                <p v-else class="error">不通过</p>
+                            </template>
+                        </div>
                     </section>
 
                     <section class="trigger">
@@ -35,13 +60,14 @@
                     </section>
                 </li>
             </ul>
+            <p v-else align="center">无数据</p>
         </article>
     </main>
 </template>
 
 <script>
 import RULES from '@/RULES';
-
+import ClipboardJS from 'clipboard';
 export default {
     name: 'app',
 
@@ -51,7 +77,8 @@ export default {
         Object.freeze(RULES);
 
         return {
-            RULES,
+            keyword: '',
+            rules:RULES,
             list: RULES.map(() => ({
                 value: '',
                 isOk: undefined,
@@ -63,15 +90,51 @@ export default {
         };
     },
 
+    mounted() {
+        const clipboard = new ClipboardJS('.btn-copy');
+
+        this.$on('hook:destroyed', () => {
+            clipboard.destroy();
+        });
+
+        clipboard.on('success', ()=> {
+            alert('复制成功!');
+            // console.info('Action:', e.action);
+            // console.info('Text:', e.text);
+            // console.info('Trigger:', e.trigger);
+            // e.clearSelection();
+        });
+    },
+
     methods: {
+        search() {
+            if ('' !== this.keyword){
+                this.rules = this.rules.filter(({ title }) => -1 !== title.indexOf(this.keyword.toLowerCase()));
+            } else {
+                this.rules = RULES;
+            }
+        },
+
+        selectSearchInputText() {
+            this.$refs.searchInput.select();
+        },
+
+        mouseenterHandler(index) {
+            this.$refs.input[index].focus();
+        },
+
         reset(index) {
-            this.list[index].isOk = undefined;
+            this.$nextTick(() => {
+                this.list[index].value = '';
+                this.list[index].isOk = undefined;
+            });
         },
 
         check(index, type) {
-            const { events } = this.list[index];
+            const { events, value } = this.list[index];
+            if ('' === value) this.reset(index);
             if (events[type]) {
-                const { rule } = this.RULES[index];
+                const { rule } = this.rules[index];
                 const row = this.list[index];
                 row.isOk = rule.test(row.value);
             }
@@ -81,51 +144,117 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+$primary: rgb(139, 204, 102);
 $radius: 4px;
+@keyframes shrinkBorder {
+    from {
+    }
+    50% {
+        width: 30px;
+        opacity: 0.62;
+    }
+
+    to {
+        left: 0;
+    }
+}
 main {
     font-family: 'Avenir', Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    width: 1000px;
+    margin: auto;
     header {
         padding: 15px;
+        > .search-input {
+            margin-top: 15px;
+            font-size: 16px;
+            border: 1px solid #ddd;
+            width: 100%;
+            padding: 15px;
+            border-radius: $radius;
+            box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
+        }
     }
     ul.list {
-        padding:15px;
+        padding: 15px;
         li {
+            position: relative;
+            overflow: hidden;
             border-radius: $radius;
-            margin-top:15px;
+            margin-bottom: 15px;
             padding: 15px;
             border-color: #eee;
-            border-width:1px;
+            border-width: 1px;
             border-style: solid;
-            will-change: auto;
+
-            &:hover{
+            > .border {
-                transition: box-shadow 500ms, transform 500ms;
+                position: absolute;
-                box-shadow: 1px 2px 15px rgba(0,0,0,0.21);
+                background: $primary;
+                width: 4px;
+                height: 100%;
+                top: 0;
+                left: -4px;
+            }
+            &:hover {
+                background-color: #ddd;
+                transition: all 600ms;
                 border-radius: $radius;
                 border-color: #eee;
-                transform:scale(1.01);
+                > .border {
+                    animation: shrinkBorder 1s;
+                    left: 0;
+                }
             }
             > p.rule {
                 margin-top: 15px;
                 padding: 5px 15px;
                 background: #eee;
+                color: #000;
                 border-radius: $radius;
+                > .btn-copy {
+                    border-radius: $radius;
+                    margin-right: 15px;
+                    padding: 5px;
+                    background: $primary;
+                    color: #fff;
+                    font-size: 12px;
+                    cursor: pointer;
+
+                    &:active {
+                        opacity: 0.6;
+                        color: #444;
+                    }
+
+                    &:hover {
+                        opacity: 0.6;
+                    }
+                }
             }
 
             > section.verification {
                 margin-top: 15px;
-                display: flex;
                 overflow: hidden;
                 > label {
                     display: block;
                     > input {
+                        width: 40%;
                         padding: 5px 15px;
                         border-radius: $radius;
                         border: 1px solid #ddd;
+                        font-size: 16px;
+                        & + .btn-clear {
+                            padding: 5px;
+                            color: #000;
+                            display: inline-block;
+                        }
                     }
-                    + span {
+                }
-                        margin-left:5px;
+                > .tip {
+                    height: 24px;
+                    padding: 5px;
+                    > p {
+                        font-size: 14px;
                         &.success {
                             color: #4caf50;
                         }
@@ -137,14 +266,16 @@ main {
                 }
             }
 
-
+            > section.trigger {
-            >section.trigger{
-                margin-top: 15px;
                 display: flex;
                 align-items: center;
                 align-content: center;
-                h3{font-size: 14px;}
+                h3 {
-                >label{padding:0 10px;}
+                    font-size: 14px;
+                }
+                > label {
+                    padding: 0 10px;
+                }
             }
         }
     }

src/RULES.js

@@ -4,4 +4,12 @@ export default [{
 }, {
     title: '只能输入大写字母',
     rule: /^[A-Z]+$/,
-}];
+}, {
+    title: '只能输如日期,如2000-01-01',
+    rule: /^\d{4}(-)\d{1,2}\1\d{1,2}$/,
+}, {
+    title: '只能是email地址',
+    rule: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
+},
+
+];

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>