mirrors/any-rule
1
0
Fork 0
mirror of https://github.com/any86/any-rule.git synced 2025-07-14 15:38:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(demo): 增加阴影

Browse Source
This commit is contained in:
any86 2021-02-03 13:16:35 +08:00
parent 7144a6744e
commit b8ddf5a515
1 changed files with 38 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
packages/www/src/App.vue
View File

@ -20,14 +20,15 @@
class="message" class="message"
href="https://github.com/any86/any-rule/issues/new" href="https://github.com/any86/any-rule/issues/new"
target="_blank" target="_blank"
>提问</a> >提问</a
>
</article> </article>
<header> <header>
<h1>正则大全</h1> <h1>正则大全</h1>
<a <a
onclick="_hmt.push(['_trackEvent', '交互', '点击github', '头部'])" onclick="_hmt.push(['_trackEvent', '交互', '点击github', '头部'])"
style="margin-left:15px;color:#000;" style="margin-left: 15px; color: #000"
href="https://github.com/any86/any-rule" href="https://github.com/any86/any-rule"
target="_blank" target="_blank"
class="github" class="github"
@ -41,7 +42,14 @@
<span>github</span> <span>github</span>
</a> </a>
<iframe style="display:block;margin-top:15px;" src="https://ghbtns.com/github-btn.html?user=any86&repo=any-rule&type=star&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe> <iframe
style="display: block; margin-top: 15px"
src="https://ghbtns.com/github-btn.html?user=any86&repo=any-rule&type=star&count=true"
frameborder="0"
scrolling="0"
width="170px"
height="20px"
></iframe>
<input <input
ref="searchInput" ref="searchInput"
@ -53,27 +61,28 @@
class="search-input" class="search-input"
placeholder="搜索关键词, 如'手机'" placeholder="搜索关键词, 如'手机'"
type="text" type="text"
> />
</header> </header>
<article> <article>
<ul v-if="0 < rules.length" class="list"> <ul v-if="0 < rules.length" class="list">
<li <li
@mouseenter="mouseenterHandler(index)" @mouseenter="mouseenterHandler(index)"
v-for="({title, rule, events,examples,counterExamples}, index) in rules" v-for="({ title, rule, events, examples, counterExamples }, index) in rules"
:key="title" :key="title"
class="row" class="row"
> >
<i class="border"></i> <i class="border"></i>
<h2>{{title}}</h2> <h2>{{ title }}</h2>
<p class="rule"> <p class="rule">
<span :data-clipboard-text="rule" class="btn-copy">点击复制</span> <span :data-clipboard-text="rule" class="btn-copy">点击复制</span>
<a <a
:href="`https://github.com/any86/any-rule/issues/new?title=我有更好的正则: ${title}`" :href="`https://github.com/any86/any-rule/issues/new?title=我有更好的正则: ${title}`"
target="_blank" target="_blank"
class="btn-better" class="btn-better"
>我有更好的正则</a> >我有更好的正则</a
<code ref="code" class="javascript">{{rule}}</code> >
<code ref="code" class="javascript">{{ rule }}</code>
</p> </p>
<section class="verification"> <section class="verification">
<label> <label>
@ -87,7 +96,7 @@
@compositionend="check(index, 'blur')" @compositionend="check(index, 'blur')"
@blur="check(index, 'blur')" @blur="check(index, 'blur')"
@keyup="check(index, 'keyup')" @keyup="check(index, 'keyup')"
> />
<span class="btn-clear" @click="reset(index)">清空</span> <span class="btn-clear" @click="reset(index)">清空</span>
</label> </label>
@ -101,13 +110,9 @@
<section class="trigger"> <section class="trigger">
<h3>验证时机</h3> <h3>验证时机</h3>
<label> <label> <input v-model="list[index].events.blur" type="checkbox" /> blur </label>
<input v-model="list[index].events.blur" type="checkbox"> blur
</label>
<label> <label> <input v-model="list[index].events.keyup" type="checkbox" /> keyup </label>
<input v-model="list[index].events.keyup" type="checkbox"> keyup
</label>
</section> </section>
</li> </li>
</ul> </ul>
@ -128,7 +133,7 @@ export default {
Object.freeze(RULES); Object.freeze(RULES);
return { return {
token:'', token: '',
timer: null, timer: null,
keyword: '', keyword: '',
rules: RULES, rules: RULES,
@ -137,9 +142,9 @@ export default {
isOk: undefined, isOk: undefined,
events: { events: {
blur: true, blur: true,
keyup: true keyup: true,
} },
})) })),
}; };
}, },
@ -173,9 +178,9 @@ export default {
}, },
methods: { methods: {
parseExample(examples, counterExamples){ parseExample(examples, counterExamples) {
let arr = [`例如: ${examples.join(', ')}`]; let arr = [`例如: ${examples.join(', ')}`];
if(undefined !== counterExamples) { if (undefined !== counterExamples) {
arr.push(`反例: ${counterExamples.join(', ')}`); arr.push(`反例: ${counterExamples.join(', ')}`);
} }
return arr.join(' , '); return arr.join(' , ');
@ -225,8 +230,8 @@ export default {
/* eslint-disable */ /* eslint-disable */
_hmt.push(['_trackEvent', 'input框', this.rules[index].title, this.list[index].value]); _hmt.push(['_trackEvent', 'input框', this.rules[index].title, this.list[index].value]);
} }
} },
} },
}; };
</script> </script>
@ -319,8 +324,9 @@ main {
h1 { h1 {
display: inline-block; display: inline-block;
} }
>.github{display: inline-flex; > .github {
>span{ display: inline-flex;
> span {
margin-left: 5px; margin-left: 5px;
} }
} }
@ -336,7 +342,7 @@ main {
border-color: #eee; border-color: #eee;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 0.1);
> .border { > .border {
position: absolute; position: absolute;
background: $primary; background: $primary;
@ -366,7 +372,7 @@ main {
display: inline-block; display: inline-block;
border-radius: $radius; border-radius: $radius;
margin-right: 15px; margin-right: 15px;
padding:0 5px; padding: 0 5px;
background: $primary; background: $primary;
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
@ -398,7 +404,9 @@ main {
background-color: $danger; background-color: $danger;
} }
>code{word-break:break-word;} > code {
word-break: break-word;
}
} }
> section.verification { > section.verification {