0.0.2 • Published 7 years ago
sun-vue-components v0.0.2
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
})