vue toastヒントボックスコンポーネントとVueBuseventコンポーネントvue-happy-busソースコードの解読、あなたはまだ知らないBuseventの使用方法...
7686 ワード
前言
皆さん、こんにちは.また一週間も会っていません.今週は先週話したVueBuseventのコンポーネントvue-happy-busのソースコード解読とtoastヒントボックスのコンポーネントについて話します.
vue-happy-busソースコード解読
vue-happy-busの使い方を見たことがない方は、私のこの文章を見てください.vue-happy-busの使い方は初心者に向いています.Vue eventbusの使用における繰返しトリガソリューションおよび存在するBug
まず、以下のソースコードの解読は私の個人的な観点を代表しているだけで、もしみんなが興味があれば、やはり自分でソースコードを理解したり、以下の討論区で積極的に評論したり討論したりすれば、私はいつでもこの内容に注目して修正します.
ここで下の注釈に注意して、私は私の理解を下の注釈の中に書いて暑いですが、まだ少し気に入らないので、ここで皆さんの指摘を歓迎します.
注意してください.この中には4つの方法$on,$off,$once,$emitが登録されています.重要なのは、$offイベントが$onイベントを使用した後、destroyedで自動的に破棄イベントを登録することです.このような方法は、手動で登録して破棄する必要はありません.自動的にマッチングと破棄操作を行う必要はありません.ここで破棄した後、2回のトリガの問題を心配する必要はありません.あなたの転送の値を安心して管理すればいいのです.
ここで比較的良い書き方は、$emitイベントを作成する際に$offメソッドを自動的に登録して$emitメソッドを使用した後に直接ループを使用して$onメソッドを使用して受信しているパラメータを検出し、その後$onメソッドを使用した後に直接内部で破棄し、二次呼び出しに影響を与えないと思います.しかし、このコンポーネントは、小さなプロジェクトを解決する際に適しているか、プロジェクトを解決する前に緊急オンラインを解決する際に使用したほうがいいです.
vue toastプロンプトボックスコンポーネントを手で引く
構想を話して、最初はブラウザのデフォルトのポップアップボックスがみっともないと思っていたので、クリックしないグローバルなヒントを作るために、toastヒントボックスコンポーネントが誕生しました.次に全体の構想を話します.
まず、ある検証の場合、緑色の完了ヒント、または赤色のエラーヒントなど、さまざまなヒントが必要です.では、ヒントはヒント語と表示の色で構成されています.このコンポーネントは2つのパラメータを入力する必要があります.最初のヒントタイトルボックスの色です.2番目のヒント.
まずtoastを作成します.js、中の書き方は普通のjsの書き方と同じです
次はcss
その後はグローバル導入
a.vueの作成
このように呼び出すと完成し、実は非常に簡単にvueコンポーネントをカプセル化することができますが、私のプロジェクトでしか使用できません.カプセル化はまだ完璧ではありません.またmixinsquでカプセル化することもできます.vueで専門的に露出した方法でカプセル化することもできます.私はここでプレゼンテーションをしているだけで、この方法だけが実行できるわけではありません.また、私が前に書いたVue mixinsの使い方や注意点を理解することに興味があります.以下にリンクがあります.Vue mixinsの使い方や注意点について
後記
今日の話は少し少ないような気がしますが、文章はどれだけの字を書くかではなく、その品質が優れているかどうかにかかっています.これだけで十分です.問題があるので、以下の評論区で議論してください.ありがとうございます.私は先にフラッシュしてvue-routerをやめました.ここで予告をして、来週vue-routerの使用を浅く説明します.
転載先:https://juejin.im/post/5b57259ee51d4516e91f995b
皆さん、こんにちは.また一週間も会っていません.今週は先週話したVueBuseventのコンポーネントvue-happy-busのソースコード解読とtoastヒントボックスのコンポーネントについて話します.
vue-happy-busソースコード解読
vue-happy-busの使い方を見たことがない方は、私のこの文章を見てください.vue-happy-busの使い方は初心者に向いています.Vue eventbusの使用における繰返しトリガソリューションおよび存在するBug
まず、以下のソースコードの解読は私の個人的な観点を代表しているだけで、もしみんなが興味があれば、やはり自分でソースコードを理解したり、以下の討論区で積極的に評論したり討論したりすれば、私はいつでもこの内容に注目して修正します.
ここで下の注釈に注意して、私は私の理解を下の注釈の中に書いて暑いですが、まだ少し気に入らないので、ここで皆さんの指摘を歓迎します.
(function (global, factory) {
// ， function Vue$ exports function
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
(factory((global['happy-bus'] = {}),global.Vue$));
// window， window Vue ，
}(this, (function (exports,Vue$) { 'use strict';
// Vue$ Vue$ default ， Vue$ efaul， Vue$
Vue$ = Vue$ && Vue$.hasOwnProperty('default') ? Vue$['default'] : Vue$;
//
var version = "0.1.0";
// window Vue
var Vue = Vue$;
if (typeof window !== 'undefined' && window.Vue) {
Vue = window.Vue;
}
// ， Vue
var EventStore = {};
var Bus = new Vue();
//
var destroyHandler = function destroyHandler() {
// this vue
var currentEventObj = EventStore[this._uid];
if (typeof currentEventObj === 'undefined') {
return;
}
for (var type in currentEventObj) {
var key = Array.isArray(type) ? type.join(',') : type;
// Bus ， bus.$emit bus.$off
Bus.$off(type, currentEventObj[key]);
}
//
delete EventStore[this._uid];
};
// BusFactory ， $on，$off，$once，$emit 。
var BusFactory = function BusFactory(vm) {
// destroyed ，
var destroyed = vm.$options.destroyed;
// (vue ID)， id css
var uid = vm._uid;
//
EventStore[uid] = {};
// destroyed
!destroyed.includes(destroyHandler) && destroyed.push(destroyHandler);
return {
$on: function $on(type, handler) {
// bus.$emit
console.log(type, handler)
var key = Array.isArray(type) ? type.join(',') : type;
// bus.$emit
console.log(key)
EventStore[uid][key] = handler;
// bus.$on (em) => {
// console.log(em)//
// }
// bus.$on
console.log(EventStore[uid][key])
Bus.$on(type, handler);
},
// ， type true false ，
$off: function $off(type, handler) {
// $off() type ，
if (!type) {
// uid
delete EventStore[uid];
Bus.$off();
return;
}
// key 。 。
var key = Array.isArray(type) ? type.join(',') : type;
//
delete EventStore[uid][key];
Bus.$off(type, handler);
},
$once: function $once() {
// ones ,
return Bus.$once.apply(Bus, arguments);
},
$emit: function $emit() {
// , .
return Bus.$emit.apply(Bus, arguments);
}
};
};
BusFactory.$emit = function () {
// emit
return Bus.$emit.apply(Bus, arguments);
};
BusFactory.$once = function () {
// once
return Bus.$once.apply(Bus, arguments);
};
exports['default'] = BusFactory;
exports.version = version;
Object.defineProperty(exports, '__esModule', { value: true });
// BusFactory main.js ，
})));
注意してください.この中には4つの方法$on,$off,$once,$emitが登録されています.重要なのは、$offイベントが$onイベントを使用した後、destroyedで自動的に破棄イベントを登録することです.このような方法は、手動で登録して破棄する必要はありません.自動的にマッチングと破棄操作を行う必要はありません.ここで破棄した後、2回のトリガの問題を心配する必要はありません.あなたの転送の値を安心して管理すればいいのです.
ここで比較的良い書き方は、$emitイベントを作成する際に$offメソッドを自動的に登録して$emitメソッドを使用した後に直接ループを使用して$onメソッドを使用して受信しているパラメータを検出し、その後$onメソッドを使用した後に直接内部で破棄し、二次呼び出しに影響を与えないと思います.しかし、このコンポーネントは、小さなプロジェクトを解決する際に適しているか、プロジェクトを解決する前に緊急オンラインを解決する際に使用したほうがいいです.
vue toastプロンプトボックスコンポーネントを手で引く
構想を話して、最初はブラウザのデフォルトのポップアップボックスがみっともないと思っていたので、クリックしないグローバルなヒントを作るために、toastヒントボックスコンポーネントが誕生しました.次に全体の構想を話します.
まず、ある検証の場合、緑色の完了ヒント、または赤色のエラーヒントなど、さまざまなヒントが必要です.では、ヒントはヒント語と表示の色で構成されています.このコンポーネントは2つのパラメータを入力する必要があります.最初のヒントタイトルボックスの色です.2番目のヒント.
まずtoastを作成します.js、中の書き方は普通のjsの書き方と同じです
//
function toast(color, text){
// div
const body = document.getElementsByTagName('body')
const toast = document.createElement("div")
toast.innerText = text
toast.className = 'toast' +" "+ color
document.body.appendChild(toast)
//
setTimeout(function(){
document.body.removeChild(toast)
}, 5000)
}
exports.toast= toast;
次はcss
.toast {
position: fixed;
top: -100px;
left: 50%;
margin-left: -199px;
width: 398px;
height: 50px;
animation: myfirst 5s;
animation-direction:alternate;
z-index: 9999999999;
text-align: center;
}
.toast.red {
background-color: #fbe7ea;
border: 1px solid #e57785;
line-height: 50px;
color: #e57785;
}
.toast.blue {
background-color: #c5eafb;
border: 1px solid #0083ae;
line-height: 50px;
color: #0083ae;
}
.toast.green {
background-color: #dff0d7;
border: 1px solid #378d4e;
line-height: 50px;
box-sizing: border-box;
color: #378d4e;
}
#toast_close{
cursor: pointer;
display: block;
float: right;
width: 50px;
height: 50px;
text-align: center;
font-size: 30px;
position: absolute;
top: 0;
right: 0;
}
@keyframes myfirst
{
0% {top: -200px;display: block;}
25% {top: 100px;}
50% {top: 100px;}
75% {top: 100px;}
100% {top: -200px;}
}
その後はグローバル導入
//main.js
...
// ，
import './lib/toast/toast.css'
import toast from './lib/toast/toast.js'
// toast.js
Vue.prototype.$toast = toast;
a.vueの作成
export default {
name: '',
data: function () {
},
methods: {
toast:function(){
this.$toast.toast('green', ' ， toast ')
}
}
}
このように呼び出すと完成し、実は非常に簡単にvueコンポーネントをカプセル化することができますが、私のプロジェクトでしか使用できません.カプセル化はまだ完璧ではありません.またmixinsquでカプセル化することもできます.vueで専門的に露出した方法でカプセル化することもできます.私はここでプレゼンテーションをしているだけで、この方法だけが実行できるわけではありません.また、私が前に書いたVue mixinsの使い方や注意点を理解することに興味があります.以下にリンクがあります.Vue mixinsの使い方や注意点について
後記
今日の話は少し少ないような気がしますが、文章はどれだけの字を書くかではなく、その品質が優れているかどうかにかかっています.これだけで十分です.問題があるので、以下の評論区で議論してください.ありがとうございます.私は先にフラッシュしてvue-routerをやめました.ここで予告をして、来週vue-routerの使用を浅く説明します.
転載先:https://juejin.im/post/5b57259ee51d4516e91f995b