ElementUI 源码学习-Alert

    技术2023-09-19  65

    ElementUI 源码学习-Alert

    index.js

    import Alert from './src/main'; /* istanbul ignore next */ Alert.install = function(Vue) { Vue.component(Alert.name, Alert); }; export default Alert;

    title,description

    title: { type: String, default: '' }, <span class="el-alert__title" :class="[ 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> isBoldTitle() { return this.description || this.$slots.default ? 'is-bold' : ''; }

    通过 isBoldTitle 计算属性来控制标题是不是加粗 this.description || this.$slots.default

    vm.$slots 可以看这个解释 slots

    type主题/success/warning/info/error center

    <div class="el-alert" :class="[typeClass, center ? 'is-center' : '', 'is-' + effect]" v-show="visible" //是否显示 role="alert" > type: { type: String, default: 'info' //默认info } center: Boolean, computed: { typeClass() { return `el-alert--${ this.type }`; // 根据传递的type返回不同的类 } }

    根据传递的type返回不同的类,根据center控制文字位置

    icon

    <i class="el-alert__icon" :class="[ iconClass, isBigIcon ]" v-if="showIcon"></i> const TYPE_CLASSES_MAP = { 'success': 'el-icon-circle-check', 'warning': 'el-icon-warning', 'error': 'el-icon-circle-cross' }; showIcon: Boolean, iconClass() { return TYPE_CLASSES_MAP[this.type] || 'el-icon-info'; }, isBigIcon() { return this.description || this.$slots.default ? 'is-big' : ''; },

    计算属性 isBigIcon 由props 中的description 和 slot 控制 当存在描述内容的时候就使用大的图标 iconClass TYPE_CLASSES_MAP是一个常量对象,用来做map,根据传递的type来决定相应的类名

    关闭按钮

    <i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i> closable: { //控制关闭按钮 type: Boolean, default: true } methods: { close() { this.visible = false; this.$emit('close'); } },

    存在closeText这一prop的内容的话,会自定义关闭内容; 会根据closable这一prop决定是否显示该关闭按钮; 绑定单击时触发事件close()

    effect 选择提供的主题

    :class="[typeClass, center ? 'is-center' : '', 'is-' + effect]" effect: { type: String, default: 'light', validator: function(value) { //vue props对象 (validator自定义函数)* // 这个值必须匹配下列字符串中的一个 return ['light', 'dark'].indexOf(value) !== -1; } }

    vue props对象 (validator自定义函数) 用于接收来自父组件的数据(子组件期待获得的数据) 类型:字符串数组或者object effect传入的值必须匹配[‘light’, ‘dark’]中的一个

    Processed: 0.010, SQL: 9