vue彈窗訊息組件使用步驟詳解-js教程-PHP中文網

首頁

web前端

js教程

vue彈窗訊息組件使用步驟詳解

php中世界最好的语言

May 15, 2018 am 10:15 AM

使用步驟詳解

這次帶給大家vue彈跳視窗訊息元件使用步驟詳解，vue彈跳視窗訊息元件所使用的注意事項有哪些，以下就是實戰案例，一起來看一下。

本來打算寫一個那種提示完了自動消失的彈窗的，但是沒有想好淡入淡出的效果。所以暫時算半成品。

練習程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>ys-alert-component</title>
 <style>
 input {
  border-radius: 5px;
  border: 1px solid #2f9df9;
  background-color: #39befb;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#39befb),
  to(#2091fc));
  background: -moz-gradient(linear, 0 0, 0 100%, from(#39befb),
  to(#2091fc));
  background: -o-gradient(linear, 0 0, 0 100%, from(#39befb), to(#2091fc));
  background: -ms-gradient(linear, 0 0, 0 100%, from(#39befb), to(#2091fc));
  color: #FFFFFF;
  height: 28px;
  padding: 0 20px;
  cursor: pointer;
  line-height: 28px;
  display: inline-block;
  margin-right: 5px;
  outline: none;
 }
 .ys-alert {
  display: inline-block;
  height: 26px;
  padding: 8px 25px;
  min-width: 200px;
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
  background: #b8d2f3;
  margin: 50px;
 }
 .icon {
  float: left;
  width: 26px;
  height: 26px;
  border: 3px solid #fff;
  border-radius: 50%;
  font-size: 16px;
  line-height: 20px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  box-sizing: border-box;
  margin-right: 8px;
 }
 .content {
  float: left;
  line-height: 26px;
  font-size: 15px;
  color: #fff;
 }
 /*成功的样式*/
 .success {
  background: #9bdda7;
 }
 /*失败的样式*/
 .error {
  background: #f7d13b;
 }
 /*警告样式*/
 .warning {
  background: #e98c97;
 } 
 </style>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
 <p id="app">
 <input type="button" value="呼唤默认的按钮" @click="alertShow(&#39;info&#39;)">
 <input type="button" value="呼唤成功的按钮" @click="alertShow(&#39;success&#39;)">
 <input type="button" value="呼唤失败的按钮" @click="alertShow(&#39;error&#39;)">
 <input type="button" value="呼唤警告的按钮" @click="alertShow(&#39;warning&#39;)">
 <input type="button" value="呼唤美美哒博客" @click="alertShow(&#39;yuki&#39;)">
 <ys-alert-component 
  icon-bar="O" 
  type="info" 
  v-if="info" 
  alert-content="我是默认的按钮哟">
 </ys-alert-component>
 <ys-alert-component 
  icon-bar="V" 
  type="success" 
  v-if="success" 
  alert-content="我是成功的按钮哟"> 
 </ys-alert-component>
 <ys-alert-component 
  icon-bar="X" 
  type="error" 
  v-if="error" 
  alert-content="我是失败的按钮哟">
 </ys-alert-component>
 <ys-alert-component 
  icon-bar="!" 
  type="waring" 
  v-if="warning" 
  alert-content="我是警告的按钮哟">
 </ys-alert-component>
 <ys-alert-component 
  icon-bar="E" 
  type="" 
  v-if="yuki" 
  alert-content="我是灰色定制的按钮哟" 
  style="background-color: #ccc; color: #fff;">
  <p slot="alert-content">
  <span>章鱼不丸子</span>
  <a href="http://www.yuki.kim" rel="external nofollow" >http://www.yuki.kim</a>
  </p>
 </ys-alert-component>
 </p>
 <script>
 /*
  props：
  type:
   info: 默认
   success: 成功
   error: 失败
   warning：警告
  iconBar： 字符串，我没有图标，就用字母写的。很low...
  alertContent： 定制提醒的内容
  hideIcon: 隐藏或者显示丑丑的图标
  slot：
  alert-content: 定制提醒信息内容及icon整套模板
  methods：
  无，没有写方法
 */
 Vue.component("ys-alert-component", {
  props: {
  iconBar: {
   type: String,
   default: ""
  },
  alertContent: {
   type: String,
   default: "请定制提醒内容"
  },
  hideIcon: {
   type: Boolean,
   default: false
  },
  type: {
   type: String,
   default: ""
  }
  },
  template:`
  <p class="ys-alert" :class="type">
   <slot name="alert-content">
   <p class="icon" >{{ iconBar }}</p>
   <p class="content">
    {{ alertContent }}
   </p>
   </slot>
  </p>`
 })
 var vm = new Vue({
  el: "#app",
  data: {
  info: false,
  error: false,
  success: false,
  warning: false,
  yuki: false
  },
  methods: {
  alertShow (type) {
   switch (type) {
   case "info" :
    this.info = !this.info;
    //setTimeout("vm.info = !vm.info", 2000);
    break;
   case "error" :
    this.error = !this.error;
    //setTimeout("vm.error = !vm.error", 2000);
    break;
   case "success" :
    this.success = !this.success;
    //setTimeout("vm.success = !vm.success", 2000);
    break;
   case "warning" :
    this.warning = !this.warning;
    //setTimeout("vm.warning = !vm.warning", 2000);
    break;
   default:
    this.yuki = !this.yuki;
    //setTimeout("vm.yuki = !vm.yuki", 2000);
   }
  }
  }
 })
 </script>
</body>
</html>

登入後複製

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

熱AI工具

熱工具

熱門話題

Java教學

1662

CakePHP 教程

1419

Laravel 教程

1311

PHP教程

1262

C# 教程

1234

Related knowledge

如何在iPhone中使Google地圖成為預設地圖 Apr 17, 2024 pm 07:34 PM

iPhone上的預設地圖是Apple專有的地理位置供應商「地圖」。儘管地圖越來越好，但它在美國以外的地區運作不佳。與谷歌地圖相比，它沒有什麼可提供的。在本文中，我們討論了使用Google地圖成為iPhone上的預設地圖的可行性步驟。如何在iPhone中使Google地圖成為預設地圖將Google地圖設定為手機上的預設地圖應用程式比您想像的要容易。請依照以下步驟操作–先決條件步驟–您必須在手機上安裝Gmail。步驟1–開啟AppStore。步驟2–搜尋“Gmail”。步驟3–點選Gmail應用程式旁

升級微信最新版本的步驟（輕鬆掌握微信最新版本的升級方法） Jun 01, 2024 pm 10:24 PM

不斷推出新版本以提供更好的使用體驗，微信作為中國的社交媒體平台之一。升級微信至最新版本是非常重要的，家人和同事的聯繫、為了保持與朋友、及時了解最新動態。 1.了解最新版本的特性與改進了解最新版本的特性與改進非常重要，在升級微信之前。效能改進和錯誤修復，透過查看微信官方網站或應用程式商店中的更新說明、你可以了解新版本所帶來的各種新功能。 2.檢查目前微信版本我們需要檢查目前手機上已安裝的微信版本、在升級微信之前。點擊，打開微信應用“我”然後選擇，菜單“關於”在這裡你可以看到當前微信的版本號，。 3.打開應

此 Apple ID 尚未在 iTunes Store 中使用：修復 Jun 10, 2024 pm 05:42 PM

使用AppleID登入iTunesStore時，可能會在螢幕上拋出此錯誤提示「此AppleID尚未在iTunesStore中使用」。沒有什麼可擔心的錯誤提示，您可以按照這些解決方案集進行修復。修正1–更改送貨地址此提示出現在iTunesStore中的主要原因是您的AppleID個人資料中沒有正確的地址。步驟1–首先，開啟iPhone上的iPhone設定。步驟2–AppleID應位於所有其他設定的頂部。所以，打開它。步驟3–在那裡，打開“付款和運輸”選項。步驟4–使用面容ID驗證您的存取權限。步驟

Shazam應用程式在iPhone中無法運作：修復 Jun 08, 2024 pm 12:36 PM

iPhone上的Shazam應用程式有問題？ Shazam可協助您透過聆聽歌曲找到歌曲。但是，如果Shazam無法正常工作或無法識別歌曲，則必須手動對其進行故障排除。修復Shazam應用程式不會花費很長時間。因此，無需再浪費時間，請按照以下步驟解決Shazam應用程式的問題。修正1–禁用粗體文字功能iPhone上的粗體文字可能是Shazam無法正常運作的原因。步驟1–您只能從iPhone設定執行此操作。所以，打開它。步驟2–接下來，開啟其中的「顯示和亮度」設定。步驟3–如果您發現啟用了“粗體文本

crystaldiskmark是什麼軟體？ -crystaldiskmark如何使用？ Mar 18, 2024 pm 02:58 PM

CrystalDiskMark是一款適用於硬碟的小型HDD基準測試工具，可快速測量順序和隨機讀取/寫入速度。接下來就讓小編為大家介紹一下CrystalDiskMark，以及crystaldiskmark如何使用吧~一、CrystalDiskMark介紹CrystalDiskMark是一款廣泛使用的磁碟效能測試工具，用於評估機械硬碟和固態硬碟（SSD）的讀取和寫入速度和隨機I/O性能。它是一款免費的Windows應用程序，並提供用戶友好的介面和各種測試模式來評估硬碟效能的不同方面，並被廣泛用於硬體評

foobar2000怎麼下載？ -foobar2000怎麼使用 Mar 18, 2024 am 10:58 AM

foobar2000是一款能隨時收聽音樂資源的軟體，各種音樂無損音質帶給你，增強版本的音樂播放器，讓你得到更全更舒適的音樂體驗，它的設計理念是將電腦端的高級音頻播放器移植到手機上，提供更便捷高效的音樂播放體驗，介面設計簡潔明了易於使用它採用了極簡的設計風格，沒有過多的裝飾和繁瑣的操作能夠快速上手，同時還支持多種皮膚和主題，根據自己的喜好進行個性化設置，打造專屬的音樂播放器支援多種音訊格式的播放，它還支援音訊增益功能根據自己的聽力情況調整音量大小，避免過大的音量對聽力造成損害。接下來就讓小編為大

iPhone螢幕截圖不起作用：如何修復 May 03, 2024 pm 09:16 PM

螢幕截圖功能在您的iPhone上不起作用嗎？截圖非常簡單，因為您只需同時按住「提高音量」按鈕和「電源」按鈕即可抓取手機螢幕。但是，還有其他方法可以在設備上捕獲幀。修復1–使用輔助觸控使用輔助觸控功能截取螢幕截圖。步驟1–轉到您的手機設定。步驟2–接下來，點選以開啟「輔助功能」設定。步驟3–開啟「觸摸」設定。步驟4–接下來，開啟「輔助觸控」設定。步驟5–打開手機上的「輔助觸控」。步驟6–打開“自訂頂級選單”以存取它。步驟7–現在，您只需將這些功能中的任何一個連結到螢幕擷取即可。因此，點擊那裡的首

iPhone中缺少時鐘應用程式：如何修復 May 03, 2024 pm 09:19 PM

您的手機中缺少時鐘應用程式嗎？日期和時間仍將顯示在iPhone的狀態列上。但是，如果沒有時鐘應用程序，您將無法使用世界時鐘、碼錶、鬧鐘等多項功能。因此，修復時鐘應用程式的缺失應該是您的待辦事項清單的首位。這些解決方案可以幫助您解決此問題。修復1–放置時鐘應用程式如果您錯誤地從主畫面中刪除了時鐘應用程序，您可以將時鐘應用程式放回原位。步驟1–解鎖iPhone並開始向左側滑動，直到到達「應用程式庫」頁面。步驟2–接下來，在搜尋框中搜尋「時鐘」。步驟3–當您在搜尋結果中看到下方的「時鐘」時，請按住它並

See all articles

vue彈窗訊息組件使用步驟詳解

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題