sun-vue-components

Installation

    cnpm i sun-vue-components -S

    import sun from 'sun-vue-components'

    Vue.use(sun)

Usage

vue-loading-template

Use SVG for loading.

Attributes

| Parameter | Type | Required | Default | Description | | ------------ | ------------ | ------------ | ------------ | ------------ | | svgType | String | false | bars | 设置图标样式 支持 'balls', 'bars', 'beat', 'bubbles', 'cylon', 'spin', 'spiningDubbles', 'barsCylon' | | svgColor | String | false | #eceacf | 设置图标颜色,如果showText为true,也会设置为字体颜色 | | svgSize | Object | false | {width:50px,height:50px} | 设置图标大小 | | showText | Boolean | false | false | 是否显示文字 | | LoadingText | String | flase | 拼命加载数据中... | 设置显示的文字 | | bgColor | String | false | {color: 'rgba(255,255,255,0.5)'} | 设置整个盒子的背景颜色 | | size | Object | false | {width: 100%,height:100%} | 设置整个盒子的宽高 | | pos | Object | false | {position:absolute;top:0;left:0} | 设置整个盒子的位置 |

eg:

    <sun-loading-template :showText="true"></sun-loading-template>

tip:

    如果webpack配置了url-load 会转换为base64 需要引入一个 raw-loader svg才可以正常显示
    {
        test: /\.svg$/,
        loader: "raw-loader"
    }

barCode

Use barCode for jsbarcode.

| Parameter | Type | Required | Default | Description | | ------------ | ------------ | ------------ | ------------ | ------------ | | data | default | true | '' | 根据传入的内容生成条形码 | width | String | false | "small" | 生成条形码的宽度 tiny/small/large/ | height | Number | flase | 60 | 条形码生成的高度 | showText | Boolean | false | true | 是否在条形码下方显示出传入的data | fontSize | Number | false | 20 | 显示的文字大小 | pos | Object | false | {position: 'absolute',left: 0,top:0} | 条形码显示的位置

eg:

   <sun-barcode :data="1231231212313123"></sun-barcode>

message

Message弹框针对Pc端

| Parameter | Type | Required | Default | Description | | ------------ | ------------ | ------------ | ------------ | ------------ | | message | String | false | '' | 弹框显示的内容 | time | Number | false | '' | 弹框多少秒后自动消失

eg:

   this.$sun_message({
      message: '这是一个message',
      time: 5000
    })