vue2组件封装实战系列之alert组件

组件之 GfAlert

消息组件一般用于提示用户,比如通知,警告等消息。

效果预览

在这里插入图片描述

属性

参数 类型 说明 可选值 默认值
title String 显示的标题
type String 类型
effect String 显示的标题
description String 描述
closeText String 显示的标题
showIcon Boolean 显示左侧的图标
center Boolean 居中
closable Boolean 关闭按钮 true

代码实现

这里我们使用了 function 组件来实现 space 组件,比较简洁灵活

<template>
  //动画效果
  <Transition name="el-alert-fade">
    <div
      :class="['el-alert',typeClass,center?'is-center':'','is-' + effect]"
      v-show="visible"
      role="alert"
    >
      <i :class="['el-alert__icon',iconClass, isBigIcon ]" v-if="showIcon"></i>
      <div class="el-alert__content">
        <span :class="['el-alert__title',isBoldTitle]" v-if="title || $slots.title">
          <slot name="title">{{ title }}</slot>
        </span>

        <!-- 描述内容两种方式都可以 -->
        <p class="el-alert__description" v-if="$slots.default && !description">
          <slot></slot>
        </p>
        <p class="el-alert__description" v-if="description && !$slots.default">{{ description }}</p>
        <i
          :class="['el-alert__closebtn',{'el-icon-close': closeText === ''}]"
          v-show="closable"
          @click="handleClose"
        >{{ closeText }}</i>
      </div>
    </div>
  </Transition>
</template>

<script>
const TYPE_CLASSES_MAP = {
  success: "el-icon-success",
  warning: "el-icon-warning",
  error: "el-icon-error",
};
export default {
  name: "GfAlert",
  created() {
    console.log("this is from alert888");
  },
  props: {
    title: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "info",
    },
    description: {
      type: String,
      default: "",
    },
    effect: {
      type: String,
      default: "light",
      validator: function (value) {
        return ["light", "dark"].indexOf(value) !== -1;
      },
    },
    closeText: {
      type: String,
      default: "",
    },
    showIcon: Boolean,
    center: Boolean,
    closable: {
      type: Boolean,
      default: true,
    },
  },

  data() {
    return {
      visible: true,
    };
  },
  computed: {
    // 类型样式
    typeClass() {
      return `el-alert--${this.type}`;
    },
    // 标题加粗
    isBoldTitle() {
      /**
       * 存在描述内容或者有插槽slots
       */
      return this.description || this.$slots.default ? "is-bold" : "";
    },
    //
    iconClass() {
      return TYPE_CLASSES_MAP[this.type] || "el-icon-info";
    },
    // 图标大小
    isBigIcon() {
      return this.description || this.$slots.default ? "is-big" : "";
    },
  },
  methods: {
    // 关闭
    handleClose() {
      this.visible = false;
      // 关闭后触发事件
      this.$emit("close");
    },
  },
};
</script>

使用

借用上篇文章 GfAside 标签,来测试下布局的效果

<GfAlert
  type="error"
  title="自定义警告提醒"
  description="这是一段自定义描述内容"
  showIcon
  @close="handleClose"
></GfAlert>
<GfAside width="600px">
  <GfAlert
    type="error"
    title="自定义警告提醒"
    description="这是一段自定义描述内容"
    showIcon
    @close="handleClose"
  ></GfAlert>
</GfAside>

这样,我们就实现了自己的 alert组件

相关推荐

  1. vue2 实战:动态,异步组件

    2024-06-08 21:12:01       14 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-06-08 21:12:01       8 阅读
  2. 【Python教程】压缩PDF文件大小

    2024-06-08 21:12:01       9 阅读
  3. 通过文章id递归查询所有评论(xml)

    2024-06-08 21:12:01       10 阅读

热门阅读

  1. Mybatis06-动态SQL

    2024-06-08 21:12:01       7 阅读
  2. 微信小程序动画和Canvas笔记

    2024-06-08 21:12:01       9 阅读
  3. ES5/ES6 的继承除了写法以外还有什么区别?

    2024-06-08 21:12:01       6 阅读
  4. Jetpack compose中State和Kotlin Flow对比

    2024-06-08 21:12:01       8 阅读
  5. django支持https

    2024-06-08 21:12:01       5 阅读
  6. 如何反编译jar并修改后还原为jar

    2024-06-08 21:12:01       9 阅读
  7. nacos新版踩坑

    2024-06-08 21:12:01       6 阅读