vue-zujian

All Components can use in below site

• www.zujian.site

Install

$ npm install vue-zujian -S

项目支持 scss 只需要安装两个插件到开发环境即可

npm install node-sass --save-dev
npm install sass-loader --save-dev

全局注册

import Vue from 'vue'
import Zujian from 'vue-zujian'
// 引入重置样式 [scss]
import 'vue-zujian/src/style/application.scss'
Vue.use(Zujian, options)

options

• axios
• parts: default: []
• apiHost: default: https//api.zujian.site

Usage

Usage 1 [Suggest]

Global Register

import Vue from 'vue'
import axios from 'axios'
import Zujian from 'vue-zujian'
// 引入重置样式 [scss]
import 'vue-zujian/src/style/application.scss';
Vue.use(Zujian, {axios, parts: [{name: 'UiButton', fid: 'F43P86LBX'}]})  

Usage

<template>
  <ui-button type="primary" size="small">btn</ui-button>
</template>    

Usage 2

Global Register

import Vue from 'vue'
import axios from 'axios'
import Zujian from 'vue-zujian'
// 引入重置样式 [scss]
import 'vue-zujian/src/style/application.scss';
Vue.use(Zujian, {axios})

Usage

<template>
  <div>
    <ui-button type="primary" size="small">btn</ui-button>
  </div>
</template>

<script>
export default {
  created () {
    this.zujian.register('UiButton', 'F43P86LBX')
  }
}
</script>

Usage 3 [不建议使用]

该方法针对网站demo编写提供. 因为该方法组件内部被重新包装一层，会导致如下问题

• 如果使用$refs需要更深层调用，eg: this.$refs['button'] -> this.$refs['button'].$refs['zujian']
• 组件用 slot 往外部传递参数，scope 内部额外包了一层scope变量
• 子组件内调用this.$parent无法正常获取到父组件，同理父组件调用this.$children无法正常获取到子组件
• 性能有所下降
• 其他未知问题【待补充😆】

Global Register

import Vue from 'vue'
import axios from 'axios'
import Zujian from 'vue-zujian'
// 引入重置样式 [scss]
import 'vue-zujian/src/style/application.scss';
Vue.use(Zujian, {axios})

组件注册，内部使用component动态注册

<template>
    <div>
        <zujian name="UiButton" fid="xxx" type="primary" size="small">btn</zujian>
    </div>
</template    

如果组件需要 install 在js发起调用，请使用 usage 4

Usage 4

Global Register

import Vue from 'vue'
import axios from 'axios'
import Zujian from 'vue-zujian'
// 引入重置样式 [scss]
import 'vue-zujian/src/style/application.scss';
Vue.use(Zujian, {axios})

In js

<script>
export default {
  created () {
    this.zujian.install('MessageBox', 'fidxxxxx').then(MessageBox => {
        MessageBox.new.showAlert('hello world')
    })
  }
}
</script  

Dependent Font Icon

请手动引入图标字体链接到您的项目中，以保证组件内图标正常显示

//at.alicdn.com/t/font_650692_yd620zgzg7dgqfr.css

以scss为例，引入方式参考下方

引入icon字体文件，eg: in App.vue

重置样式内部自动引入了该字体，如果没有引入重置样式表，请自行引入下面图标库

<style lang="scss">
@import url("//at.alicdn.com/t/font_650692_yd620zgzg7dgqfr.css");
</style>