组件开发快速入门(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的父元素