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

style: 修改链接为悬浮式

Browse Source
This commit is contained in:
383514580 2019-06-25 21:25:54 +08:00
parent c64634a25c
commit 87de9c0add
2 changed files with 158 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@ -14,6 +14,7 @@
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
} }
body{overflow-x: hidden;overflow-y:scroll;}
a{ a{
text-decoration:none; text-decoration:none;

241
src/App.vue
View File

@ -1,71 +1,81 @@
<template> <template>
<main> <main>
<header> <article class="fixed">
<h1>正则大全</h1> <a href="https://github.com/any86/any-rule" target="_blank" class="github">
<a href="https://github.com/any86/any-rule" target="_blank" class="github"><svg height="20" viewBox="0 0 16 16" version="1.1" width="20" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg><span> github</span></a> <svg height="20" viewBox="0 0 16 16" version="1.1" width="20" aria-hidden="true">
<a class="btn-msg" href="https://github.com/any86/any-rule" target="_blank">留言</a> <path
fill-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
></path>
</svg>
<span>github</span>
</a>
<a class="message" href="https://github.com/any86/any-rule/issues/new" target="_blank">留言</a>
</article>
<header>
<h1>正则大全</h1>
<input <input
ref="searchInput" ref="searchInput"
v-model="keyword" v-model="keyword"
autofocus autofocus
@keyup="search" @keyup="search"
@mouseenter="selectSearchInputText" @mouseenter="selectSearchInputText"
@focus="selectSearchInputText" @focus="selectSearchInputText"
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}, index) in rules" v-for="({title, rule, events}, 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>
{{rule}} {{rule}}
</p> </p>
<section class="verification"> <section class="verification">
<label> <label>
<input <input
ref="input" ref="input"
v-model="list[index].value" v-model="list[index].value"
@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>
<div class="tip"> <div class="tip">
<template v-if="undefined !== list[index].isOk"> <template v-if="undefined !== list[index].isOk">
<p v-if="list[index].isOk" class="success">通过</p> <p v-if="list[index].isOk" class="success">通过</p>
<p v-else class="error">不通过</p> <p v-else class="error">不通过</p>
</template> </template>
</div> </div>
</section> </section>
<section class="trigger"> <section class="trigger">
<h3>验证时机</h3> <h3>验证时机</h3>
<label> <label>
<input v-model="list[index].events.blur" type="checkbox"> blur <input v-model="list[index].events.blur" type="checkbox"> blur
</label> </label>
<label> <label>
<input v-model="list[index].events.keyup" type="checkbox"> keyup <input v-model="list[index].events.keyup" type="checkbox"> keyup
</label> </label>
</section> </section>
</li> </li>
</ul> </ul>
<p v-else align="center">无数据</p> <p v-else align="center">无数据</p>
</article> </article>
</main> </main>
</template> </template>
<script> <script>
@ -77,11 +87,11 @@ export default {
components: {}, components: {},
data() { data() {
Object.freeze(RULES); Object.freeze(RULES.reverse());
return { return {
keyword: '', keyword: '',
rules:RULES, rules: RULES,
list: RULES.map(() => ({ list: RULES.map(() => ({
value: '', value: '',
isOk: undefined, isOk: undefined,
@ -99,19 +109,23 @@ export default {
this.$on('hook:destroyed', () => { this.$on('hook:destroyed', () => {
clipboard.destroy(); clipboard.destroy();
}); });
let timer = null;
clipboard.on('success', ()=> { clipboard.on('success', (e) => {
alert('复制成功!'); clearTimeout(timer);
// console.info('Action:', e.action); const el = e.trigger;
// console.info('Text:', e.text); if (el.classList.contains('success')) {
// console.info('Trigger:', e.trigger); el.classList.remove('success');
// e.clearSelection(); }
el.classList.add('success');
timer = setTimeout(() => {
el.classList.remove('success');
}, 1000);
}); });
}, },
methods: { methods: {
search() { search() {
if ('' !== this.keyword){ if ('' !== this.keyword) {
this.rules = this.rules.filter(({ title }) => -1 !== title.indexOf(this.keyword.toLowerCase())); this.rules = this.rules.filter(({ title }) => -1 !== title.indexOf(this.keyword.toLowerCase()));
} else { } else {
this.rules = RULES; this.rules = RULES;
@ -149,6 +163,15 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
$primary: rgb(139, 204, 102); $primary: rgb(139, 204, 102);
$radius: 4px; $radius: 4px;
@keyframes slide {
from {
top: 0;
}
to {
top: 100px;
}
}
@keyframes shrinkBorder { @keyframes shrinkBorder {
from { from {
} }
@ -166,8 +189,47 @@ main {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
max-width: 1000px; max-width: 1000px;
width:100%; width: 100%;
margin: auto; margin: auto;
.fixed {
position: fixed;
z-index: 1986;
left: 15px;
bottom: 15px;
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
border-radius: $radius;
overflow: hidden;
> a {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
justify-items: center;
font-size: 16px;
text-align: center;
padding: 15px;
&:active {
opacity: 0.6;
box-shadow: none;
}
&:hover {
opacity: 0.6;
}
&.github {
background: rgba(#eee, 0.9);
> span {
color: #000;
padding: 0 10px;
}
}
&.message {
background: rgba($primary, 0.9);
color: #fff;
}
}
}
header { header {
padding: 15px; padding: 15px;
> .search-input { > .search-input {
@ -179,16 +241,9 @@ main {
border-radius: $radius; border-radius: $radius;
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1); box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
} }
h1{display:inline-block;} h1 {
.github{ display: inline-block;
margin-left:15px;
display:inline-flex;
width:100px;
height:30px;
>span{padding-left:5px;}
} }
.btn-msg{padding:5px;background:$primary;}
} }
ul.list { ul.list {
padding: 15px; padding: 15px;
@ -226,7 +281,7 @@ main {
background: #eee; background: #eee;
color: #000; color: #000;
border-radius: $radius; border-radius: $radius;
line-height:2; line-height: 2;
> .btn-copy { > .btn-copy {
border-radius: $radius; border-radius: $radius;
margin-right: 15px; margin-right: 15px;
@ -235,7 +290,18 @@ main {
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
&.success {
&:after {
content: '复制成功';
border-radius: $radius;
display: block;
padding: 5px 15px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
text-align: center;
position: absolute;
}
}
&:active { &:active {
opacity: 0.6; opacity: 0.6;
color: #444; color: #444;
@ -262,6 +328,13 @@ main {
padding: 5px; padding: 5px;
color: #000; color: #000;
display: inline-block; display: inline-block;
font-size: 14px;
&:active {
color: #ccc;
}
&:hover {
color: #666;
}
} }
} }
} }