提示框（配合弹框使用）

最新推荐文章于 2024-07-23 11:18:48 发布

快乐的小青蛙。

最新推荐文章于 2024-07-23 11:18:48 发布

阅读量117

点赞数 3

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_46002223/article/details/139170198

版权

<template>
  <div class="tip">
    <div class="tip-title">
      <i :style="option.iconStyle || {}" class="el-icon-warning tip-title-icon" />
      {{ option.name }}
    </div>
    <div class="tip-form">
      <el-form>
        <el-form-item class="tip-button">
          <el-button :loading="loading" class="tip-form-btn tip-form-btn-cancel" @click="close">取消</el-button>
          <el-button :loading="loading" class="tip-form-btn tip-form-btn-primary" type="primary" @click="sure">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { changeData } from '@/api/common'
export default {
  name: 'CommonTip',
  props: {
    option: {
      type: Object,
      default: () => ({
        name: '确认标记这条数据吗？',
        url: '',
        iconStyle: {},
        data: {}
      })
    }
  },
  data() {
    return {
      loading: false
    }
  },
  methods: {
    close() {
      this.loading = false
      this.$emit('close')
    },
    async sure() {
      const { url, data, useInner } = this.option
      this.loading = true
      if (useInner) {
        changeData(url, data).then(() => {
          this.$modal.msgSuccess('操作成功')
          this.$emit('sure')
        }).catch(() => {
          this.loading = false
        })
      } else {
        this.$emit('sure')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/styles/mixin.scss';

.tip {
  padding: 20px 10px 10px 10px;
  @include width-height();
  .tip-title {
    font-size: 16px;
    margin-top: 28px;
    @include flex(row nowrap, center, center);
    .tip-title-icon {
      font-size: 20px;
      margin-right: 16px;
      margin-top: 3px;
      color: #E1732C;
    }
  }
  .tip-form {
    margin-top: 58px;
  }
  .tip-form ::v-deep .el-form {
    .tip-button {
      .el-form-item__content {
        margin-left: 0 !important;
        @include flex(row nowrap, center, center);
      }
      .tip-form-btn {
        width: 120px;
        height: 40px;
        border-radius: 5px !important;
      }
    }
    .tip-form-btn-cancel {
      background: transparent !important;
      border: 1px solid #DCDFE6 !important;
      color: rgba($color: #fff, $alpha: 0.7);
    }
    .tip-form-btn-primary {
      margin-left: 14px;
    }
  }
}
</style>