Vue コンポーネントのトーストにディスプレイ ボックス効果を実装する方法

この記事では主にflexible: Toast - ディスプレイボックス効果に基づくVueコンポーネントを紹介します

flexible.jsに基づくVueコンポーネント

前書き:

• 現在手元にありますモバイル Vue プロジェクトは、淘宝網の lib-flexible を使用して調整されており、px2rem を使用して自動的に rem に変換されます。 lib-flexible と px2rem の設定については、vue-cli 設定フレキシブルにアクセスしてください。

• 適応のために rem を使用するため、多くの既存のモバイル UI フレームワークはうまく連携できず、多くの場合、UI フレームワークのスタイルを変更する必要があり、本来の使用意図から逸脱します。迅速な開発を実現する UI フレームワーク。

• 将来のプロジェクトでコンポーネントを再利用し、再利用可能なコンポーネントの開発能力を向上させるために、日常のプロジェクトで一般的に使用される単純なコンポーネントを分離しました。

• これは、コードの品質、難易度、再利用性の点で、マスターの傑作にはるかに劣る初心者の作品です。同時に、ご意見やご提案もお待ちしております。よろしくお願いいたします。

• GitHubアドレス: vue-flexible-components

トースト -- 表示ボックス

エフェクト表示

コード分析

p小さなアイコンアイコンとテキストの説明が含まれます。単純な DOM 構造を形成し、props を使用して変数値を定義し、計算されたプロパティを使用して受信値を分解し、watch を使用してポップアップ表示を監視し、それを .sync 修飾子と組み合わせて双方向のデータ バインディングを実現し、$ を使用します。親コンポーネントにイベントを送信して、親コンポーネントがコールバックをリッスンできるようにします。

dom構造

<transition name="fade">
 <p class="Toast" v-if="toastShow">
 <p
 class="box"
 :style="positionTop"
 >
 <span
 :class="iconClass"
 :style="iconBg"
 v-if="iconIsShow"
 ></span>
 <p
 v-if="message"
 >{{message}}</p>
 </p>
 </p>
</transition>

propsデータ

props: {
 message: { // 提示内容
 type: String,
 },
 toastShow: { // 是否显示
 type: Boolean,
 default: false
 },
 iconClass: { // 背景图片
 type: String,
 },
 iconImage: { // 自定义背景图片
 },
 duration: { // 定时器
 type: Number,
 default: 1500
 },
 position: { // 弹出框位置
 type: String,
 default: '50%'
 }
},

computed

computed: {
 // 用于判断显示框位置
 positionTop() {
 return {
 top: this.position
 }
 },
 // 自定义父组件传过来的背景图片
 iconBg() {
 if (this.iconImage) {
 return {
 backgroundImage: `url(${this.iconImage})`
 }
 } else {
 return;
 }
 },
 // 用于判断icon是否显示
 iconIsShow() {
 if (this.iconClass == 'success') {
 return true;
 } else if (this.iconClass == 'close') {
 return true;
 } else if (this.iconClass == 'warning') {
 return true;
 } else if (this.iconImage) {
 return true;
 } else {
 return false;
 }
 }
},

watch

watch: {
 toastShow() {
 // 监听toast显示，向父组件派发事件
 if (this.toastShow) {
 if (this.duration < 0) {
 this.$emit(&#39;toastClose&#39;);
 } else {
 setTimeout(()=>{
  this.$emit(&#39;update:toastShow&#39;, false) // 利用了.sync达到双向数据绑定
  this.$emit(&#39;toastClose&#39;);
 }, this.duration)
 }
 }
 }
}

使用説明書

コンポーネントアドレス: ents/To ast.vue (npm ではなく、手動でダウンロードして使用するのみ)

ダウンロードして自分のプロジェクトに入れる - インポートしてコンポーネントを導入する - コンポーネントをコンポーネントに登録する -

props

を使用する

プロパティ	説明	タイプ	オプションの値	デフォルト値
toastShow	表示ボックスの表示と非表示を制御します。自動的に閉じるには .sync 修飾子を追加する必要があります。詳細については例を参照してください	Boolean	false true	false
メッセージ	プロンプトメッセージ	文字列
アイコンクラス	アイコン小さいアイコン	文字列	成功 警告 閉じる
iconImage	カスタムの小さなアイコン（画像はrequireによってインポートする必要があります）
duration	タイマー（ミリ秒）、ポップアップ表示時間を制御、負の数値タイミングがないことを意味します タスク	番号		1500
位置	爆弾の位置(上から)	文字列		'50%'

$emit

$emit	说明	参数
toastClose	弹框关闭回调

示例

// 默认效果，只有提示信息
 <toast
 message = &#39;默认信息&#39;
 :toastShow.sync = &#39;isShow1&#39; // 需添加.sync修饰符，才能达到自动关闭的效果，否则只能监听toastClose手动关闭
 ></toast>  // 关于sync的说明，请看官网（主要是为了达到双向数据绑定，子组件修改父组件状态）
 
 // 增加自带小图标
 <toast
 message = &#39;success&#39;
 iconClass = &#39;success&#39;
 :toastShow.sync = &#39;isShow2&#39;
 ></toast>
// 自定义类型
 <toast
 message = &#39;自定义&#39;
 position = &#39;70%&#39;
 :duration = &#39;-1&#39; //负数代表不执行定时任务，自己根据需要去关闭
 :iconImage=&#39;bg&#39; // 自定义icon小图标，在data中需require引入，看下面
 :toastShow = &#39;isShow5&#39; // 因为需要手动关闭，所以不需要.sync了
 @toastClose = &#39;isClose5&#39; // 监听回调，手动关闭，看下面
 ></toast>
 
 data() {
 return {
 this.isShow5 : true,
 bg: require(&#39;../assets/logo.png&#39;), // 图片必须用require进来
 }
 },
 isClose5() {
 setTimeout(()=>{
 this.isShow5 = false;
 }, 2000)
 }

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

如何解决Router跨模块跳转问题

详细解读react后端渲染模板

在React中有关高阶组件详细介绍

在Javascript中如何实现网页抢红包

在JS中如何实现网页自动秒杀点击（详细教程）

以上がVue コンポーネントのトーストにディスプレイ ボックス効果を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。