vue模仿twitter写一个自己的博客——登录弹窗

主要是要写input组件，以及实现点击区域外部的区域，关闭该区域，用css画三角形。将登录区域绝对定位到header。具体的细节可以看源码
BlogInput.vue

<template>
  <input
    :type="type"
    :value="value"
    ref="blogInput"
    :placeholder="placeholder"
    @input="$emit('input',$event.target.value)"
  />
</template>
<script lang='ts'>
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
@Component({
  components: {}
})
export default class extends Vue {
  @Prop()
  private value!: string;
  @Prop()
  private placeholder!: string;
  @Prop()
  private type!: string;
  @Prop()
  private height!: string;
  @Prop()
  private width!: string;
  @Prop()
  private fontSize!: string;
  private mounted() {
    if (this.height) {
      if (!isNaN(Number(this.height))) {
        const obj = this.$refs.blogInput as HTMLElement;
        obj.style.height = this.height + "px";
      }
    }
    if (this.fontSize) {
      if (!isNaN(Number(this.fontSize))) {
        const obj = this.$refs.blogInput as HTMLElement;
        obj.style.fontSize = this.fontSize + "px";
      }
    }
    if (this.width) {
      if (this.width.endsWith("%")) {
        const temp = this.width.substring(0, this.width.length - 1);
        if (!isNaN(Number(temp))) {
          const obj = this.$refs.blogInput as HTMLElement;
          obj.style.width = temp + "%";
        }
      }
      if (!isNaN(Number(this.width))) {
        const obj = this.$refs.blogInput as HTMLElement;
        obj.style.width = this.width + "px";
      }
    }
  }
}
</script>
<style scoped lang="scss">
input {
  height: 27px;
  font-size: 14px;
  width: 230px;
  border-radius: 2px;
  border: 1px solid #cccccc;
  text-indent: 5px;
}
input:focus {
  border: 1.3px solid $boder-color;
  outline: none;
}
</style>

效果展示

项目地址

https://github.com/pppercyWang/twitter-blog-vue