mirror of
https://github.com/any86/any-rule.git
synced 2025-07-14 15:38:58 +08:00
chore(build): 新增发布demo脚本
This commit is contained in:
宁宁
parent
a6adc50ac8
commit
f625384747
@ -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": {
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
@ -11,6 +11,7 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
input{
|
||||
outline: none;
|
||||
|
||||
22
scripts/demo.js
Normal file
22
scripts/demo.js
Normal file
@ -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同步完成!'));
|
||||
}
|
||||
});
|
||||
187
src/App.vue
187
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">
|
||||
<li v-for="({title, rule, events}, index) in RULES" :key="title" class="row">
|
||||
<ul v-if="0 < rules.length" class="list">
|
||||
<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>
|
||||
<span v-else class="error">不通过</span>
|
||||
</template>
|
||||
|
||||
<div class="tip">
|
||||
<template v-if="undefined !== list[index].isOk">
|
||||
<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{
|
||||
transition: box-shadow 500ms, transform 500ms;
|
||||
box-shadow: 1px 2px 15px rgba(0,0,0,0.21);
|
||||
|
||||
> .border {
|
||||
position: absolute;
|
||||
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{
|
||||
margin-top: 15px;
|
||||
> section.trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
h3{font-size: 14px;}
|
||||
>label{padding:0 10px;}
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
}
|
||||
> label {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
10
src/RULES.js
10
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+)*$/,
|
||||
},
|
||||
|
||||
];
|
||||
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user