123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143 |
- <template>
- <view class="uni-popup-message">
- <view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+type">
- <slot>
- <text class="uni-popup-message-text" :class="'uni-popup__'+type+'-text'">{{message}}</text>
- </slot>
- </view>
- </view>
- </template>
- <script>
- import popup from '../uni-popup/popup.js'
-
- export default {
- name: 'uniPopupMessage',
- mixins:[popup],
- props: {
-
- type: {
- type: String,
- default: 'success'
- },
-
- message: {
- type: String,
- default: ''
- },
-
- duration: {
- type: Number,
- default: 3000
- },
- maskShow:{
- type:Boolean,
- default:false
- }
- },
- data() {
- return {}
- },
- created() {
- this.popup.maskShow = this.maskShow
- this.popup.messageChild = this
- },
- methods: {
- timerClose(){
- if(this.duration === 0) return
- clearTimeout(this.timer)
- this.timer = setTimeout(()=>{
- this.popup.close()
- },this.duration)
- }
- }
- }
- </script>
- <style lang="scss" >
- .uni-popup-message {
-
- display: flex;
-
- flex-direction: row;
- justify-content: center;
- }
- .uni-popup-message__box {
- background-color: #e1f3d8;
- padding: 10px 15px;
- border-color: #eee;
- border-style: solid;
- border-width: 1px;
- flex: 1;
- }
- @media screen and (min-width: 500px) {
- .fixforpc-width {
- margin-top: 20px;
- border-radius: 4px;
- flex: none;
- min-width: 380px;
-
- max-width: 50%;
-
-
- max-width: 500px;
-
- }
- }
- .uni-popup-message-text {
- font-size: 14px;
- padding: 0;
- }
- .uni-popup__success {
- background-color: #e1f3d8;
- }
- .uni-popup__success-text {
- color: #67C23A;
- }
- .uni-popup__warn {
- background-color: #faecd8;
- }
- .uni-popup__warn-text {
- color: #E6A23C;
- }
- .uni-popup__error {
- background-color: #fde2e2;
- }
- .uni-popup__error-text {
- color: #F56C6C;
- }
- .uni-popup__info {
- background-color: #F2F6FC;
- }
- .uni-popup__info-text {
- color: #909399;
- }
- </style>
|