Detailed explanation of the steps to use the vue pop-up message component-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Detailed explanation of the steps to use the vue pop-up message component

May 15, 2018 am 10:15 AM

use step Detailed explanation

This time I will bring you a detailed explanation of the steps for using the vue pop-up message component. What are the precautions when using the vue pop-up message component? The following is a practical case, let's take a look.

I originally planned to write a pop-up window that automatically disappears after the prompt is completed, but I didn’t think about the fade-in and fade-out effect. So it is considered a semi-finished product for now.

The practice code is as follows:

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
 &lt;meta charset=&quot;UTF-8&quot;&gt;
 &lt;title&gt;ys-alert-component&lt;/title&gt;
 &lt;style&gt;
 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;
 } 
 &lt;/style&gt;
 &lt;script src=&quot;https://unpkg.com/vue/dist/vue.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;p id=&quot;app&quot;&gt;
 &lt;input type=&quot;button&quot; value=&quot;呼唤默认的按钮&quot; @click=&quot;alertShow(&#39;info&#39;)&quot;&gt;
 &lt;input type=&quot;button&quot; value=&quot;呼唤成功的按钮&quot; @click=&quot;alertShow(&#39;success&#39;)&quot;&gt;
 &lt;input type=&quot;button&quot; value=&quot;呼唤失败的按钮&quot; @click=&quot;alertShow(&#39;error&#39;)&quot;&gt;
 &lt;input type=&quot;button&quot; value=&quot;呼唤警告的按钮&quot; @click=&quot;alertShow(&#39;warning&#39;)&quot;&gt;
 &lt;input type=&quot;button&quot; value=&quot;呼唤美美哒博客&quot; @click=&quot;alertShow(&#39;yuki&#39;)&quot;&gt;
 &lt;ys-alert-component 
  icon-bar=&quot;O&quot; 
  type=&quot;info&quot; 
  v-if=&quot;info&quot; 
  alert-content=&quot;我是默认的按钮哟&quot;&gt;
 &lt;/ys-alert-component&gt;
 &lt;ys-alert-component 
  icon-bar=&quot;V&quot; 
  type=&quot;success&quot; 
  v-if=&quot;success&quot; 
  alert-content=&quot;我是成功的按钮哟&quot;&gt; 
 &lt;/ys-alert-component&gt;
 &lt;ys-alert-component 
  icon-bar=&quot;X&quot; 
  type=&quot;error&quot; 
  v-if=&quot;error&quot; 
  alert-content=&quot;我是失败的按钮哟&quot;&gt;
 &lt;/ys-alert-component&gt;
 &lt;ys-alert-component 
  icon-bar=&quot;!&quot; 
  type=&quot;waring&quot; 
  v-if=&quot;warning&quot; 
  alert-content=&quot;我是警告的按钮哟&quot;&gt;
 &lt;/ys-alert-component&gt;
 &lt;ys-alert-component 
  icon-bar=&quot;E&quot; 
  type=&quot;&quot; 
  v-if=&quot;yuki&quot; 
  alert-content=&quot;我是灰色定制的按钮哟&quot; 
  style=&quot;background-color: #ccc; color: #fff;&quot;&gt;
  &lt;p slot=&quot;alert-content&quot;&gt;
  &lt;span&gt;章鱼不丸子&lt;/span&gt;
  &lt;a href=&quot;http://www.yuki.kim&quot; rel=&quot;external nofollow&quot; &gt;http://www.yuki.kim&lt;/a&gt;
  &lt;/p&gt;
 &lt;/ys-alert-component&gt;
 &lt;/p&gt;
 &lt;script&gt;
 /*
  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:`
  &lt;p class=&quot;ys-alert&quot; :class=&quot;type&quot;&gt;
   &lt;slot name=&quot;alert-content&quot;&gt;
   &lt;p class=&quot;icon&quot; &gt;{{ iconBar }}&lt;/p&gt;
   &lt;p class=&quot;content&quot;&gt;
    {{ alertContent }}
   &lt;/p&gt;
   &lt;/slot&gt;
  &lt;/p&gt;`
 })
 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);
   }
  }
  }
 })
 &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!