vue 通用的toast弹窗 toast 弹窗 提示

水深无声 2021-07-25 00:45 733阅读 0赞

20190829171055833.gif

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>弹窗</title>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  9. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  10. <style type="text/css">
  11. .toast {
  12. padding: 10px 25px 10px 25px;
  13. background: rgba(0, 0, 0, .5);
  14. border-radius: 5px;
  15. color: #ffffff;
  16. text-align: center;
  17. position: fixed;
  18. left: 50%;
  19. top: 40%;
  20. transform: translate(-50%, -50%);
  21. z-index: 100;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div id="test">
  27. <toast v-if='isShow' :message='isShowMsg'></toast>
  28. <div class="container" @click="showToast">
  29. 点击显示 showToast
  30. </div>
  31. </div>
  32. <script>
  33. var that;
  34. Vue.component('toast', {
  35. props: ['message'],
  36. template: `
  37. <div class="toast_bg_transparent">
  38. <div class="toast">
  39. <span>{
  40. {message}}</span>
  41. </div>
  42. </div>
  43. `
  44. })
  45. new Vue({
  46. el: '#test',
  47. data() {
  48. return {
  49. isShow: false,
  50. isShowMsg: '', //弹窗提示
  51. }
  52. },
  53. methods: {
  54. showToast() {
  55. console.log('点击了 showToast')
  56. this.isShow = true;
  57. this.isShowMsg = '错误提示';
  58. setTimeout(() => {
  59. this.isShow = false;
  60. }, 1000);
  61. }
  62. },
  63. mounted() {}
  64. })
  65. </script>
  66. </body>
  67. </html>

发表评论

表情:
评论列表 (有 0 条评论,733人围观)

还没有评论,来说两句吧...

相关阅读