<style scoped lang="scss"> *, :after, :before { box-sizing: border-box; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } $color-tips: #1ab394; $color-text: rgba(255, 255, 255, 0.6); $color-info: #ff9900; $color-default: #ccc; .modal { display: block; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99; .modal-mask { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); } .modal-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .modal-content { display: flex; flex-direction: column; min-width: 360px; box-shadow: 0 1px 8px 0 rgba(0, 30, 24, 0.05); background-color: #fff; border-radius: 6px; overflow: hidden; } .modal-header { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; font-size: 18px; padding: 0 20px; font-weight: 500; color: #fff; background-color: $color-tips; z-index: 9999; .closed { position: absolute; top: 50%; right: 0; font-size: 12px; padding: 8px 16px; border-radius: 4px; cursor: pointer; color: #fff; transform: translateY(-50%); } &.modal-plain { background-color: rgba(245, 245, 245, 1); color: $color-tips; .closed { color: $color-info; } } } .modal-body { display: block; flex: 1; background-color: #fff; overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .modal-footer { display: block; width: 100%; padding: 20px 30px; text-align: center; background-color: #fff; .modal-btn { width: 80px; +.modal-btn { margin-left: 8px; } } } } .text-tips { display: block; width: 100%; font-size: 16px; text-align: center; color: #333; padding: 40px 60px; } .modal-btn { display: inline-flex; padding: 0 12; margin: 0; align-items: center; justify-content: center; font-size: 14px; font-weight: 400; height: 32px; text-align: center; white-space: nowrap; touch-action: manipulation; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; user-select: none; background-image: none; text-decoration: none; border: 1px solid transparent; border-radius: 4px; transition: all .3s ease; &:link, &:visited, &:hover, &:active { text-decoration: none; } } .modal-btn-default { background-color: $color-default; color: #fff; &:link { color: #fff; background-color: $color-default; } &:visited { color: #fff; background-color: $color-default; } &:hover { color: #fff; background-color: rgba(170, 170, 170, .85); } &:active { color: #fff; background-color: $color-default; } &[plain] { background-color: #fff; color: $color-default; border: 1px solid $color-default; } } .modal-btn-primary { background-color: $color-tips; color: #fff; &:link { color: #fff; background-color: $color-tips; } &:visited { color: #fff; background-color: $color-tips; } &:hover { color: #fff; background-color: rgba(26, 179, 148, 0.85); } &:active { color: #fff; background-color: $color-tips; } &[plain] { background-color: #fff; color: $color-tips; border: 1px solid $color-tips; } } .toggle-enter, .toggle-leave-active { opacity: 0; transform: translatey(-10px); } .toggle-enter-active, .toggle-leave-active { transition: all ease .2s; } </style>
使用
<template> <div> <img alt="Vue logo" src="https://www.jb51.net/article/assets/logo.png" /> <div> <button @click.stop="showModel_0 = true"> 显示默认样式 </button> <button @click.stop="showModel_1 = true"> 显示素样式 </button> <button @click.stop="showModel_2 = true"> 修改提示语 </button> <button @click.stop="showModel_3 = true"> 自定义内容 </button> <button @click.stop="showModel_4 = true"> 去除Footer </button> <button @click.stop="showModel_5 = true"> 去除Header </button> <button @click.stop="showModel_6 = true"> 设置3秒后自动关闭 </button> </div> <EchiModal :visible.sync="showModel_0" title="显示默认样式"></EchiModal> <EchiModal :visible.sync="showModel_1" title="显示素样式" plain></EchiModal> <EchiModal :visible.sync="showModel_2" title="修改提示语" text="哈哈哈哈哈,我把提示信息修改了"></EchiModal> <EchiModal :visible.sync="showModel_3" title="自定义内容" :contentStyle="{width: '600px'}"> <img alt="Vue logo" src="https://www.jb51.net/article/assets/logo.png" /> </EchiModal> <EchiModal :visible.sync="showModel_4" title="去除Footer" :showFooter="false"></EchiModal> <EchiModal :visible.sync="showModel_5" title="去除Header" :showHeader="false"></EchiModal> <EchiModal :visible.sync="showModel_6" title="设置3秒后自动关闭" :duration="3"></EchiModal> </div> </template> <script> import EchiModal from "./components/EchiModal.vue"; export default { name: "app", components: { EchiModal }, data() { return { showModel_0: false, showModel_1: false, showModel_2: false, showModel_3: false, showModel_4: false, showModel_5: false, showModel_6: false, } } }; </script>