首頁 > 文章 > web前端 > vue彈窗訊息組件使用步驟詳解

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

php中世界最好的语言原創: 2018-05-15 10:15:472308瀏覽

這次帶給大家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中文網其它相關文章！