2018-02-06

vux踩坑日志

开始我是用element的，挺好用，文档也简单，但是我慢慢发现vux好多插件！配合Vue强大的数据绑定 生命周期钩子 对于我这种懒人简直是福音。。。
先搞个脚手架vue-cli
首先是看文档 啦啦啦

vux有许多封装好的插件 具体调用方法需要看一下

<template>
  <div>
    <group>
      <x-switch :title="$t('Toggle')" v-model="show1" @on-change="show1change"></x-switch>
    </group>
    <div v-transfer-dom>
      <loading :show="show1" :text="text1"></loading>
    </div>
    <div style="padding: 15px;">
      <x-button @click.native="showLoading" type="primary">{{ $t('Show loading') }}</x-button>
    </div>
    <div style="padding: 15px;">
      <x-button @click.native="showDelayLoading" type="primary">{{ $t('Show delay loading') }}</x-button>
    </div>
  </div>
</template>



<script>
import { Loading, Group, XSwitch, XButton, TransferDomDirective as TransferDom } from 'vux'

export default {
  directives: {
    TransferDom
  },
  components: {
    Loading,
    Group,
    XSwitch,
    XButton
  },
  data () {
    return {
      show1: false,
      text1: 'Processing'
    }
  },
  methods: {
    showLoading () {
      this.$vux.loading.show({
        text: 'Loading'
      })
      setTimeout(() => {
        this.$vux.loading.hide()
      }, 2000)
    },
    showDelayLoading () {
      this.$vux.loading.show({
        text: 'Loading',
        delay: 1e3
      })
      setTimeout(() => {
        this.$vux.loading.hide()
      }, 2000)
    },
    show1change (val) {
      if (val) {
        tick(0, (percent) => {
          if (percent === 100) {
            this.show1 = false
            return
          }
          this.text1 = `${percent}%`
        })
      }
    }
  }
}

function tick (i, cb) {
  setTimeout(function () {
    i++
    cb(i)
    if (i < 100) {
      tick(i, cb)
    }
  }, 10)
}
</script>

使用loading 插件

然鹅当我调用loading的时候

报错了

一片红
然后我就去翻了翻说明

原来是因为 想使用loading组件需要以plugin形式调用一下(如上图)

关于作者

  var myproject = {

    nickName  : "remix_huang",

    site : "https://www.jianshu.com/u/717e2ca57b3f"

  }