del.vue 1.71 KB
<!--
 * @Description: 
 * @Date: 2022-05-13 09:41:06
-->
<template>
  <div>
    <el-button @click="handleRemove" class="bi-photo_btn">
      <img
        src="http://cdn.yxvzb.com/WEB/SaaS/images/bi/svg/delete.svg"
        alt=""
      />
      删除
    </el-button>
  </div>
</template>

<script>
import { MessageBox, Message, Button } from 'element-ui';

export default {
  name: 'photo-wall-del',
  components: {
    [Button.name]: Button
  },
  methods: {
    handleRemove() {
      MessageBox.confirm(
        '是否确认删除?删除后可在撤销删除里面回复该分析',
        '提示',
        {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning'
        }
      )
        .then(() => {
          this.$emit('del');
          Message({
            type: 'success',
            message: '删除成功!'
          });
        })
        .catch(() => {
          Message({
            type: 'info',
            message: '已取消删除'
          });
        });
    }
  }
};
</script>

<style scoped lang="scss">
.bi-photo {
  // page-break-before: always;
  // page-break-after: always;
  padding-bottom: 50px;

  &_btn {
    display: inline-block;
    min-width: 42px;
    height: 42px;
    border: 1px solid #bac1ce;
    border-radius: 4px;
    vertical-align: top;
    text-align: center;
    line-height: 42px;
    padding: 0 15px;
    font-size: 16px;
    font-weight: 500;
    color: #6f7a91;
    cursor: pointer;
    position: relative;
    &_group {
      position: absolute;
      right: 16px;
      top: 50%;
      margin-top: -21px;
      z-index: 3;
      &_item {
        & + .bi-chart-title_btn_group_item {
          margin-left: 8px;
        }
      }
    }
  }
}
</style>