Ty-vue-components NPM

引入方式

按需引入

依赖 babel-plugin-component 插件实现按需引入

cnpm install babel-plugin-component -D

babel配置

plugins: [
  ['component',
    {
  libraryName: 'ty-vue-components',
      style: false
    }
  ]
]

全局引入

import {tyComponents} from 'ty-vue-components'
Vue.use(tyComponents)

顶部加载提示条

<!-- 引入 -->
import {waitLine} from 'ty-vue-components'

<!-- 使用 -->
<wait-line :show='show'></wait-line>

属性
- show 顶部加载条是否显示
- fixed 是否固定在页面的顶部，默认false

瀑布流组件

<!-- 引入 -->
import {waterfall} from 'ty-vue-components'

<!-- 使用 -->
<water-fall ref="water-fall" span="10" :row="4">
  <template v-slot="item">
    <div class="item">
      <div
        class="line"
        :style="{
          background: bgList[item.item.$index % 6],
        }"
      ></div>
      <div class="title">{{ item.item.name }}</div>
      <div
        class="content"
        v-for="(item2, index) in item.item.children"
        :key="index"
      >
        {{ item2.title }}
      </div>
    </div>
  </template>
</water-fall>

属性
- span
  列与列之间的间隔，单位为px
- row
  分成多少列
方法
- add
  添加数据
- clear
  清除数据
slot
- item
  对应的某一条数据
- $index
  数据的索引

数字滚动效果组件
```
<num-change
  height='48px'
  :number="num"
></num-change>
```
- 属性
  - height
    数字的高度
  - number
    要显示的值

验证码输入弹框

<verification-code-dialog @cancel='cancle' @commit='commit' v-if='codeShow'>
</verification-code-dialog>

属性
- placeholder
  提示
事件
- commit 确定，参数为输入值
- cancle
  取消

查看详情时保持列表页滚动位置组件

//main.js
import { remeberPrevPosition } from 'ty-vue-components'
Vue.use(remeberPrevPosition)

//页面跳转的前一刻
import { remeberPrevPosition } from 'ty-vue-components'
remeberPrevPosition.add(this.$route.name)

//例子
import { remeberPrevPosition } from 'ty-vue-components'
//...其他代码
lookDetail (data) {
  remeberPrevPosition.add(this.$route.name)
  let url = '/examineEntry'
  this.$router.push({
    path: url,
    query: {
      // item: data,
      id: data.id,
    },
  })

},

刷新上一个被返回的页面

//main.js
import { refreshPrevPage } from 'ty-vue-components'
Vue.use(refreshPrevPage)

//页面跳转的前一刻
import { refreshPrevPage } from 'ty-vue-components'
refreshPrevPage.add(this.$route.name)

//例子
import { refreshPrevPage } from 'ty-vue-components'
//...其他代码
lookDetail (data) {
  refreshPrevPage.add(this.$route.name)
  let url = '/examineEntry'
  this.$router.push({
    path: url,
    query: {
      // item: data,
      id: data.id,
    },
  })

},

directive 指令
- focus 自动聚焦
```
<input v-focus/>
```
filter 过滤器
```
<span>{{data|currencyFormat}}</span>
<input :value="data|currencyFormat">
```
span、input的内容显示为currencyFormat的返回值，参数为data。
现有方法如下：
- currencyFormat 金额格式化方法
- formatDate 日期格式化方法 YYYY-MM-DD
- midHide 隐藏中间内容： 131****7235
- convertCurrency 金额大写
- bankNumberFormat 格式化银行卡账号返回由空格隔开的银行卡号码：1111 2222 3323 3432 2434