引入方式

• 按需引入

  依赖 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