Maison > Article > interface Web > Explication détaillée des étapes d'utilisation du composant de message contextuel vue

Explication détaillée des étapes d'utilisation du composant de message contextuel vue

php中世界最好的语言original: 2018-05-15 10:15:472293parcourir

Cette fois, je vais vous apporter une explication détaillée des étapes d'utilisation du composant de message pop-up vue. Quelles sont les précautions lors de l'utilisation du composant de message pop-up vue. Voici un cas pratique. , jetons un coup d'oeil.

J'avais initialement prévu d'écrire une fenêtre contextuelle qui disparaît automatiquement une fois l'invite terminée, mais je n'ai pas pensé à l'effet de fondu d'entrée et de sortie. Il est donc considéré pour l’instant comme un produit semi-fini.

Le code de pratique est le suivant :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur. le site PHP chinois !

Lecture recommandée :

L'analyse des étapes pour utiliser le composant PopupWindow avec Vue

vue+jquery+lodash est suspendu et fixé en haut lors du coulissement Explication détaillée de la mise en œuvre de la fonction

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée des cas d'utilisation des composants VueArticle suivant：Explication détaillée des cas d'utilisation des composants Vue

Articles Liés

Voir plus