每日总结2023-09-21

1. 实现fixed定位元素水平居中。

.modal {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  margin: auto,
  max-width: 300px,
  zIndex: 2999,
}

效果是，可以实现水平居中；但max-width不再自适应，始终按300px显示。

2. modal组件开发

const MessageConstructor = Vue.extend({
  props: {
    message: String,
    stay: {
      type: Number,
      default: 3000,
    },
  },
  render(h) {
    return h('div', { staticClass: 'xx-message' }, this.message);
  },
  mounted() {
    setTimeout(() => {
      this.$destroy();
    }, this.stay);
  },
  destroyed() {
    this.$el.remove();
  },
});

export const message = content => {
  if (typeof content === 'string') {
    content = { message: content };
  }
  const instance = new MessageConstructor({
    propsData: content,
  });
  instance.$mount();
  document.body.appendChild(instance.$el);
};

$mount()挂载时，没有提供el，直接将instance.$el加入到文档中。

在组件的destroyed()生命周期中移除$el。