ns-vue-summary v1.0.2

ns-vue-summary

A Vue component to show summary list(基于vue的概要列表组件)

Install(安装)

You can install it via NPM:(您可以通过NPM安装它)

npm install --save ns-vue-summary

or,just include ns-summary.js to your view like this.(或者使用引用ns-summary.js的方式)

Namely(即)：

import NsVueSummary from 'ns-vue-summary'
// 或者 const NsVueSummary = require('ns-vue-summary')
// 或者 <script src="..."></script>
Vue.use(NsVueSummary)

Usage(使用)

In Your HTML:

<!-- 注意：此处案例icon使用的是fontawesome -->
<!-- Note: The case icon here uses fontawesome -->
<ns-summary class="my-summary" :show-space="true">
  <ns-summary-item title="title" describe="describe" type="gray" href="https://www.baidu.com/"></ns-summary-item>
  <ns-summary-item type="info">
    <template slot="title"> 综合用户 </template>
    <template slot="describe"> <i class="fa fa-user"></i>XX </template>
  </ns-summary-item>
  <ns-summary-item title="19 Sales">
    <template slot="describe"> 5000万元 </template>
  </ns-summary-item>
  <ns-summary-item title="FOLLOWING" describe="284" type="danger">
    <template slot="title"> <i class="fa fa-bullhorn"></i> FOLLOWING </template>
  </ns-summary-item>
  <ns-summary-item title="2 Photo Upload" type="success">
    <template slot="describe"> ...<i class="fa fa-tags"></i> </template>
  </ns-summary-item>
  <ns-summary-item title="15 Emails" type="warning">
    <template slot="describe"> Unread </template>
  </ns-summary-item>
</ns-summary>

The icon used is(使用的图标是)：fontawesome

####result

######:show-space="false"

######:show-space="true"

props(属性)

ns-summary

ns-summary-item

event(事件)

none

run(运行)

# git clone ...
git clone https://github.com/nongshuqiner/ns-vue-summary.git

# enter
cd ns-vue-summary

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

Donation

If you find component useful, you can buy me a cup of coffee 如果您发现此组件有用，您可以给我买一杯咖啡

Contact me(联系我)

Just Contact Me At:

• Email: ym1185509297@163.com
• 简书: 言墨儿

License

MIT Copyright (c) 2018 - forever Naufal Rabbani