mint-ui 中的 Palette Button_palettebutton-优快云博客

本文链接：https://blog.youkuaiyun.com/dongcehao/article/details/79528577

mint-ui 中的 Palette Button

这个还是相对简单的一个组件

首先介绍三个事件(我之前竟然还不知道这三个事件。。。)

animation 事件 CSS3动画事件

animationstart css3 开始动画

animationiteration css3 动画重复播放时触发

animationend css3 动画结束后触发

然后介绍一下执行的步骤

1、通过 touchstart 事件来触发 toggle => 包含了缩回、放出两个函数

"touchstart": _vm.toggle

2、通过 toggle 函数判断当前处于什么状态，

toggle: function (event) {
          if (!this.transforming) {
              if (this.expanded) {
                  this.collapse(event)
              } else {
                  this.expand(event)
              }
          }

3、执行 collapse 或 expand 函数

      expand: function (event) {
          this.expanded = true
          this.transforming = true
          this.$emit('expand', event)
      },
      collapse: function (event) {    //    折叠
          this.expanded = false
          this.$emit('collapse', event)
      }

4、执行了这个之后，通过

class: {

expand: _vm.expanded, 'mint-palette-button-active': _vm.transforming

vue 的 :class 来动态绑定上面两个 class

expand:

mint-palette-button-active

.mint-palette-button-active{

-webkit-animation: mint-zoom 0.5s ease-in-out;

animation: mint-zoom 0.5s ease-in-out;

}

可以看到在执行动画的时候那个一瞬间出现了 mint-palette-button-active class ,执行完毕之后出现或消失了expand class

5、通过监听animationend 事件触发

onMainAnimationEnd: function (event) {
          this.transforming = false
          this.$emit('expanded')
      },

那么接下来的事情就很简单了，就是看看怎样动态生成 expand 的 style 的

上代码

  mounted () {
      let that = this
      this.slotChildren = []
      for (let i = 0; i< this.$slots.default.length; i++) {
          if (that.$slots.default[i].elm.nodeType !== 3) {
              that.slotChildren.push(that.$slots.default[i])  //  获得 那些 插入的 按钮
          }
      }

      let css = ''
    //     把  180 * (3 + 1) / 4 ==> top ??  这里用了不知道什么 神算法，弄着弄着竟然还真的变成了正确的角度了 。。。
      let direction_arc = Math.PI * (3 + Math.max(['lt', 't', 'rt', 'r', 'rb', 'b', 'lb', 'l']
                          .indexOf(this.direction), 0)) / 4
      for (let i = 0; i < this.slotChildren.lenth; i++) {
          let arc = (Math.PI - that.offset * 2) / (that.slotChildren.length - 1) * i + 
                    that.offset + direction_arc
          let x = (Math.cos(arc) * that.radius).toFixed(2)
          let y = (Math.sin(arc) * that.radius).toFixed(2)
          let item_css = '.expand .palette-button-' + that._uid + '-sub-' + i + 
    '{transform:translate(' + x + 'px' + y+ 'px) rotate(720deg);transition-delay:' + 0.03 * i + 's}'
          css += item_css

          that.slotChildren[i].elm.className += (' palette-button-' + that._uid + '-sub-' + i)
                         //  _uid 每个 Vue 实例都会有一个递增的 id ，通过 this._uid 获取
      }

      this.styleNode = document.createElement('style')
      this.styleNode.type = 'text/css'
      this.styleNode.rel = 'stylesheet'
      this.styleNode.title = 'palette button style'
      this.styleNode.appendChild(document.createTextNode(css))
      document.getElementsByTagName('head')[0].appendChild(this.styleNode)
  }