Vueel UI

# 弹出框组件

# 使用方法

# 弹出提示组件 默认只出现一个

点击查看代码 
<template>
  <VueButton @click="showToast">点击出现提示框</VueButton>
  <VueButton @click="showToastUnique">点击出现提示框</VueButton>
</template>

<script>
import Vue from 'vue';
import toastPlugin from './toast/toastPlugin';
Vue.use(toastPlugin);

export default {
  methods: {
    showToast() {
      this.$toast('我是一个VueToast组件');
    },
    showToastUnique() {
      this.$toast(`你的智商目前为 ${Math.round(Math.random() * 100)}， 需要充值`);
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 提供关闭按钮 手动关闭

点击查看代码 
<template>
  <VueButton @click="showToast">点击出现提示框</VueButton>
</template>

<script>
import Vue from 'vue';
import toastPlugin from './toast/toastPlugin';
Vue.use(toastPlugin);

export default {
  methods: {
    showToast() {
      this.$toast('我是一个VueToast组件', {
        propsData: {
          autoCloseDelay: false,
          closeButton: {
            text: '手动关闭'
          }
        }
      });
      
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 点击关闭，并执行回调

点击查看代码 
<template>
  <VueButton @click="popUpToasts" ref="button">点击出现提示框</VueButton>
</template>

<script>
import Vue from 'vue';
import toastPlugin from './toast/toastPlugin';
Vue.use(toastPlugin);

export default {
  methods: {
    popUpToasts() {
      this.$toast('我是一个VueToast组件，关闭我就执行一个回调', {
        propsData: {
          autoCloseDelay: false,
          closeButton: {
            text: '手动关闭',
            callback(toast) {
              toast.close();
              toast.$toast('关闭后，执行了一个回调', {
                propsData: {
                  position: 'middle',
                  autoCloseDelay: 2000
                }
              });
            }
          }
        }
      });
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# 弹出提示组件 提供自定义HTML节点，可设置样式

点击查看代码 
<template>
  <VueButton @click="showToast">点击出现提示框</VueButton>
  <VueButton @click="showToastHTML">点击出现提示框</VueButton>
</template>

<script>
import Vue from 'vue';
import toastPlugin from './toast/toastPlugin';
Vue.use(toastPlugin);

export default {
  methods: {
    showToast() {
      this.$toast(`
        <p>
          我是由一个<i>标签</i>包裹<strong>文字</strong>的VueToast组件
        </p>`, {
        propsData: {
          autoCloseDelay: false,
          enableUnsafeHTML: true,
          closeButton: {
            text: '手动关闭',
            callback(toast) {
              toast.close();
            }
          }
        }
      });
      
    },
    showToastHTML() {
      this.$toast(`
        <p>
          <a style="color: seagreen;" href="https://cn.vuejs.org">Vue官网链接</a>
        </p>`, {
        propsData: {
          autoCloseDelay: false,
          enableUnsafeHTML: true,
          closeButton: {
            text: '手动关闭',
            callback(toast) {
              toast.close();
            }
          }
        }
      });
      
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

# 包含过长字符

点击查看代码 
<template>
  <VueButton @click="showToast">点击出现提示框</VueButton>
</template>

<script>
import Vue from 'vue';
import toastPlugin from './toast/toastPlugin';
Vue.use(toastPlugin);

export default {
  methods: {
    this.$toast('我是一个VueToast组件我是一个VueToast组件我是一个VueToast组件我是一个VueToast组件', {
      propsData: {
        autoCloseDelay: false,
        closeButton: {
          text: '手动关闭'
        }
      }
    });

  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 出现的位置

点击查看代码 
<template>
  <VueButton @click="popUpToasts('top')">点击出现提示框</VueButton>
  <VueButton @click="popUpToasts('middle')">点击出现提示框</VueButton>
  <VueButton @click="popUpToasts('bottom')">点击出现提示框</VueButton>
</template>

<script>
import Vue from 'vue';
import toastPlugin from './toast/toastPlugin';
Vue.use(toastPlugin);

export default {
  data() {
    return {
      positionMap: {
        'top': '顶部',
        'middle': '中部',
        'bottom': '底部',
      }
    };
  },
  methods: {
    showToast(position) {
  this.$toast(`智商需要充值 出现在${this.positionMap[position]}`, {
    propsData: {
      position,
      autoCloseDelay: 1200,
      enableUnsafeHTML: true,
      closeButton: {
        text: '已充值',
        callback(toast) {
          toast.close();
        }
      }
    }
  });
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

# 事件列表

参数 说明 类型 可选值 默认值
click 触发方式 - - -
closeButton 关闭当前的 Message的选项 - - -

# 方法

参数 说明 类型 可选值 默认值
close 关闭当前的 Toast 消息 - - -

# 示例应用 Demo Combo

Last Updated: 9/6/2022, 7:14:57 AM

← Switch →