基於vue的模擬gitbook的右下角的評論按鈕

基於vue的模擬gitbook的右下角的評論按鈕

html:

<div :class='[water,{open: isOpen}]' @click='openMessage'></div>

js:

export default {
  name: "waterDroplet",
  data: () => ({
    txt: 'borderRadius實現小水滴的效果',
    water: 'water',
    isOpen: false
  }),
  methods: {
    openMessage() {
      this.isOpen = !this.isOpen
    }
  }
}

css:

.waterDroplet{
  .water{
    width: 54px;
    height: 54px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    border-radius: 100%;
    transition: all .2s ease-out;
    background: url('../assets/message.png') center center #3884FF no-repeat;
    background-size: 30px;
  }
  .water.open{
    border-radius:0px 100% 100%;
    transform: perspective(500px) rotateZ(45deg);
    background: url(../assets/close.png) center center #9a9c9d no-repeat;
    background-size: 40px;
  }
}

效果如下：