vue-zujian

2.0.0 • Public • Published

All Components can use in below 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>

Readme

Keywords

none

Package Sidebar

Install

npm i vue-zujian

Weekly Downloads

3

Version

2.0.0

License

ISC

Unpacked Size

10.8 kB

Total Files

7

Last publish

Collaborators

  • wuyuedefeng