vccbcomponent v1.1.82

vccbcomponent

安装

npm i vccbcomponent  -S
注：因引用了element-ui 使用前请引入element-ui

引入方法

在main.js中引入代码

import vCcb from 'vCcbComponent'
Vue.use(vCcb)

引入样式

1.首先安装样式依赖 
npm install -s -d less less-loader(本作样式使用的less,因此需要安装less的依赖)
2.在main.js中插入以下代码
import 'vccbcomponent/src/view/less/main.less'即可
如需覆盖样式 在本地创建 xxx.less 在文件中插入代码
@charset "UTF-8";
XXXX(在此处覆盖样式)

@import "vccbcomponent/src/view/less/main.less";

滚动图片控件（vScrollPictures）使用方法

使用数据源：
数据源：url   params(json数据){ areaCode:'410522',other:'dfsdf'}
数据返回格式
 { BK_STATUS:'00',DATA:{ topPhote:[
 { news_title: '新变化', top_photo: test1,news_id:'11,clickLink:'http://www.baidu.com' }
     ,{ news_title: '新变化', top_photo: test1,news_id:'11,clickLink:'http://www.baidu.com' }]}}
示例：
<v-scroll-pictures :data="carouselNews" title="新闻动态" :title-enable="true" @toPath="(val)=>toPath(2,val)></v-scroll-pictures>

参数：
    使用数据源的话：请根据数据格式返回数据如下：
    BK_STATUS: 00 成功：其他：失败
    data:为控件传递数据的地方 josn格式:
        { news_title: '新变化', top_photo: test1,news_id:'11,clickLink:'http://www.baidu.com' }
            news_title：图片的上阴影高亮文字
            top_photo：显示图片
            news_id:图片id供点击回调使用
            clickLink:为空时，触发回调toPath事件，不为空时直接跳转指定url
    title:控件tag标签
    title-enable：控件tag标签是否显示
回调：当数据clickLink为空是触发，toPath 返回一个参数news_id:使用者可根据news_id做相应操作

带tag的图片控件（vBrightModule）使用方法

使用数据源：
数据源：url   params(json数据)
数据返回格式
 { BK_STATUS:'00',DATA:{title:'标题','content':'文字',color:'标签颜色',clickLink:'http://www.baidu.com'}}
示例：
<v-bright-module :img-url="testSrc" title="专家观点" content="听专家分析土地流转的收益"  @toPage="()=>toPathMore('02')"></v-bright-module>

参数：
    imgUrl:数据源时
    title：控件tag标签
    content：图片的上阴影高亮文字,
    color:标签颜色支持3种 blue， yellow， green，
    clickLink:为空时，触发回调toPage事件，不为空时直接跳转指定url
回调：toPage 不带参数的回调函数，仅提供点击时间回调，用户可自定义操作类型

带tag的图片控件（vBrightModuleGroup）使用方法

vBrightModuleGroup：是展示固定3个组件 如需使用数据源请保证数据源返回数据至少3个
数据源：url   params(json数据)
数据返回格式
{ BK_STATUS:'00',DATA:{ list:[{title:'标题','content':'文字',color:'标签颜色',clickLink:'http://www.baidu.com'}] } }
示例：
<v-bright-module :img-url="testSrc" title="专家观点" content="听专家分析土地流转的收益"  @toPage="()=>toPathMore('02')"></v-bright-module>
返回参数：{ BK_STATUS:'00',DATA:{title:'标题','content':'文字',color:'标签颜色',clickLink:'http://www.baidu.com'}}
参数：
    imgUrl:数据源时
    title：控件tag标签
    content：图片的上阴影高亮文字,
    color:标签颜色支持3种 blue， yellow， green，
    clickLink:为空时，触发回调toPage事件，不为空时直接跳转指定url
回调：toPage 不带参数的回调函数，仅提供点击时间回调，用户可自定义操作类型

展示导航组（vGuideGroup）

示例：
 <v-guide-group title="办事指南" :data="guideData" @tagToPage="(tag)=>tagToPathMore(tag)"></v-guide-group>
  参数：
      title：控件组标题
      data：json 格式：
      [{title: '涉农服务',content: '提升农业用地的价值', imgUrl: slfw, tag: 'slfw',
      fucItem: [{ fucName: '农业技术咨询',  fucIcon: lyzx ,clickLink:'http://www.baidu.com'},{ fucName: '农业气象站',fucIcon: lyqxz },
             { fucName: '劳动市场',  fucIcon: ldsc ,clickLink:'http://www.baidu.com'},{fucName: '农业维修咨询', fucIcon: lywxzx}]}]
            参数解释：title:控件上半部图片标题
                      content：  控件上半部图片内容
                      imgUrl:图片地址
                      tag：供点击回调使用
                      fucItem:控件下半部展示文字和图片
                      fucName:名称
                      fucIcon:名称对应图片
                       clickLink:为空时，触发回调toPath事件，不为空时直接跳转指定url
  回调：tagToPage 带参数tag，点击后返回
         

展示导航单个（vGuideItem）

示例：
 <v-guide-item :data="item" @toPage="tagToPage"></v-guide-item>  
  参数：
       data：josn数据，格式：
       { fucName: '农业技术咨询',  fucIcon: lyzx ,clickLink:'http://www.baidu.com'},{ fucName: '农业气象站',fucIcon: lyqxz },
                    { fucName: '劳动市场',  fucIcon: ldsc },{fucName: '农业维修咨询', fucIcon: lywxzx}]}
           参数解释同上
  回调：toPage：点击事件回调

新闻查询（vNewsGroup,vNewsItem）结合使用查询地区新闻

示例：
<v-news-group area-code="1111"></v-news-group>
<v-news-item types="01" :area-code="areaCode"></v-news-item>
  参数：
  types:根据不不同的新闻类型展示新闻 
        国家农业新闻:00;地方工作报道:01;专家观点:02;经验分享:09
  areaCode:该地区的地域编号
  回调：无

主页组件（vDashboard）

示例：
<v-dashboard :area-code="areaCode"></v-dashboard>
  参数：
  areaCode:根据不不同的地区编码反显主页
  回调：无

集合组件已有数据（vBrightModuleGroup）

示例：
 <v-bright-module-group ></v-bright-module-group>
  参数：无
  回调：无