mm-toast.vue 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <template>
  2. <!--弹出层提示-->
  3. <transition name="toast-fade">
  4. <div v-show="visible" class="mm-toast" :class="positionClasss">{{ message }}</div>
  5. </transition>
  6. </template>
  7. <script>
  8. export default {
  9. name: 'MmToast',
  10. data() {
  11. return {
  12. position: 'center', // 默认显示位置
  13. message: '', // 默认显示文本
  14. duration: 1500, // 显示时间, 毫秒
  15. visible: false // 是否显示
  16. }
  17. },
  18. computed: {
  19. positionClasss() {
  20. return 'mm-toast-' + this.position
  21. }
  22. }
  23. }
  24. </script>
  25. <style lang="less">
  26. @prefix-cls: mm-toast;
  27. .@{prefix-cls} {
  28. position: fixed;
  29. left: 50%;
  30. z-index: 1996;
  31. max-width: 80%;
  32. box-sizing: border-box;
  33. border-radius: 5px;
  34. padding: 10px 20px;
  35. overflow: hidden;
  36. text-align: center;
  37. min-height: 40px;
  38. line-height: 20px;
  39. font-size: 14px;
  40. color: #fff;
  41. background: rgba(0, 0, 0, 0.5);
  42. user-select: none;
  43. transform: translateX(-50%);
  44. &&-top {
  45. top: 10%;
  46. }
  47. &&-center {
  48. top: 50%;
  49. margin-top: -20px;
  50. }
  51. &&-bottom {
  52. bottom: 10%;
  53. }
  54. }
  55. .toast-fade-enter {
  56. opacity: 0;
  57. transform: translate3d(-50%, -10px, 0);
  58. }
  59. .toast-fade-enter-active {
  60. will-change: transform;
  61. transition: all 0.2s;
  62. }
  63. .toast-fade-enter-to {
  64. opacity: 1;
  65. transform: translate3d(-50%, 0, 0);
  66. }
  67. </style>