So verwenden Sie die Vue-Popup-Nachrichtenkomponente-js-Tutorial-php.cn

So verwenden Sie die Vue-Popup-Nachrichtenkomponente

php中世界最好的语言

Freigeben： 2018-06-01 17:17:12

Original

2369 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie die Vue-Popup-Nachrichtenkomponente verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung der Vue-Popup-Nachrichtenkomponente? .

Ursprünglich hatte ich geplant, ein Popup-Fenster zu schreiben, das nach Abschluss der Eingabeaufforderung automatisch verschwindet, aber ich habe nicht an den Ein- und Ausblendeffekt gedacht. Daher gilt es vorerst als Halbfertigprodukt.

Der Übungscode lautet wie folgt:

<!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>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zu PHP Chinesische Website!

Empfohlene Lektüre:

Wie man Vue verwendet, um die PopupWindow-Komponente zu implementieren

Wie man jQuery bedient, um die Elektronik zu erreichen Uhreffekt

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Vue-Popup-Nachrichtenkomponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!