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

组件之 GfAlert

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

效果预览

属性

代码实现

这里我们使用了 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组件