dataV 自定义组件开发（个人信息展示 自动轮播）

组件开发快速入门（Node版本在 8.0.0 及以上，10.12.0以下）

安装开发工具：npm install --registry=https://registry.npm.taobao.org datav-cli -g

查看datav版本：datav --version

cd 项目路径

datav run //运行项目

主要操作package.json和index.js文件

具体点击这里 

index.js

var Event = require('bcore/event');
var $ = require('jquery');
var _ = require('lodash');
//var Chart = require('XXX');

/**
 * 马良基础类
 */
module.exports = Event.extend(function Base(container, config) {
  this.config = {
    theme: {}
  }
  $(container).attr('id',"idname")
  this.container = $(container);           //容器
  this.apis = config.apis;                 //hook一定要有
  this._data = null;                       //数据
  this.chart = null;                       //图表
  this.init(config);
}, {
  /**
   * 公有初始化
   */
  init: function (config) {
    //1.初始化,合并配置
    this.mergeConfig(config);
    //2.刷新布局,针对有子组件的组件 可有可无
    this.updateLayout();
    //3.子组件实例化
    //this.chart = new Chart(this.container[0], this.config);
    //4.如果有需要, 更新样式
    this.updateStyle();
  },
  /**
   * 绘制
   * @param data
   * @param options 不一定有
   * !!注意: 第二个参数支持config, 就不需要updateOptions这个方法了
   */
  render: function (data, config) {
    data = this.data(data);
    var cfg = this.mergeConfig(config);
    //更新图表
    //this.chart.render(data, cfg);
    var h;
    //更新图表
    //this.chart.render(data, cfg);
    console.log( 4444,config);
    console.log(3333,data.num);
    if(config){
      this.container.html(null)
      const k= 100/config.num;
      for(let i = 0;i<config.array.length;i++){
        h=Math.ceil(config.array.length/config.num);
        this.container.append(`<div style="display: flex; width: ${k}%;height: 30%;" >
            <span style="width: 50%"><img width="100%" src='${config.array[i].imgUrl}' alt=""></span> 
           <div style="width: 50%"> 
               <div>姓名:${config.array[i].userName}</div> 
                <div>手机号:${config.array[i].mobile}</div> 
            </div> 
        </div>`
        )
      }
    }else if(data){
      this.container.html(null);
      const k= 100/data.num;
      for(let i = 0;i<data.array.length;i++){
        h=Math.ceil(data.array.length/data.num);
        this.container.append(`<div style="display: flex;width: ${k}%;height: 30%;" >
            <span style="width: 50%"><img width="100%" src='${data.array[i].value}' alt=""></span> 
           <div style="width: 50%"> 
               <div>姓名:${data.array[i].name}</div> 
                <div>手机号:${data.array[i].phone}</div> 
            </div> 
        </div>`
        )
      }
    }
    //如果有需要的话,更新样式
    this.updateStyle();
    var rolls = {
      currentY: 0,//滚动的总距离
      times: 0,//滚动一次的步长
      many: 0,//滚动次数
      MAX: 4,//滚动的总次数
      STEP: 100,//滚动一次的总步长
      ONCE: 20,//滚动一步的时间，注意ONCE*STEP<TIME
      TIME: 3000,//滚动一次的时间间隔
      INIT: function () {
        setInterval(function () {
          var container = document.getElementById("idname");
          if (rolls.many < rolls.MAX) {
            var timer;
            timer = setInterval(function () {
              if (rolls.times < rolls.STEP) {
                rolls.currentY--;
                container.style.marginTop = rolls.currentY + 'px';
                rolls.times++;
              } else {
                clearInterval(timer);
                rolls.times = 0;
              }
            }, rolls.ONCE);
            rolls.many++;
            // console.log(rolls.many);
          } else {
            rolls.many = 0;
            rolls.currentY = 0;
            container.style.marginTop = rolls.currentY + 'px';
          }
        }, rolls.TIME);
      },
    }
    console.log(112,h);
    if(h>3) {
      rolls.INIT();
    }
    //如果有需要的话,更新样式
    this.updateStyle();
  },
  /**
   *
   * @param width
   * @param height
   */
  resize: function (width, height) {
    this.updateLayout(width, height);
    //更新图表
    //this.chart.render({
    //  width: width,
    //  height: height
    //})
  },
  /**
   * 每个组件根据自身需要,从主题中获取颜色 覆盖到自身配置的颜色中.
   * 暂时可以不填内容
   */
  setColors: function () {
    //比如
    //var cfg = this.config;
    //cfg.color = cfg.theme.series[0] || cfg.color;
  },
  /**
   * 数据,设置和获取数据
   * @param data
   * @returns {*|number}
   */
  data: function (data) {
    if (data) {
      this._data = data;
    }
    return this._data;
  },
  /**
   * 更新配置
   * 优先级: config.colors > config.theme > this.config.theme > this.config.colors
   * [注] 有数组的配置一定要替换
   * @param config
   * @private
   */
  mergeConfig: function (config) {
    if (!config) {return this.config}
    this.config.theme = _.defaultsDeep(config.theme || {}, this.config.theme);
    this.setColors();
    this.config = _.defaultsDeep(config || {}, this.config);
    return this.config;
  },
  /**
   * 更新布局
   * 可有可无
   */
  updateLayout: function () {},
  /**
   * 更新样式
   * 有些子组件控制不到的,但是需要控制改变的,在这里实现
   */
  updateStyle: function () {
    var cfg = this.config;
    this.container.css({
      'font-size': cfg.size + 'px',
      'color': cfg.color || '#fff',
      'display': 'flex',
      'flex-wrap': 'wrap',
      'margin-top': '10px',
    });
    this.container.parent().css({
      'overflow': 'hidden'
    })
  },
  /**
   * 更新配置
   * !!注意:如果render支持第二个参数options, 那updateOptions不是必须的
   */
  //updateOptions: function (options) {},
  /**
   * 更新某些配置
   * 给可以增量更新配置的组件用
   */
  //updateXXX: function () {},
  /**
   * 销毁组件
   */
   destroy: function(){console.log('请实现 destroy 方法')}
});

package.json 

{
  "name": "@namespace/card",//这里card换成自己的项目名称
  "version": "0.0.1",
  "dependencies": {
    "bcore": "0.0.18",
    "jquery": "2.1.4",
    "lodash": "4.6.1"
  },
  "datav": {
    "cn_name": "卡片",
    "icon": "",
    "protocol": 2,
    "type": [
      "regular"
    ],
    "view": {
      "width": "600",
      "height": "300",
      "minWidth": "200",
      "minHeight": "100"
    },
    "apis": {
      "source": {
        "handler": "render",
        "description": "接口描述",
        "fields": {
          "value": {
            "description": "值说明"
          }
        }
      }
    },
    "config": {
      "num": {
        "name": "行数",
        "type": "number",
        "step": 1,
        "default": 4
      },
      "array": {
        "name": "数据系列",
        "type": "array",
        "default": [
          {
            "userName": "测试",
            "mobile": 13200000000,
            "imgUrl": "https://bkimg.cdn.bcebos.com/pic/eaf81a4c510fd9f9d72a2d09cd60c32a2834349b0e37?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UyNzI=,g_7,xp_5,yp_5/format,f_auto"
          }
        ],
        "child": {
          "name": "系列<%=i+1%>",
          "type": "object",
          "child": {
            "userName": {
              "name": "姓名",
              "type": "text",
              "default": ""
            },
            "mobile": {
              "name": "手机号",
              "type": "text",
              "default": null
            },
            "imgUrl": {
              "name": "图片地址",
              "type": "text",
              "default": ""
            }
          }
        }
      }
    },
    "api_data": {
      "source": {
        "array": [
          {
            "value": "https://tse1-mm.cn.bing.net/th/id/R-C.cac9668209d395fc580105a3eb4a094e?rik=ysSO6HOBOSpfqw&riu=http%3a%2f%2fp1.qhimg.com%2ft01c7e57f4c6f60261b.jpg&ehk=vT%2bQUlFMuLY8JHRFX7J%2bclF0OzfBYEZRyYCHfFtZDjI%3d&risl=&pid=ImgRaw&r=0",
            "name": "值",
            "phone": "15156797890"
          },
          {
            "value": "https://tse1-mm.cn.bing.net/th/id/R-C.cac9668209d395fc580105a3eb4a094e?rik=ysSO6HOBOSpfqw&riu=http%3a%2f%2fp1.qhimg.com%2ft01c7e57f4c6f60261b.jpg&ehk=vT%2bQUlFMuLY8JHRFX7J%2bclF0OzfBYEZRyYCHfFtZDjI%3d&risl=&pid=ImgRaw&r=0",
            "name": "值",
            "phone": "15156797890"
          },
          {
            "value": "https://tse1-mm.cn.bing.net/th/id/R-C.cac9668209d395fc580105a3eb4a094e?rik=ysSO6HOBOSpfqw&riu=http%3a%2f%2fp1.qhimg.com%2ft01c7e57f4c6f60261b.jpg&ehk=vT%2bQUlFMuLY8JHRFX7J%2bclF0OzfBYEZRyYCHfFtZDjI%3d&risl=&pid=ImgRaw&r=0",
            "name": "值",
            "phone": "15156797890"
          },
          {
            "value": "https://tse1-mm.cn.bing.net/th/id/R-C.cac9668209d395fc580105a3eb4a094e?rik=ysSO6HOBOSpfqw&riu=http%3a%2f%2fp1.qhimg.com%2ft01c7e57f4c6f60261b.jpg&ehk=vT%2bQUlFMuLY8JHRFX7J%2bclF0OzfBYEZRyYCHfFtZDjI%3d&risl=&pid=ImgRaw&r=0",
            "name": "值",
            "phone": "15156797890"
          },
          {
            "value": "https://tse1-mm.cn.bing.net/th/id/R-C.cac9668209d395fc580105a3eb4a094e?rik=ysSO6HOBOSpfqw&riu=http%3a%2f%2fp1.qhimg.com%2ft01c7e57f4c6f60261b.jpg&ehk=vT%2bQUlFMuLY8JHRFX7J%2bclF0OzfBYEZRyYCHfFtZDjI%3d&risl=&pid=ImgRaw&r=0",
            "name": "值",
            "phone": "15156797890"
          }
        ],
        "num":3
      }
    }
  }
}

 结果如下 

 项目打包上传

可以选择多种上传方式：登录datav账号直接datav publish就可以上传组件到服务器

我这里使用的是另外一种方式

控制台->我的资产->我的组件包->新建组件包 按要求和提示创建组件包等待组件包审核

执行datav package生成压缩包

 将压缩包上传到组件包中

上传注意事项

打包时package.json的名称要和组件包的名称相同否则上传不成功

 上传成功后可以在全部资产  其他  这里的卡片就是上传成功的组件包可以直接拖到页面使用 

预览效果

这里只放了5个信息一行3个超出3行会自动滚动

 踩坑记录：

只能选择容器内的dom操作，我在

添加了超出隐藏，使用的时候不能正常显示，因为操作了container的父元素

具体查看