vant-plus v1.2.5

vant-plus

针对移动端增加的公共组件库和自定义指令，有些组件是基于vant的增强功能组件

安装

npm install vant-plus -S

引入VantPlus

完整引入

import Vue from 'vue'
import VantPlus from 'vant-plus'
import 'vant-plus/lib/vant-plus.css'
Vue.use(VantPlus)

new Vue({
  el: '#app',
  render: h => h(App)
})

按需引入

  import {
        Line,//下滑线自定义指令
        FieldTip,//输入框提示上移自定义指令
        VlpButton,//防抖按钮
        VlpCalendar,//日历
        VlpSearch,//增加防抖，节流功能，通过接口自动搜索组件
        VlpList,//下拉刷新，上拉加载，通过接口自动列表组件
        VlpDetail//key:value显示方式组件
  } from 'vant-plus'
  
  Vue.use(Line)
  Vue.use(FieldTip)
  Vue.use(VlpButton)
  Vue.use(VlpCalendar)
  Vue.use(VlpSearch)
  Vue.use(VlpList)
  Vue.use(VlpDetail)

组件使用说明

搜索组件：vlp-search

1、引入指令

import {VlpSearch} from 'vant-plus'

2、局部注册

components: {
    VlpSearch
  }

3、全局注册

Vue.use(VlpSearch)

4、属性

5、事件

6、使用示例

 <vlp-search
   class="search-class"
   v-model="searchValue"
   :tipInterface="searchListInterface"
   placeholder="搜索名称"
  :historyList="historyList"
  :autoHidden="false"
  :displayVisible = "true"
  :autoShowHistory="true"
  @search="searchFun"
  @cancel="cancel"
  @deleteHistory="deleteHistory">
   </vlp-search>

import {  VlpSearch } from 'vant-plus'
export default {
  components: {
    VlpSearch
  },
  data() {
    return {
      searchListInterface: searchList,
      searchValue: '',
      visible: false,
      historyList: ['中国', '阿斯利康大家发生的'],
    }
  },
  methods: {
   searchFun(v) {
      this.parameter = { name: v }
      console.log('searchFun', v)
    },
    cancel() {
      this.$router.go(-1)
    },
    deleteHistory() {
      this.historyList = []
    }
  }
}

列表组件：vlp-list

支持下拉刷新，上拉加载，传入接口可以自动查询，list子项中留有插槽，可以设置自定义cart显示list中的内容. 不可自动加载数据时外部参数没有内容将不查询

1、引入指令

import {VlpList} from 'vant-plus'

2、局部注册

components: {
    VlpList
  }

3、全局注册

Vue.use(VlpList)

4、属性

• interfaceFun接口返回的数据格式 { code:0//返回码 msg:''//返回的信息 result:{//返回的结果 pageNum:1,//当前页 total:10,//总条数 list:[],//列表数据 pages:1//共几页 } }
• 搜索时，建议设置：autoLoad=false

5、插槽slot

6、使用示例

 <vlp-list
  :interface-fun="searchList"
  :columns = "columns"
  :parameter = "parameter"
  >
   <template v-slot="list">
      <Card v-for="(item,index) in list" :key="index" :card-data="item" :label-columns='columns'>
      </Card>
    </template>
  </vlp-list>

import {  VlpList } from 'vant-plus'
import LabelColumns from 'columns'
import Card from '../components/card'
export default {
  components: {
    VlpList,
    Card
  },
  data() {
    return {
      searchListInterface: searchList,
      searchValue: '',
      visible: false,
      columns:LabelColumns,
      parameter:{id:1}
    }
  },
  methods: {
    searchFun(v) {
      console.log('searchFun...', v)
    }
  }
}

7、对应字段格式

//columns.js
// card
const cardLabel = [
  { name: 'actiontype', alias: 'tip', className: 'tip1' },
  { name: 'name', alias: 'title' ,tip:[`<span style='color:red'>tip</span>`]},
  { name: 'type', alias: 'subtitle', className: 'subtitle1' },
  { alias: 'list',
    list: [
      { label: '单号', name: 'actiontype' },
      { label: '日期', name: 'date' }
    ]
  },
  { alias: 'buttons',
    list: [
      { label: '去预约',
        callback: function(params){
          this.$router.push({ path: '/HelloWorld', params: params})
        }
      },
      { label: '重新派单',
        callback: function(params) {
          this.$router.push({ path: '/HelloWorld', params: params})
        }
      }
    ] }
]

export default {
  cardLabel
}

export {
  cardLabel
}

//interface.js

export function ListObj(params) {
  console.log('searchListObj', params)
  return new Promise(resolve => {
    resolve({
      code: 0,
      msg: 'success',
      result: {
        pageNum: 1,
        pageSize: 10,
        pages: 1,
        total: 5,
        list: [
          {
            actiontype: '任务1',
            name: '安徽牛肉拉面',
            type: '微辣',
            danhao: 'SS2019091100001',
            date: 1572331173000

          },
          {
            actiontype: '维护2',
            name: '大盘鸡鸡蛋面',
            type: '不辣',
            danhao: 'SS2018091100001',
            date: 1572331100000

          },
          {
            actiontype: '任务3',
            name: '大盘鸡鸡蛋面3',
            type: '不辣',
            danhao: 'SS2019091100001',
            date: 1572331173000

          },
          {
            actiontype: '维护4',
            name: '大盘鸡鸡蛋面4',
            type: '微辣',
            danhao: 'SS2018091100001',
            date: 1572331100000

          },
          {
            actiontype: '任务5',
            name: '大盘鸡鸡蛋面5',
            type: '不辣',
            danhao: 'SS2019091100001',
            date: 1572331173000

          },
        ]
      }
    })
  });
}

搜索组件：vlp-detail

1、引入指令

import {VlpDetail} from 'vant-plus'

2、局部注册

components: {
    VlpDetail
  }

3、全局注册

Vue.use(VlpDetail)

4、属性

5、数据格式

[ {label:'姓名',name:'name',value:'',tip:'tip'}//若存在tip增加tip的html内容 ]

6、使用示例

<vlp-detail :data="data"></vlp-detail>

import {  VlpDetail } from 'vant-plus'
export default {
 name: 'VlpCard',
 components: {
   Detail
 },
 data(){
   return {
     data:[
       {label:'姓名',name:'name',value:'姓名',tip:['<span style="color:red">tip</span>']},
       {label:'性别',name:'sex',value:'性别',tip:['<span style="color:red">tip1</span>']}
     ]
   }
 }
}

处理对应字段方法handleListInfo

处理方法

  import {handleListInfo,VlpDetail} from 'vant-plus'
  import LabelColumns from 'cloumns.js'
  const cardData = {
            actiontype: '安装任务1',
            name: '北京房朝阳区一店1',
            type: '药店',
            danhao: 'SS2019091100001',
            date: 1572331173000

      }

export default { components: { VlpDetail }, data() { return { data: {} } }, beforeMount() { this.data = handleListInfo(LabelColumns, cardData) // console.log('beforeMount cardData...', this.data) }

} handleListInfo(cardLabel,DTO)

### 防抖按钮：vlp-button
 #### 1、引入指令

import {VlpButton} from 'vant-plus'

 #### 2、局部注册

components: { VlpButton }

 #### 3、全局注册

Vue.use(VlpButton)

 #### 4、属性
 | 参数 | 说明 | 类型 | 是否必填| 默认值|
|------|------------|------------|----------|----|
| type  | 类型，可选值为 primary info warning danger  | String | false | 'default' |
| size  | 尺寸，可选值为 large small mini | String| false | 'normal' |
| text  | 按钮文字  | String | false | |
| color  | 按钮颜色，支持传入linear-gradient渐变色 | String| false |  |
| icon  | 左侧图标名称或图片链接  | String | false | |
| tag  | HTML 标签 | String| false |  |
 #### 5、事件
| 参数 | 说明 | 类型 |
|------|------------|------------|----------|----|
| click  | 点击  | 
#### 6、插槽
| 参数 | 说明 | 类型 |
|------|------------|------------|----------|----|
| slot  | 按钮直接的内容 | 

#### 7、使用示例

```html
<vlp-button @click="click">查询</vlp-button>

import {  VlpButton } from 'vant-plus'
export default {
  components: {
    VlpButton
  },
  methods: {
    click() {
      console.log('click...')
    }
  }
}

日历组件：vlp-calendar

1、引入指令

import {VlpCalendar} from 'vant-plus'

2、局部注册

components: {
    VlpCalendar
  }

3、全局注册

Vue.use(VlpCalendar)

4、属性

5、事件

6、使用示例

<vlp-calendar
    ref="Calendar"
    @choseDay="clickDay"
    @isToday="clickToday"
    @changeMonth="changeDate"
    :agoDayHide="limitDate"
    :isShowBtn="isShowBtn"
    :isShowCalendar="isShowCalendar"
    :operatorDate = "operatorDate"
    :markDateMore="markDate"
    :todayBack="按钮内容"
    :isWeek="false"
    />

import {  VlpCalendar } from 'vant-plus'
export default {
  components: {
    VlpCalendar
  },
  // 时间转10位时间戳
  created() {
    this.limitDate = Math.round((new Date().getTime() - (24 * 60 * 60 * 1000)) / 1000).toString()
  },
  methods: {
    // 调接口获取有待办事项的数据   下期再加mark1
    // getQuery() {
    //   this.markDate = [{ date: '2019/11/01', className: 'mark1' }, { date: '2019/10/29', className: 'mark1' }]
    // },
    clickToday(v) {
      this.todayDate = v
    },
    clickDay(v) {
      if (v.calendarDate !== this.todayDate) {
        this.isShowBtn = true
      } else {
        this.isShowBtn = false
      }
      this.chDate = v.calendarDate
    },
    changeDate(v) {

    }
  }
}

步骤组件：vlp-steps

1、引入指令

import {VlpSteps} from 'vant-plus'

2、局部注册

components: {
    VlpSteps
  }

3、全局注册

Vue.use(VlpSteps)

4、属性

5、data属性说明

• style中可以设置line和icon的样式如：

  style: {
      icon: {
        color: '#F77200',
        fontSize:'18px'
      },
      line: {
        background:'#23C2B7'
      }
  }

6、使用示例

   <vlp-steps :data="item" :end="data.length===(index+1)" v-for="(item,index) in data" :key="index">
     <div class="title">{{item.title}} <span style="color:#23C2B7">{{item.title | filterTitle}}</span></div>
     <div class="detail" v-for="(d,index) in item.list" :key="index">{{d}}</div>
   </vlp-steps>

import {  VlpSteps } from 'vant-plus'
export default {
 name: 'VlpSteps',
 components: {
   VlpSteps
 },
  data() {
   return {
     data: [{
       title: '标题1',
       status: 'warning',
       style: {
         icon: {
           color: '#F77200',
           fontSize: '18px'
         },
         line: {
           background: '#23C2B7'
         }
       },
       list: [
         '告警',
         '2019-03-12 22:12'
       ]
     },
     {
       title: '标题2',
       status: 'pass',
       icon: 'checked',
       style: {
         icon: {
           color: '#23C2B7'
         }
       },
       list: [
         '审核通过',
         '2019-03-15 22:12'
       ]
     },
     {
       title: '标题3',
       checked: 'wait',
       icon: 'warning',
       list: [
         '等待审核',
         '二级审核通过',
         '2019-03-19 22:12'
       ]
     }
     ]
   }
 },
 filters: {
   filterTitle: function(v) {
     return v === '标题1' ? '副标题' : ''
   }
 }
}
}

步骤组件：vlp-touch

上下滑动触发加载

1、引入指令

import {VlpTouch} from 'vant-plus'

2、局部注册

components: {
    VlpTouch
  }

3、全局注册

Vue.use(VlpTouch)

4、属性

5、事件

6、使用示例

    <vlp-touch
     :target="target"
     :loading="loading"
     :finished="finished"
     :error="error"
     pullDirection="up"
     @load="load">
   <div
        id="aa"
        style="width:100%;height:500px;overflow:auto">
           <span v-for="(item,index) in data" :key = index>{{item}}<br/>></span>
        </div>
 </vlp-touch>

import {  VlpTouch } from 'vant-plus'
export default {
 components: {
   VlpTouch
 },
 data() {
   return {
     target: {},
     data: [],
     loading: false,
     count: 0,
     finished: false,
     error: false
   }
 },
 created() {
   this.data = Array(50).fill('内容')
 },
 mounted() {
   this.target = document.getElementById('aa')
 },
 methods: {
   load() {
     this.loading = true
     setTimeout(() => {
       console.log('加载。。')
       this.loading = false
       if (this.count === 3) this.error = true
       this.count++
       if (this.count === 4) this.finished = true
     }, 1000)
   }
 }
}