riot로 쓴 Toast.
12035 단어 riotJavaScriptriot.js
무지막지하게 (특히 시간 초과) 토스트.
잊지 않은 틈을 타서 쓰다.
붙여넣기 모드
<div riot-tag="kl-notifier" id="notifier" name="notifier"></div>
<script>
var notifier = null;
riot.compile(function() {
notifier = riot.mount("#notifier", "kl-notifier")[0];
부르다
if(notifier) notifier.trigger('notify',{key:"xxxx",message:"message"});
컨텐트
kl-notifier.tag<kl-notifier>
<div class="notifier">
<div class={notify:true,notifyhide:(state==0 || state>=8)} each={notifies} >
{message}
</div>
</div>
<script>
this.menumode = "menu";
this.notifies = [];
this.timer = null;
this.on('mount', function(e) {
this.notifies = [
];
this.update();
});
this.on('notify',function(e){
var added = false;
if(e.key){
for(var k in this.notifies){
if(this.notifies[k].key && this.notifies[k].key==e.key){
this.notifies[k].message = e.message;
this.notifies[k].state = 1;
added = true;
break;
}
}
}
if(!added){
this.notifies.push({
message:e.message,
state:0,
key:e.key
});
}
if(this.timer) {
clearTimeout(this.timer);
this.timer = null;
}
this.update();
});
this.on('updated', function(e) {
//更新に備えておく
var _this = this;
if(_this.notifies.length!=0) this.timer = setTimeout(function(e){
var n = [];
for(var k in _this.notifies){
if(_this.notifies[k].state <= 9) {
_this.notifies[k].state++;
n.push(_this.notifies[k]);
}
}
_this.notifies = n;
_this.update();
},700);
});
</script>
</kl-notifier>
스타일은 주제에 맞춰야 한다..notifier {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
padding: 5px;
width: 90%;
margin-top: 15px;
z-index: 120;
}
.notify {
margin: 10px;
padding: 5px;
background-color: #4db6ac;
color: white;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
border: 1px solid #71c5bd;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
font-size: 16px;
}
.notifyhide {
opacity: 0;
height: 0;
margin-top: 0;
padding-top: 0;
margin-bottom: 0;
padding-bottom: 0;
overflow: hidden;
}
Reference
이 문제에 관하여(riot로 쓴 Toast.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/zrelyydereva/items/c3f29ecdfe6dba1aa2fe
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<div riot-tag="kl-notifier" id="notifier" name="notifier"></div>
<script>
var notifier = null;
riot.compile(function() {
notifier = riot.mount("#notifier", "kl-notifier")[0];
if(notifier) notifier.trigger('notify',{key:"xxxx",message:"message"});
<kl-notifier>
<div class="notifier">
<div class={notify:true,notifyhide:(state==0 || state>=8)} each={notifies} >
{message}
</div>
</div>
<script>
this.menumode = "menu";
this.notifies = [];
this.timer = null;
this.on('mount', function(e) {
this.notifies = [
];
this.update();
});
this.on('notify',function(e){
var added = false;
if(e.key){
for(var k in this.notifies){
if(this.notifies[k].key && this.notifies[k].key==e.key){
this.notifies[k].message = e.message;
this.notifies[k].state = 1;
added = true;
break;
}
}
}
if(!added){
this.notifies.push({
message:e.message,
state:0,
key:e.key
});
}
if(this.timer) {
clearTimeout(this.timer);
this.timer = null;
}
this.update();
});
this.on('updated', function(e) {
//更新に備えておく
var _this = this;
if(_this.notifies.length!=0) this.timer = setTimeout(function(e){
var n = [];
for(var k in _this.notifies){
if(_this.notifies[k].state <= 9) {
_this.notifies[k].state++;
n.push(_this.notifies[k]);
}
}
_this.notifies = n;
_this.update();
},700);
});
</script>
</kl-notifier>
.notifier {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
padding: 5px;
width: 90%;
margin-top: 15px;
z-index: 120;
}
.notify {
margin: 10px;
padding: 5px;
background-color: #4db6ac;
color: white;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
border: 1px solid #71c5bd;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
font-size: 16px;
}
.notifyhide {
opacity: 0;
height: 0;
margin-top: 0;
padding-top: 0;
margin-bottom: 0;
padding-bottom: 0;
overflow: hidden;
}
Reference
이 문제에 관하여(riot로 쓴 Toast.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/zrelyydereva/items/c3f29ecdfe6dba1aa2fe텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)