gongzijian
6 years ago
381 changed files with 100 additions and 45085 deletions
@ -0,0 +1,53 @@ |
|||||||
|
Easy Scheduler Release 1.0.3 |
||||||
|
=== |
||||||
|
Easy Scheduler 1.0.3是1.x系列中的第四个版本。 |
||||||
|
|
||||||
|
新特性： |
||||||
|
=== |
||||||
|
- [[EasyScheduler-254](https://github.com/analysys/EasyScheduler/issues/254)] 流程定义删除和批量删除 |
||||||
|
- [[EasyScheduler-347](https://github.com/analysys/EasyScheduler/issues/347)] 任务依赖增加“今日” |
||||||
|
- [[EasyScheduler-273](https://github.com/analysys/EasyScheduler/issues/273)]sql任务添加title |
||||||
|
- [[EasyScheduler-247](https://github.com/analysys/EasyScheduler/issues/247)]API在线文档 |
||||||
|
- [[EasyScheduler-319](https://github.com/analysys/EasyScheduler/issues/319)] 单机容错 |
||||||
|
- [[EasyScheduler-253](https://github.com/analysys/EasyScheduler/issues/253)] 项目增加流程定义统计和运行流程实例统计 |
||||||
|
- [[EasyScheduler-292](https://github.com/analysys/EasyScheduler/issues/292)] 启用SSL的邮箱发送邮件 |
||||||
|
- [[EasyScheduler-77](https://github.com/analysys/EasyScheduler/issues/77)] 定时管理、工作流定义添加删除功能 |
||||||
|
- [[EasyScheduler-380](https://github.com/analysys/EasyScheduler/issues/380)] 服务监控功能 |
||||||
|
- [[EasyScheduler-380](https://github.com/analysys/EasyScheduler/issues/382)] 项目增加流程定义统计和运行流程实例统计 |
||||||
|
|
||||||
|
增强： |
||||||
|
=== |
||||||
|
- [[EasyScheduler-192](https://github.com/analysys/EasyScheduler/issues/192)] 租户删除前可以考虑校验租户和资源 |
||||||
|
- [[EasyScheduler-376](https://github.com/analysys/EasyScheduler/issues/294)] 删除实例时候，没有删除对应zookeeper队列里的任务 |
||||||
|
- [[EasyScheduler-185](https://github.com/analysys/EasyScheduler/issues/185)] 项目删除工作流定义还存在 |
||||||
|
- [[EasyScheduler-206](https://github.com/analysys/EasyScheduler/issues/206)] 优化部署，完善docker化支持 |
||||||
|
- [[EasyScheduler-381](https://github.com/analysys/EasyScheduler/issues/381)] 前端一键部署脚本支持ubuntu |
||||||
|
|
||||||
|
修复： |
||||||
|
=== |
||||||
|
- [[EasyScheduler-255](https://github.com/analysys/EasyScheduler/issues/255)]子父流程全局变量覆盖，子流程继承父流程全局变量并可以重写 |
||||||
|
- [[EasyScheduler-256](https://github.com/analysys/EasyScheduler/issues/256)]子父流程参数显示异常 |
||||||
|
- [[EasyScheduler-186](https://github.com/analysys/EasyScheduler/issues/186)]所有查询中只要输入%会返回所有数据 |
||||||
|
- [[EasyScheduler-185](https://github.com/analysys/EasyScheduler/issues/185)]项目删除工作流定义还存在 |
||||||
|
- [[EasyScheduler-266](https://github.com/analysys/EasyScheduler/issues/266)]Stop process return: process definition 1 not on line |
||||||
|
- [[EasyScheduler-300](https://github.com/analysys/EasyScheduler/issues/300)] 超时告警时间单位 |
||||||
|
- [[EasyScheduler-235](https://github.com/analysys/EasyScheduler/issues/235)]nginx超时连接问题修复 |
||||||
|
- [[EasyScheduler-272](https://github.com/analysys/EasyScheduler/issues/272)]管理员不能生成token |
||||||
|
- [[EasyScheduler-272](https://github.com/analysys/EasyScheduler/issues/277)]save global parameters error |
||||||
|
- [[EasyScheduler-183](https://github.com/analysys/EasyScheduler/issues/183)]创建中文名称的Worker分组报错 |
||||||
|
- [[EasyScheduler-377](https://github.com/analysys/EasyScheduler/issues/377)]资源文件重命名只修改描述时会报名称已存在错误 |
||||||
|
- [[EasyScheduler-235](https://github.com/analysys/EasyScheduler/issues/235)]创建spark数据源，点击“测试连接”，系统回退回到登入页面 |
||||||
|
- [[EasyScheduler-83](https://github.com/analysys/EasyScheduler/issues/83)]1.0.1版本启动api server报错 |
||||||
|
- [[EasyScheduler-379](https://github.com/analysys/EasyScheduler/issues/379)]跨天恢复执行定时任务时，时间参数不对 |
||||||
|
- [[EasyScheduler-383](https://github.com/analysys/EasyScheduler/issues/383)]sql邮件不显示前面的空行 |
||||||
|
|
||||||
|
|
||||||
|
感谢： |
||||||
|
=== |
||||||
|
最后但最重要的是，没有以下伙伴的贡献就没有新版本的诞生： |
||||||
|
|
||||||
|
Baoqi, jimmy201602, samz406, petersear, millionfor, hyperknob, fanguanqun, yangqinlong, qq389401879, |
||||||
|
feloxx, coding-now, hymzcn, nysyxxg, chgxtony |
||||||
|
|
||||||
|
以及微信群里众多的热心伙伴！在此非常感谢！ |
||||||
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 550 B |
|
Before Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 434 KiB |
|
Before Width: | Height: | Size: 123 KiB |
|
Before Width: | Height: | Size: 7.8 KiB |
|
Before Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 586 B |
|
Before Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 2.3 KiB |
@ -1,7 +0,0 @@ |
|||||||
<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta http-equiv="Cache-Control" content="no-siteapp"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-title" content="标题"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="format-detection" content="telphone=no, email=no"><meta name="screen-orientation" content="portrait"><meta name="x5-orientation" content="portrait"><meta name="theme-color" content="#4a8dee"><meta name="msapplication-navbutton-color" content="#4a8dee"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><link rel="shortcut icon" href="/images/favicon.ico"><link href="/combo/1.0.0/base.css?v1.0.0.1" rel="stylesheet"><link href="/combo/1.0.0/3rd.css?v1.0.0.1" rel="stylesheet"><!--[if lt IE 9]> |
|
||||||
<script src="/combo/1.0.0/es5.js"></script> |
|
||||||
<![endif]--><script>let NODE_ENV = 'true'</script><title>EasyScheduler</title><link href="/css/common.8ba9af7.css" rel="stylesheet"><link href="/css/home/index.b444b91.css" rel="stylesheet"></head><body><div id="app"></div><div id="contextmenu" class="contextmenu"></div><div class="global-loading"><div class="svg-box"><svg class="lds-gears" width="54px" height="54px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: none;"><g transform="translate(50 50)"><g transform="translate(-19 -19) scale(0.6)"><g transform="rotate(107.866)"><animateTransform attributeName="transform" type="rotate" values="0;360" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform><path |
|
||||||
d="M37.3496987939662 -7 L47.3496987939662 -7 L47.3496987939662 7 L37.3496987939662 7 A38 38 0 0 1 31.359972760794346 21.46047782418268 L31.359972760794346 21.46047782418268 L38.431040572659825 28.531545636048154 L28.531545636048154 38.431040572659825 L21.46047782418268 31.359972760794346 A38 38 0 0 1 7.0000000000000036 37.3496987939662 L7.0000000000000036 37.3496987939662 L7.000000000000004 47.3496987939662 L-6.999999999999999 47.3496987939662 L-7 37.3496987939662 A38 38 0 0 1 -21.46047782418268 31.35997276079435 L-21.46047782418268 31.35997276079435 L-28.531545636048154 38.431040572659825 L-38.43104057265982 28.531545636048158 L-31.359972760794346 21.460477824182682 A38 38 0 0 1 -37.3496987939662 7.000000000000007 L-37.3496987939662 7.000000000000007 L-47.3496987939662 7.000000000000008 L-47.3496987939662 -6.9999999999999964 L-37.3496987939662 -6.999999999999997 A38 38 0 0 1 -31.35997276079435 -21.460477824182675 L-31.35997276079435 -21.460477824182675 L-38.431040572659825 -28.531545636048147 L-28.53154563604818 -38.4310405726598 L-21.4604778241827 -31.35997276079433 A38 38 0 0 1 -6.999999999999992 -37.3496987939662 L-6.999999999999992 -37.3496987939662 L-6.999999999999994 -47.3496987939662 L6.999999999999977 -47.3496987939662 L6.999999999999979 -37.3496987939662 A38 38 0 0 1 21.460477824182686 -31.359972760794342 L21.460477824182686 -31.359972760794342 L28.531545636048158 -38.43104057265982 L38.4310405726598 -28.53154563604818 L31.35997276079433 -21.4604778241827 A38 38 0 0 1 37.3496987939662 -6.999999999999995 M0 -23A23 23 0 1 0 0 23 A23 23 0 1 0 0 -23" |
|
||||||
fill="#0097e0"></path></g></g><g transform="translate(19 19) scale(0.6)"><g transform="rotate(229.634)"><animateTransform attributeName="transform" type="rotate" values="360;0" keyTimes="0;1" dur="1s" begin="-0.0625s" repeatCount="indefinite"></animateTransform><path |
|
||||||
d="M37.3496987939662 -7 L47.3496987939662 -7 L47.3496987939662 7 L37.3496987939662 7 A38 38 0 0 1 31.359972760794346 21.46047782418268 L31.359972760794346 21.46047782418268 L38.431040572659825 28.531545636048154 L28.531545636048154 38.431040572659825 L21.46047782418268 31.359972760794346 A38 38 0 0 1 7.0000000000000036 37.3496987939662 L7.0000000000000036 37.3496987939662 L7.000000000000004 47.3496987939662 L-6.999999999999999 47.3496987939662 L-7 37.3496987939662 A38 38 0 0 1 -21.46047782418268 31.35997276079435 L-21.46047782418268 31.35997276079435 L-28.531545636048154 38.431040572659825 L-38.43104057265982 28.531545636048158 L-31.359972760794346 21.460477824182682 A38 38 0 0 1 -37.3496987939662 7.000000000000007 L-37.3496987939662 7.000000000000007 L-47.3496987939662 7.000000000000008 L-47.3496987939662 -6.9999999999999964 L-37.3496987939662 -6.999999999999997 A38 38 0 0 1 -31.35997276079435 -21.460477824182675 L-31.35997276079435 -21.460477824182675 L-38.431040572659825 -28.531545636048147 L-28.53154563604818 -38.4310405726598 L-21.4604778241827 -31.35997276079433 A38 38 0 0 1 -6.999999999999992 -37.3496987939662 L-6.999999999999992 -37.3496987939662 L-6.999999999999994 -47.3496987939662 L6.999999999999977 -47.3496987939662 L6.999999999999979 -37.3496987939662 A38 38 0 0 1 21.460477824182686 -31.359972760794342 L21.460477824182686 -31.359972760794342 L28.531545636048158 -38.43104057265982 L38.4310405726598 -28.53154563604818 L31.35997276079433 -21.4604778241827 A38 38 0 0 1 37.3496987939662 -6.999999999999995 M0 -23A23 23 0 1 0 0 23 A23 23 0 1 0 0 -23" |
|
||||||
fill="#7f8b95"></path></g></g></g></svg> <span class="sp1">Loading ...</span></div></div><script src="/combo/1.0.0/3rd.js?v1.0.0.1"></script><script src="/js/common.3af51f0.js"></script><script src="/js/home/index.574a699.js"></script></body></html> |
|
||||||
@ -1,2 +0,0 @@ |
|||||||
webpackJsonp([47],{221:function(e,t,o){"use strict";t.__esModule=!0;var s=i(o(36)),n=i(o(25));function i(e){return e&&e.__esModule?e:{default:e}}t.default={name:"login-model",data:function(){return{spinnerLoading:!1,userName:"",userPassword:"",isUserName:!1,isUserPassword:!1,userNameText:"",userPasswordText:""}},props:{},methods:{_ok:function(){var e=this;this._verification()&&(this.spinnerLoading=!0,this._gLogin().then(function(t){setTimeout(function(){e.spinnerLoading=!1,"admin"===e.userName?window.location.href="/#/security/tenant":window.location.href="/#/home"},1e3)}).catch(function(t){e.userPasswordText=t.msg,e.isUserPassword=!0,e.spinnerLoading=!1}))},_verification:function(){var e=!0;return this.userName||(this.userNameText=""+s.default.$t("Please enter user name"),this.isUserName=!0,e=!1),this.userPassword||(this.userPasswordText=""+s.default.$t("Please enter your password"),this.isUserPassword=!0,e=!1),e},_gLogin:function(){var e=this;return new Promise(function(t,o){n.default.post("login",{userName:e.userName,userPassword:e.userPassword},function(e){t(e)}).catch(function(e){o(e)})})}},watch:{userName:function(){this.isUserName=!1},userPassword:function(){this.isUserPassword=!1}},created:function(){},mounted:function(){}}},24:function(e,t){e.exports=Vue},30:function(e,t){e.exports=_},598:function(e,t,o){"use strict";var s=l(o(71)),n=l(o(24)),i=l(o(599)),r=l(o(36));o(219);var a=l(o(220));function l(e){return e&&e.__esModule?e:{default:e}}o(604),n.default.use(a.default),n.default.config.devtools=!0,n.default.config.productionTip=!0,n.default.config.silent=!0,new n.default({el:"#app",render:function(e){return e(i.default)},mounted:function(){},methods:{initApp:function(){var e=s.default.fn.tooltip.noConflict();s.default.fn.tooltip=e,(0,s.default)("body").tooltip({selector:'[data-toggle="tooltip"]',trigger:"hover"}),r.default.init()}},created:function(){this.initApp()}})},599:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var s=o(221),n=o.n(s);for(var i in s)"default"!==i&&function(e){o.d(t,e,function(){return s[e]})}(i);var r=o(603);var a=function(e){o(600)},l=o(29)(n.a,r.a,!1,a,null,null);t.default=l.exports},600:function(e,t,o){var s=o(601);"string"==typeof s&&(s=[[e.i,s,""]]),s.locals&&(e.exports=s.locals);o(35)("44eee55a",s,!0,{})},601:function(e,t,o){var s=o(125);(e.exports=o(34)(!1)).push([e.i,".login-model{width:400px;min-height:260px;background:#fff;border-radius:3px;position:fixed;left:50%;top:50%;margin-left:-200px;margin-top:-200px;z-index:1;box-shadow:0 2px 25px 0 rgba(0,0,0,.3)}.login-model .text-1{padding-top:30px;margin-bottom:-6px}.login-model .text-1 a{width:280px;height:60px;display:block;background:url("+s(o(602))+");margin:0 auto}.login-model .from-model{padding:30px 20px}.login-model .from-model .list{margin-bottom:24px}.login-model .from-model .list>label{font-size:14px;display:block;height:24px;line-height:24px;font-weight:400;color:#333}.login-model .from-model .list>.error{font-size:12px;color:red;padding-top:6px}.login-model .from-model .list:last-child{margin-bottom:6px}.login-model .ctr{width:400px;text-align:center;position:absolute;left:0;bottom:-80px;color:#fff}",""])},602:function(e,t,o){e.exports=o.p+"images/login-logo.png?ddbe8d0df16b034ed1d2e2142c4c4233"},603:function(e,t,o){"use strict";var s={render:function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("div",{staticClass:"login-model"},[e._m(0),e._v(" "),o("div",{staticClass:"from-model"},[o("div",{staticClass:"list"},[o("label",[e._v(e._s(e.$t("User Name")))]),e._v(" "),o("div",[o("x-input",{attrs:{size:"large",type:"text",placeholder:e.$t("Please enter user name"),maxlength:"20"},on:{"on-enterkey":e._ok},model:{value:e.userName,callback:function(t){e.userName=t},expression:"userName"}})],1),e._v(" "),e.isUserPassword?o("p",{staticClass:"error"},[e._v("\n "+e._s(e.userNameText)+"\n ")]):e._e()]),e._v(" "),o("div",{staticClass:"list"},[o("label",[e._v(e._s(e.$t("Password")))]),e._v(" "),o("div",[o("x-input",{attrs:{type:"password",size:"large",placeholder:e.$t("Please enter your password"),maxlength:"20"},on:{"on-enterkey":e._ok},model:{value:e.userPassword,callback:function(t){e.userPassword=t},expression:"userPassword"}})],1),e._v(" "),e.isUserPassword?o("p",{staticClass:"error"},[e._v("\n "+e._s(e.userPasswordText)+"\n ")]):e._e()]),e._v(" "),o("div",{staticClass:"list",staticStyle:{"margin-top":"10px"}},[o("x-button",{attrs:{type:"primary",shape:"circle",size:"large",loading:e.spinnerLoading,long:""},on:{click:e._ok}},[e._v(e._s(e.spinnerLoading?"Loading...":" "+e.$t("Login")+" ")+" ")])],1)]),e._v(" "),o("div",{staticClass:"ctr"},[e._v("Copyright © 2019 Analysys Inc.")])])},staticRenderFns:[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"text-1"},[t("a",{attrs:{href:"javascript:"}})])}]};t.a=s},604:function(e,t){},71:function(e,t){e.exports=$}},[598]); |
|
||||||
//# sourceMappingURL=index.97eaebb.js.map
|
|
||||||
File diff suppressed because one or more lines are too long
@ -1,405 +0,0 @@ |
|||||||
|
|
||||||
# ana-charts |
|
||||||
|
|
||||||
echarts 扩展 |
|
||||||
|
|
||||||
## 安装 |
|
||||||
|
|
||||||
``` |
|
||||||
npm i @analysys/ana-charts |
|
||||||
``` |
|
||||||
|
|
||||||
## 特性 |
|
||||||
|
|
||||||
- 统一的数据结构 |
|
||||||
- 支持 ECharts 原生操作 |
|
||||||
|
|
||||||
## 快速开始 |
|
||||||
|
|
||||||
### 全量导入 |
|
||||||
|
|
||||||
```html |
|
||||||
<template> |
|
||||||
<div> |
|
||||||
<div id="chart" style="height:500px"></div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import Chart from '@analysys/ana-charts' |
|
||||||
|
|
||||||
export default { |
|
||||||
mounted () { |
|
||||||
Chart.line('#chart', [ |
|
||||||
{ key: 'Monday', value: 1 }, |
|
||||||
{ key: 'Tuesday', value: 2 }, |
|
||||||
{ key: 'Wednesday', value: 3 } |
|
||||||
]) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
``` |
|
||||||
|
|
||||||
### 按需导入 |
|
||||||
|
|
||||||
```html |
|
||||||
<template> |
|
||||||
<div> |
|
||||||
<div id="chart" style="height:500px"></div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import { Line } from '@analysys/ana-charts' |
|
||||||
|
|
||||||
export default { |
|
||||||
mounted () { |
|
||||||
Line.init('#chart', [ |
|
||||||
{ key: 'Monday', value: 1 }, |
|
||||||
{ key: 'Tuesday', value: 2 }, |
|
||||||
{ key: 'Wednesday', value: 3 } |
|
||||||
]) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
``` |
|
||||||
|
|
||||||
## APIs |
|
||||||
|
|
||||||
### 一般用法 |
|
||||||
|
|
||||||
``` js |
|
||||||
const myChart = Chart.line(el, data, options) |
|
||||||
// const myChart = Chart.bar(el, data, options) |
|
||||||
// const myChart = Chart.pie(el, data, options) |
|
||||||
// const myChart = Chart.radar(el, data, options) |
|
||||||
// const myChart = Chart.funnel(el, data, options) |
|
||||||
// const myChart = Chart.scatter(el, data, options) |
|
||||||
|
|
||||||
// 刷新数据 |
|
||||||
myChart.setData(data) |
|
||||||
``` |
|
||||||
|
|
||||||
### 注入属性 |
|
||||||
|
|
||||||
``` js |
|
||||||
// 以 line 折线图为例，bar、funnel、pie、scatter 均可使用 |
|
||||||
Chart.line(el, data, { |
|
||||||
insertSeries: [ |
|
||||||
{ |
|
||||||
// index 可选 `all`，`start`，`end`，也可指定需要被注入的索引数组，如 [0, 2, 4] |
|
||||||
index: 'all', |
|
||||||
// 以下属性会被注入到指定的序列中 |
|
||||||
areaStyle: {} |
|
||||||
} |
|
||||||
] |
|
||||||
}) |
|
||||||
``` |
|
||||||
|
|
||||||
### ECharts 对象 |
|
||||||
|
|
||||||
> 初始化图表后返回的对象上保存了 ECharts 对象的引用，可以通过该属性来设置图表配置和监听事件 |
|
||||||
|
|
||||||
``` js |
|
||||||
const myChart = Chart.line(el, data, options) |
|
||||||
// 设置可配置项 |
|
||||||
myChart.echart.setOption({ |
|
||||||
// 与 ECharts 参考文档用法一致 |
|
||||||
}) |
|
||||||
``` |
|
||||||
|
|
||||||
### 折线图 |
|
||||||
|
|
||||||
#### 基本用法 |
|
||||||
|
|
||||||
``` js |
|
||||||
Chart.line('#chart', [ |
|
||||||
{ key: 'Monday', value: 1 }, |
|
||||||
{ key: 'Tuesday', value: 2 }, |
|
||||||
{ key: 'Wednesday', value: 3 }, |
|
||||||
... |
|
||||||
]) |
|
||||||
``` |
|
||||||
|
|
||||||
#### 多条折线图 |
|
||||||
|
|
||||||
``` js |
|
||||||
Chart.line('#chart', [ |
|
||||||
{ typeName: 'apple', key: 'Monday', value: 1 }, |
|
||||||
{ typeName: 'apple', key: 'Tuesday', value: 2 }, |
|
||||||
{ typeName: 'apple', key: 'Wednesday', value: 3 }, |
|
||||||
{ typeName: 'pear', key: 'Monday', value: 11 }, |
|
||||||
{ typeName: 'pear', key: 'Tuesday', value: 21 }, |
|
||||||
{ typeName: 'pear', key: 'Wednesday', value: 31 }, |
|
||||||
{ typeName: 'banana', key: 'Monday', value: 31 }, |
|
||||||
{ typeName: 'banana', key: 'Tuesday', value: 32 }, |
|
||||||
{ typeName: 'banana', key: 'Wednesday', value: 33 }, |
|
||||||
... |
|
||||||
]) |
|
||||||
``` |
|
||||||
|
|
||||||
#### options 可配置参数 |
|
||||||
|
|
||||||
| 属性 | 说明 | required | 类型 | 默认值 | |
|
||||||
| :----| :------| :--------| :---:| :------| |
|
||||||
| title | 图表标题 | - | String | '单条折线图' 或 '多条折线图' | |
|
||||||
| keyMap | 数据列表的属性字典 | - | Object | 详见后续属性 | |
|
||||||
| keyMap.xAxisKey | x 轴对应的属性名称 | - | String | 'key' | |
|
||||||
| keyMap.dataKey | 数据值对应的属性名称 | - | String | 'value' | |
|
||||||
| keyMap.legendKey | 图例对应的属性名称 | - | String | 'typeName' | |
|
||||||
| reverseAxis | 是否为横向图 | - | Boolean | false | |
|
||||||
|
|
||||||
### 柱状图 |
|
||||||
|
|
||||||
#### 基本用法 |
|
||||||
|
|
||||||
``` js |
|
||||||
Chart.bar('#chart', [ |
|
||||||
{ key: 'Monday', value: 1 }, |
|
||||||
{ key: 'Tuesday', value: 2 }, |
|
||||||
{ key: 'Wednesday', value: 3 }, |
|
||||||
... |
|
||||||
]) |
|
||||||
``` |
|
||||||
|
|
||||||
#### 多条柱状图 |
|
||||||
|
|
||||||
``` js |
|
||||||
Chart.bar('#chart', [ |
|
||||||
{ typeName: 'apple', key: 'Monday', value: 1 }, |
|
||||||
{ typeName: 'apple', key: 'Tuesday', value: 2 }, |
|
||||||
{ typeName: 'apple', key: 'Wednesday', value: 3 }, |
|
||||||
{ typeName: 'pear', key: 'Monday', value: 11 }, |
|
||||||
{ typeName: 'pear', key: 'Tuesday', value: 21 }, |
|
||||||
{ typeName: 'pear', key: 'Wednesday', value: 31 }, |
|
||||||
{ typeName: 'banana', key: 'Monday', value: 31 }, |
|
||||||
{ typeName: 'banana', key: 'Tuesday', value: 32 }, |
|
||||||
{ typeName: 'banana', key: 'Wednesday', value: 33 }, |
|
||||||
... |
|
||||||
]) |
|
||||||
``` |
|
||||||
|
|
||||||
#### 折柱混合图 |
|
||||||
|
|
||||||
``` js |
|
||||||
Chart.bar('#chart', [ |
|
||||||
{ typeName: 'apple', key: 'Monday', value: 1 }, |
|
||||||
{ typeName: 'apple', key: 'Tuesday', value: 2 }, |
|
||||||
{ typeName: 'apple', key: 'Wednesday', value: 3 }, |
|
||||||
{ typeName: 'pear', key: 'Monday', value: 11 }, |
|
||||||
{ typeName: 'pear', key: 'Tuesday', value: 21 }, |
|
||||||
{ typeName: 'pear', key: 'Wednesday', value: 31 }, |
|
||||||
{ typeName: 'banana', key: 'Monday', value: 31 }, |
|
||||||
{ typeName: 'banana', key: 'Tuesday', value: 32 }, |
|
||||||
{ typeName: 'banana', key: 'Wednesday', value: 33 }, |
|
||||||
... |
|
||||||
], { |
|
||||||
lineTypes: ['banana'] |
|
||||||
}) |
|
||||||
``` |
|
||||||
|
|
||||||
#### 时间轴柱状图 |
|
||||||
|
|
||||||
``` js |
|
||||||
Chart.bar('#chart', [ |
|
||||||
{ timeline: 2015, typeName: 'apple', key: 'Monday', value: 1 }, |
|
||||||
{ timeline: 2015, typeName: 'apple', key: 'Tuesday', value: 2 }, |
|
||||||
{ timeline: 2015, typeName: 'apple', key: 'Wednesday', value: 3 }, |
|
||||||
{ timeline: 2015, typeName: 'pear', key: 'Monday', value: 11 }, |
|
||||||
{ timeline: 2015, typeName: 'pear', key: 'Tuesday', value: 21 }, |
|
||||||
{ timeline: 2015, typeName: 'pear', key: 'Wednesday', value: 31 }, |
|
||||||
{ timeline: 2015, typeName: 'banana', key: 'Monday', value: 31 }, |
|
||||||
{ timeline: 2015, typeName: 'banana', key: 'Tuesday', value: 32 }, |
|
||||||
{ timeline: 2015, typeName: 'banana', key: 'Wednesday', value: 33 }, |
|
||||||
{ timeline: 2016, typeName: 'apple', key: 'Monday', value: 1 }, |
|
||||||
{ timeline: 2016, typeName: 'apple', key: 'Tuesday', value: 2 }, |
|
||||||
{ timeline: 2016, typeName: 'apple', key: 'Wednesday', value: 3 }, |
|
||||||
{ timeline: 2016, typeName: 'pear', key: 'Monday', value: 11 }, |
|
||||||
{ timeline: 2016, typeName: 'pear', key: 'Tuesday', value: 21 }, |
|
||||||
{ timeline: 2016, typeName: 'pear', key: 'Wednesday', value: 31 }, |
|
||||||
{ timeline: 2016, typeName: 'banana', key: 'Monday', value: 31 }, |
|
||||||
{ timeline: 2016, typeName: 'banana', key: 'Tuesday', value: 32 }, |
|
||||||
{ timeline: 2016, typeName: 'banana', key: 'Wednesday', value: 33 }, |
|
||||||
... |
|
||||||
], { |
|
||||||
// 可以使用 $timeline 进行占位，该字符串将替换为 timeline 属性的值 |
|
||||||
title: '$timeline时间轴柱状图' |
|
||||||
}) |
|
||||||
``` |
|
||||||
|
|
||||||
#### options 可配置参数 |
|
||||||
|
|
||||||
| 属性 | 说明 | required | 类型 | 默认值 | |
|
||||||
| :----| :------| :--------| :---:| :------| |
|
||||||
| title | 图表标题 | - | String | '单条柱状图' 或 '多条柱状图' | |
|
||||||
| keyMap | 数据列表的属性字典 | - | Object | 详见后续属性 | |
|
||||||
| keyMap.xAxisKey | x 轴对应的属性名称 | - | String | 'key' | |
|
||||||
| keyMap.dataKey | 数据值对应的属性名称 | - | String | 'value' | |
|
||||||
| keyMap.legendKey | 图例对应的属性名称 | - | String | 'typeName' | |
|
||||||
| keyMap.timelineKey | 时间轴对应的属性名称 | - | String | 'timeline' | |
|
||||||
| reverseAxis | 是否为横向图 | - | Boolean | false | |
|
||||||
| stack | 是否为堆叠图 | - | Boolean | false | |
|
||||||
| lineTypes | 折柱混合图中折线数据对应的图例名称数组 | - | Array | - | |
|
||||||
| yAxis | 自定义的 y 轴，请参考 echarts 配置 | - | Object | - | |
|
||||||
|
|
||||||
### 饼状图 |
|
||||||
|
|
||||||
#### 基本用法 |
|
||||||
|
|
||||||
``` js |
|
||||||
Chart.pie('#chart', [ |
|
||||||
{ key: 'Monday', value: 1 }, |
|
||||||
{ key: 'Tuesday', value: 2 }, |
|
||||||
{ key: 'Wednesday', value: 3 }, |
|
||||||
... |
|
||||||
]) |
|
||||||
``` |
|
||||||
|
|
||||||
#### 环形图 |
|
||||||
|
|
||||||
``` js |
|
||||||
Chart.pie('#chart', [ |
|
||||||
{ key: 'Monday', value: 1 }, |
|
||||||
{ key: 'Tuesday', value: 2 }, |
|
||||||
{ key: 'Wednesday', value: 3 }, |
|
||||||
... |
|
||||||
], { |
|
||||||
ring: true |
|
||||||
}) |
|
||||||
``` |
|
||||||
|
|
||||||
#### options 可配置参数 |
|
||||||
|
|
||||||
| 属性 | 说明 | required | 类型 | 默认值 | |
|
||||||
| :----| :------| :--------| :---:| :------| |
|
||||||
| title | 图表标题 | - | String | '饼图' | |
|
||||||
| keyMap | 数据列表的属性字典 | - | Object | 详见后续属性 | |
|
||||||
| keyMap.textKey | 文本对应的属性名称 | - | String | 'key' | |
|
||||||
| keyMap.dataKey | 数据值对应的属性名称 | - | String | 'value' | |
|
||||||
| ring | 是否环形图 | - | Boolean | false | |
|
||||||
|
|
||||||
### 雷达图 |
|
||||||
|
|
||||||
#### 基本用法 |
|
||||||
|
|
||||||
``` js |
|
||||||
Chart.radar('#chart', [ |
|
||||||
{ typeName: 'apple', key: 'Monday', value: 1 }, |
|
||||||
{ typeName: 'apple', key: 'Tuesday', value: 2 }, |
|
||||||
{ typeName: 'apple', key: 'Wednesday', value: 3 }, |
|
||||||
{ typeName: 'pear', key: 'Monday', value: 11 }, |
|
||||||
{ typeName: 'pear', key: 'Tuesday', value: 21 }, |
|
||||||
{ typeName: 'pear', key: 'Wednesday', value: 31 }, |
|
||||||
{ typeName: 'banana', key: 'Monday', value: 31 }, |
|
||||||
{ typeName: 'banana', key: 'Tuesday', value: 32 }, |
|
||||||
{ typeName: 'banana', key: 'Wednesday', value: 33 }, |
|
||||||
... |
|
||||||
]) |
|
||||||
``` |
|
||||||
|
|
||||||
#### options 可配置参数 |
|
||||||
|
|
||||||
| 属性 | 说明 | required | 类型 | 默认值 | |
|
||||||
| :----| :------| :--------| :---:| :------| |
|
||||||
| title | 图表标题 | - | String | '雷达图' | |
|
||||||
| keyMap | 数据列表的属性字典 | - | Object | 详见后续属性 | |
|
||||||
| keyMap.textKey | 指标对应的属性名称 | - | String | 'key' | |
|
||||||
| keyMap.dataKey | 数据值对应的属性名称 | - | String | 'value' | |
|
||||||
| keyMap.legendKey | 图例对应的属性名称 | - | String | 'typeName' | |
|
||||||
|
|
||||||
### 漏斗图 |
|
||||||
|
|
||||||
#### 基本用法 |
|
||||||
|
|
||||||
``` js |
|
||||||
Chart.funnel('#chart', [ |
|
||||||
{ key: 'Monday', value: 1 }, |
|
||||||
{ key: 'Tuesday', value: 2 }, |
|
||||||
{ key: 'Wednesday', value: 3 }, |
|
||||||
... |
|
||||||
]) |
|
||||||
``` |
|
||||||
|
|
||||||
#### options 可配置参数 |
|
||||||
|
|
||||||
| 属性 | 说明 | required | 类型 | 默认值 | |
|
||||||
| :----| :------| :--------| :---:| :------| |
|
||||||
| title | 图表标题 | - | String | '漏斗图' | |
|
||||||
| keyMap | 数据列表的属性字典 | - | Object | 详见后续属性 | |
|
||||||
| keyMap.textKey | 文本对应的属性名称 | - | String | 'key' | |
|
||||||
| keyMap.dataKey | 数据值对应的属性名称 | - | String | 'value' | |
|
||||||
|
|
||||||
### 气泡图 |
|
||||||
|
|
||||||
#### 基本用法 |
|
||||||
|
|
||||||
``` js |
|
||||||
Chart.scatter('#chart', [ |
|
||||||
{ typeName: 'apple', text: 'Monday', x: 1, y: 1, size: 1 }, |
|
||||||
{ typeName: 'apple', text: 'Tuesday', x: 2, y: 2, size: 2 }, |
|
||||||
{ typeName: 'apple', text: 'Wednesday', x: 3, y: 3, size: 3 }, |
|
||||||
{ typeName: 'pear', text: 'Monday', x: 11, y: 11, size: 11 }, |
|
||||||
{ typeName: 'pear', text: 'Tuesday', x: 21, y: 21, size: 21 }, |
|
||||||
{ typeName: 'pear', text: 'Wednesday', x: 31, y: 31, size: 31 }, |
|
||||||
{ typeName: 'banana', text: 'Monday', x: 31, y: 31, size: 31 }, |
|
||||||
{ typeName: 'banana', text: 'Tuesday', x: 32, y: 32, size: 32 }, |
|
||||||
{ typeName: 'banana', text: 'Wednesday', x: 33, y: 33, size: 33 }, |
|
||||||
... |
|
||||||
]) |
|
||||||
``` |
|
||||||
|
|
||||||
#### options 可配置参数 |
|
||||||
|
|
||||||
| 属性 | 说明 | required | 类型 | 默认值 | |
|
||||||
| :----| :------| :--------| :---:| :------| |
|
||||||
| title | 图表标题 | - | String | '气泡图' | |
|
||||||
| keyMap | 数据列表的属性字典 | - | Object | 详见后续属性 | |
|
||||||
| keyMap.xKey | x 坐标对应的属性名称 | - | String | 'x' | |
|
||||||
| keyMap.yKey | y 坐标对应的属性名称 | - | String | 'y' | |
|
||||||
| keyMap.sizeKey | 气泡大小对应的属性名称 | - | String | 'size' | |
|
||||||
| keyMap.textKey | 气泡文本对应的属性名称 | - | String | 'text' | |
|
||||||
| keyMap.legendKey | 图例对应的属性名称 | - | String | 'typeName' | |
|
||||||
|
|
||||||
### 全局配置 |
|
||||||
|
|
||||||
#### 主题 |
|
||||||
|
|
||||||
注册并按需使用 |
|
||||||
``` js |
|
||||||
import themeData from './theme.json' |
|
||||||
|
|
||||||
// 注册主题 |
|
||||||
Chart.config({ |
|
||||||
theme: { |
|
||||||
name: 'themeName', |
|
||||||
data: themeData |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
// 使用主题 |
|
||||||
Chart.line('#chart', data, { theme: 'themeName' }) |
|
||||||
``` |
|
||||||
|
|
||||||
注册并全局使用 |
|
||||||
``` js |
|
||||||
import themeData from './theme.json' |
|
||||||
|
|
||||||
// 注册为默认主题后，所有的图表均使用该主题，不需要特别指定 |
|
||||||
Chart.config({ |
|
||||||
theme: { |
|
||||||
name: 'themeName', |
|
||||||
data: themeData, |
|
||||||
default: true |
|
||||||
} |
|
||||||
}) |
|
||||||
``` |
|
||||||
|
|
||||||
### 实例 API |
|
||||||
|
|
||||||
| 方法 | 说明 | 参数 | 参数类型 | 返回值 | |
|
||||||
| :----| :------| :--------| :---:| :------| |
|
||||||
| setData | 重新设置数据 | data | Array | - | |
|
||||||
|
|
||||||
## License |
|
||||||
|
|
||||||
[MIT](http://opensource.org/licenses/MIT) |
|
||||||
@ -1,60 +0,0 @@ |
|||||||
/** |
|
||||||
* webpack config |
|
||||||
* |
|
||||||
* author: liuxin(liuxin@analysys.com.cn) |
|
||||||
*/ |
|
||||||
|
|
||||||
const path = require('path') |
|
||||||
const glob = require('globby') |
|
||||||
|
|
||||||
const isProduction = process.env.NODE_ENV !== 'development' |
|
||||||
const resolve = dir => path.join(__dirname, '..', dir) |
|
||||||
const assetsDir = resolve('src') |
|
||||||
const distDir = resolve('dist') |
|
||||||
|
|
||||||
const baseConfig = { |
|
||||||
entry: { |
|
||||||
'index': glob.sync(['index.js'], { cwd: assetsDir }) |
|
||||||
}, |
|
||||||
output: { |
|
||||||
path: distDir |
|
||||||
}, |
|
||||||
module: { |
|
||||||
rules: [ |
|
||||||
{ |
|
||||||
test: /\.js$/, |
|
||||||
exclude: file => ( |
|
||||||
/node_modules/.test(file) && |
|
||||||
!/\.vue\.js/.test(file) |
|
||||||
), |
|
||||||
use: [ |
|
||||||
{ |
|
||||||
loader: 'babel-loader', |
|
||||||
options: { |
|
||||||
cacheDirectory: true, |
|
||||||
cacheIdentifier: true |
|
||||||
} |
|
||||||
} |
|
||||||
] |
|
||||||
} |
|
||||||
] |
|
||||||
}, |
|
||||||
resolve: { |
|
||||||
modules: [ |
|
||||||
resolve('node_modules'), |
|
||||||
resolve('src') |
|
||||||
], |
|
||||||
extensions: ['.js', '.json', '.vue', '.scss'] |
|
||||||
}, |
|
||||||
externals: { |
|
||||||
'vue': 'Vue', |
|
||||||
'echarts': 'echarts' |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = { |
|
||||||
isProduction, |
|
||||||
assetsDir, |
|
||||||
distDir, |
|
||||||
baseConfig |
|
||||||
} |
|
||||||
@ -1,104 +0,0 @@ |
|||||||
/** |
|
||||||
* webpack config for production |
|
||||||
* |
|
||||||
* author: liuxin(liuxin@analysys.com.cn) |
|
||||||
*/ |
|
||||||
|
|
||||||
const webpack = require('webpack') |
|
||||||
const merge = require('webpack-merge') |
|
||||||
const { baseConfig } = require('./config') |
|
||||||
const ExtractTextPlugin = require('extract-text-webpack-plugin') |
|
||||||
const UglifyJSPlugin = require('uglifyjs-webpack-plugin') |
|
||||||
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') |
|
||||||
const VueLoaderPlugin = require('vue-loader/lib/plugin') |
|
||||||
|
|
||||||
const config = merge.smart(baseConfig, { |
|
||||||
devtool: 'source-map', |
|
||||||
output: { |
|
||||||
filename: '[name].js', |
|
||||||
libraryTarget: 'umd', |
|
||||||
umdNamedDefine: false |
|
||||||
}, |
|
||||||
module: { |
|
||||||
rules: [ |
|
||||||
{ |
|
||||||
test: /\.vue$/, |
|
||||||
loader: 'vue-loader', |
|
||||||
options: { |
|
||||||
hotReload: false |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
test: /\.css$/, |
|
||||||
loader: ExtractTextPlugin.extract({ |
|
||||||
use: [ |
|
||||||
'css-loader', |
|
||||||
{ |
|
||||||
loader: 'postcss-loader', |
|
||||||
options: { |
|
||||||
plugins: (loader) => [ |
|
||||||
require('autoprefixer')({ |
|
||||||
'browsers': ['ie > 8', 'last 2 version', 'safari >= 9'] |
|
||||||
}), |
|
||||||
require('cssnano') |
|
||||||
] |
|
||||||
} |
|
||||||
} |
|
||||||
], |
|
||||||
fallback: ['vue-style-loader'] |
|
||||||
}) |
|
||||||
}, |
|
||||||
{ |
|
||||||
test: /\.scss$/, |
|
||||||
loader: ExtractTextPlugin.extract({ |
|
||||||
use: [ |
|
||||||
'css-loader', |
|
||||||
'sass-loader', |
|
||||||
{ |
|
||||||
loader: 'postcss-loader', |
|
||||||
options: { |
|
||||||
plugins: (loader) => [ |
|
||||||
require('autoprefixer')({ |
|
||||||
'browsers': ['ie > 8', 'last 2 version', 'safari >= 9'] |
|
||||||
}), |
|
||||||
require('cssnano') |
|
||||||
] |
|
||||||
} |
|
||||||
} |
|
||||||
], |
|
||||||
fallback: ['vue-style-loader'] |
|
||||||
}) |
|
||||||
} |
|
||||||
] |
|
||||||
}, |
|
||||||
plugins: [ |
|
||||||
new VueLoaderPlugin(), |
|
||||||
new ExtractTextPlugin({ filename: '[name].css', allChunks: true }), |
|
||||||
new webpack.optimize.OccurrenceOrderPlugin(), |
|
||||||
new OptimizeCssAssetsPlugin({ |
|
||||||
assetNameRegExp: /\.css$/g, |
|
||||||
cssProcessor: require('cssnano'), |
|
||||||
cssProcessorOptions: { discardComments: { removeAll: true } }, |
|
||||||
canPrint: true |
|
||||||
}), |
|
||||||
new UglifyJSPlugin({ |
|
||||||
parallel: true, |
|
||||||
sourceMap: true, |
|
||||||
uglifyOptions: { |
|
||||||
compress: { |
|
||||||
drop_console: true, |
|
||||||
drop_debugger: true |
|
||||||
}, |
|
||||||
comments: function (n, c) { |
|
||||||
/*! IMPORTANT: Please preserve 3rd-party library license info, inspired from @allex/amd-build-worker/config/util.js */ |
|
||||||
var text = c.value, type = c.type |
|
||||||
if (type === 'comment2') { |
|
||||||
return /^!|@preserve|@license|@cc_on|MIT/i.test(text) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
] |
|
||||||
}) |
|
||||||
|
|
||||||
module.exports = config |
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,87 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="app-container"> |
|
||||||
<div class="left"> |
|
||||||
<ul class="sidebar"> |
|
||||||
<li v-for="(link, i) in links" :key="i"> |
|
||||||
<router-link :to="link.url">{{link.name}}</router-link> |
|
||||||
<ul class="sub" v-if="link.subs"> |
|
||||||
<li v-for="(sub, j) in link.subs" :key="j"> |
|
||||||
<router-link :to="sub.url">{{sub.name}}</router-link> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
<div class="right"> |
|
||||||
<router-view /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import './styles/main.scss' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'App', |
|
||||||
data () { |
|
||||||
return { |
|
||||||
links: [ |
|
||||||
{ |
|
||||||
name: '折线图', |
|
||||||
url: '/line', |
|
||||||
subs: [ |
|
||||||
{ name: '单条折线图', url: '/line#simple' }, |
|
||||||
{ name: '多条折线图', url: '/line#multiple' }, |
|
||||||
{ name: '横向折线图', url: '/line#reverse' } |
|
||||||
] |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: '柱状图', |
|
||||||
url: '/bar', |
|
||||||
subs: [ |
|
||||||
{ name: '单条柱状图', url: '/bar#simple' }, |
|
||||||
{ name: '多条柱状图', url: '/bar#multiple' }, |
|
||||||
{ name: '横向柱状图', url: '/bar#reverse' }, |
|
||||||
{ name: '折柱混合图', url: '/bar#mixin' }, |
|
||||||
{ name: '堆叠柱状图', url: '/bar#stack' }, |
|
||||||
{ name: '时间轴柱状图', url: '/bar#timeline' } |
|
||||||
] |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: '饼状图', |
|
||||||
url: '/pie', |
|
||||||
subs: [ |
|
||||||
{ name: '简单饼状图', url: '/pie#simple' }, |
|
||||||
{ name: '环形图', url: '/pie#ring' } |
|
||||||
] |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: '雷达图', |
|
||||||
url: '/radar', |
|
||||||
subs: [ |
|
||||||
{ name: '简单雷达图', url: '/radar#simple' } |
|
||||||
] |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: '漏斗图', |
|
||||||
url: '/funnel', |
|
||||||
subs: [ |
|
||||||
{ name: '简单漏斗图', url: '/funnel#simple' } |
|
||||||
] |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: '气泡图', |
|
||||||
url: '/scatter', |
|
||||||
subs: [ |
|
||||||
{ name: '气泡图', url: '/scatter#simple' } |
|
||||||
] |
|
||||||
} |
|
||||||
] |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
|
|
||||||
</style> |
|
||||||
@ -1,15 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<html lang="en"> |
|
||||||
|
|
||||||
<head> |
|
||||||
<meta charset="UTF-8"> |
|
||||||
<meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"> |
|
||||||
<title>demo</title> |
|
||||||
</head> |
|
||||||
|
|
||||||
<body> |
|
||||||
<div id="app"></div> |
|
||||||
<script src="./index.js"></script> |
|
||||||
</body> |
|
||||||
|
|
||||||
</html> |
|
||||||
@ -1,14 +0,0 @@ |
|||||||
import Vue from 'vue' |
|
||||||
import router from './router' |
|
||||||
import App from './app.vue' |
|
||||||
|
|
||||||
new Vue({ |
|
||||||
el: '#app', |
|
||||||
router, |
|
||||||
render: h => h(App), |
|
||||||
mounted () { |
|
||||||
if (this.$route.path === '/') { |
|
||||||
this.$router.push('/line') |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
@ -1,58 +0,0 @@ |
|||||||
export const getTimelineList = () => { |
|
||||||
const list = [] |
|
||||||
for (let i = 2008; i < 2018; i++) { |
|
||||||
let index = 0 |
|
||||||
for (const key of keys) { |
|
||||||
for (const day of days) { |
|
||||||
list.push({ |
|
||||||
timeline: i, |
|
||||||
typeName: key, |
|
||||||
key: day, |
|
||||||
value: Math.floor(Math.random() * 100 + (index + 1) * 100) |
|
||||||
}) |
|
||||||
index++ |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
return list |
|
||||||
} |
|
||||||
|
|
||||||
export const getSimpleList = () => { |
|
||||||
const list = [] |
|
||||||
for (const key of keys) { |
|
||||||
list.push({ |
|
||||||
key: key, |
|
||||||
value: Math.floor(Math.random() * 100) |
|
||||||
}) |
|
||||||
} |
|
||||||
return list |
|
||||||
} |
|
||||||
|
|
||||||
export const getMultipleList = (scatter = false) => { |
|
||||||
const list = [] |
|
||||||
let index = 0 |
|
||||||
for (const key of keys) { |
|
||||||
for (const day of days) { |
|
||||||
if (scatter) { |
|
||||||
list.push({ |
|
||||||
typeName: key, |
|
||||||
text: day, |
|
||||||
x: Math.floor(Math.random() * 100 + (index + 1) * 100), |
|
||||||
y: Math.floor(Math.random() * 100 + (index + 1) * 100), |
|
||||||
size: Math.floor(Math.random() * 1000) |
|
||||||
}) |
|
||||||
} else { |
|
||||||
list.push({ |
|
||||||
typeName: key, |
|
||||||
key: day, |
|
||||||
value: Math.floor(Math.random() * 100 + (index + 1) * 100) |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
index++ |
|
||||||
} |
|
||||||
return list |
|
||||||
} |
|
||||||
|
|
||||||
const keys = ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'] |
|
||||||
const days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] |
|
||||||
@ -1,494 +0,0 @@ |
|||||||
|
|
||||||
{ |
|
||||||
"color": [ |
|
||||||
"#fc97af", |
|
||||||
"#87f7cf", |
|
||||||
"#f7f494", |
|
||||||
"#72ccff", |
|
||||||
"#f7c5a0", |
|
||||||
"#d4a4eb", |
|
||||||
"#d2f5a6", |
|
||||||
"#76f2f2" |
|
||||||
], |
|
||||||
"backgroundColor": "rgba(41,52,65,1)", |
|
||||||
"textStyle": {}, |
|
||||||
"title": { |
|
||||||
"textStyle": { |
|
||||||
"color": "#ffffff" |
|
||||||
}, |
|
||||||
"subtextStyle": { |
|
||||||
"color": "#dddddd" |
|
||||||
} |
|
||||||
}, |
|
||||||
"line": { |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"borderWidth": "4" |
|
||||||
} |
|
||||||
}, |
|
||||||
"lineStyle": { |
|
||||||
"normal": { |
|
||||||
"width": "3" |
|
||||||
} |
|
||||||
}, |
|
||||||
"symbolSize": "0", |
|
||||||
"symbol": "circle", |
|
||||||
"smooth": true |
|
||||||
}, |
|
||||||
"radar": { |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"borderWidth": "4" |
|
||||||
} |
|
||||||
}, |
|
||||||
"lineStyle": { |
|
||||||
"normal": { |
|
||||||
"width": "3" |
|
||||||
} |
|
||||||
}, |
|
||||||
"symbolSize": "0", |
|
||||||
"symbol": "circle", |
|
||||||
"smooth": true |
|
||||||
}, |
|
||||||
"bar": { |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"barBorderWidth": 0, |
|
||||||
"barBorderColor": "#ccc" |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"barBorderWidth": 0, |
|
||||||
"barBorderColor": "#ccc" |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"pie": { |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"scatter": { |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"boxplot": { |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"parallel": { |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"sankey": { |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"funnel": { |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"gauge": { |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"candlestick": { |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"color": "#fc97af", |
|
||||||
"color0": "transparent", |
|
||||||
"borderColor": "#fc97af", |
|
||||||
"borderColor0": "#87f7cf", |
|
||||||
"borderWidth": "2" |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"graph": { |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
} |
|
||||||
}, |
|
||||||
"lineStyle": { |
|
||||||
"normal": { |
|
||||||
"width": "1", |
|
||||||
"color": "#ffffff" |
|
||||||
} |
|
||||||
}, |
|
||||||
"symbolSize": "0", |
|
||||||
"symbol": "circle", |
|
||||||
"smooth": true, |
|
||||||
"color": [ |
|
||||||
"#fc97af", |
|
||||||
"#87f7cf", |
|
||||||
"#f7f494", |
|
||||||
"#72ccff", |
|
||||||
"#f7c5a0", |
|
||||||
"#d4a4eb", |
|
||||||
"#d2f5a6", |
|
||||||
"#76f2f2" |
|
||||||
], |
|
||||||
"label": { |
|
||||||
"normal": { |
|
||||||
"textStyle": { |
|
||||||
"color": "#293441" |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"map": { |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"areaColor": "#f3f3f3", |
|
||||||
"borderColor": "#999999", |
|
||||||
"borderWidth": 0.5 |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"areaColor": "rgba(255,178,72,1)", |
|
||||||
"borderColor": "#eb8146", |
|
||||||
"borderWidth": 1 |
|
||||||
} |
|
||||||
}, |
|
||||||
"label": { |
|
||||||
"normal": { |
|
||||||
"textStyle": { |
|
||||||
"color": "#893448" |
|
||||||
} |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"textStyle": { |
|
||||||
"color": "rgb(137,52,72)" |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"geo": { |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"areaColor": "#f3f3f3", |
|
||||||
"borderColor": "#999999", |
|
||||||
"borderWidth": 0.5 |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"areaColor": "rgba(255,178,72,1)", |
|
||||||
"borderColor": "#eb8146", |
|
||||||
"borderWidth": 1 |
|
||||||
} |
|
||||||
}, |
|
||||||
"label": { |
|
||||||
"normal": { |
|
||||||
"textStyle": { |
|
||||||
"color": "#893448" |
|
||||||
} |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"textStyle": { |
|
||||||
"color": "rgb(137,52,72)" |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"categoryAxis": { |
|
||||||
"axisLine": { |
|
||||||
"show": true, |
|
||||||
"lineStyle": { |
|
||||||
"color": "#666666" |
|
||||||
} |
|
||||||
}, |
|
||||||
"axisTick": { |
|
||||||
"show": false, |
|
||||||
"lineStyle": { |
|
||||||
"color": "#333" |
|
||||||
} |
|
||||||
}, |
|
||||||
"axisLabel": { |
|
||||||
"show": true, |
|
||||||
"textStyle": { |
|
||||||
"color": "#aaaaaa" |
|
||||||
} |
|
||||||
}, |
|
||||||
"splitLine": { |
|
||||||
"show": false, |
|
||||||
"lineStyle": { |
|
||||||
"color": [ |
|
||||||
"#e6e6e6" |
|
||||||
] |
|
||||||
} |
|
||||||
}, |
|
||||||
"splitArea": { |
|
||||||
"show": false, |
|
||||||
"areaStyle": { |
|
||||||
"color": [ |
|
||||||
"rgba(250,250,250,0.05)", |
|
||||||
"rgba(200,200,200,0.02)" |
|
||||||
] |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"valueAxis": { |
|
||||||
"axisLine": { |
|
||||||
"show": true, |
|
||||||
"lineStyle": { |
|
||||||
"color": "#666666" |
|
||||||
} |
|
||||||
}, |
|
||||||
"axisTick": { |
|
||||||
"show": false, |
|
||||||
"lineStyle": { |
|
||||||
"color": "#333" |
|
||||||
} |
|
||||||
}, |
|
||||||
"axisLabel": { |
|
||||||
"show": true, |
|
||||||
"textStyle": { |
|
||||||
"color": "#aaaaaa" |
|
||||||
} |
|
||||||
}, |
|
||||||
"splitLine": { |
|
||||||
"show": false, |
|
||||||
"lineStyle": { |
|
||||||
"color": [ |
|
||||||
"#e6e6e6" |
|
||||||
] |
|
||||||
} |
|
||||||
}, |
|
||||||
"splitArea": { |
|
||||||
"show": false, |
|
||||||
"areaStyle": { |
|
||||||
"color": [ |
|
||||||
"rgba(250,250,250,0.05)", |
|
||||||
"rgba(200,200,200,0.02)" |
|
||||||
] |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"logAxis": { |
|
||||||
"axisLine": { |
|
||||||
"show": true, |
|
||||||
"lineStyle": { |
|
||||||
"color": "#666666" |
|
||||||
} |
|
||||||
}, |
|
||||||
"axisTick": { |
|
||||||
"show": false, |
|
||||||
"lineStyle": { |
|
||||||
"color": "#333" |
|
||||||
} |
|
||||||
}, |
|
||||||
"axisLabel": { |
|
||||||
"show": true, |
|
||||||
"textStyle": { |
|
||||||
"color": "#aaaaaa" |
|
||||||
} |
|
||||||
}, |
|
||||||
"splitLine": { |
|
||||||
"show": false, |
|
||||||
"lineStyle": { |
|
||||||
"color": [ |
|
||||||
"#e6e6e6" |
|
||||||
] |
|
||||||
} |
|
||||||
}, |
|
||||||
"splitArea": { |
|
||||||
"show": false, |
|
||||||
"areaStyle": { |
|
||||||
"color": [ |
|
||||||
"rgba(250,250,250,0.05)", |
|
||||||
"rgba(200,200,200,0.02)" |
|
||||||
] |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"timeAxis": { |
|
||||||
"axisLine": { |
|
||||||
"show": true, |
|
||||||
"lineStyle": { |
|
||||||
"color": "#666666" |
|
||||||
} |
|
||||||
}, |
|
||||||
"axisTick": { |
|
||||||
"show": false, |
|
||||||
"lineStyle": { |
|
||||||
"color": "#333" |
|
||||||
} |
|
||||||
}, |
|
||||||
"axisLabel": { |
|
||||||
"show": true, |
|
||||||
"textStyle": { |
|
||||||
"color": "#aaaaaa" |
|
||||||
} |
|
||||||
}, |
|
||||||
"splitLine": { |
|
||||||
"show": false, |
|
||||||
"lineStyle": { |
|
||||||
"color": [ |
|
||||||
"#e6e6e6" |
|
||||||
] |
|
||||||
} |
|
||||||
}, |
|
||||||
"splitArea": { |
|
||||||
"show": false, |
|
||||||
"areaStyle": { |
|
||||||
"color": [ |
|
||||||
"rgba(250,250,250,0.05)", |
|
||||||
"rgba(200,200,200,0.02)" |
|
||||||
] |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"toolbox": { |
|
||||||
"iconStyle": { |
|
||||||
"normal": { |
|
||||||
"borderColor": "#999999" |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"borderColor": "#666666" |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"legend": { |
|
||||||
"textStyle": { |
|
||||||
"color": "#999999" |
|
||||||
} |
|
||||||
}, |
|
||||||
"tooltip": { |
|
||||||
"axisPointer": { |
|
||||||
"lineStyle": { |
|
||||||
"color": "#cccccc", |
|
||||||
"width": 1 |
|
||||||
}, |
|
||||||
"crossStyle": { |
|
||||||
"color": "#cccccc", |
|
||||||
"width": 1 |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"timeline": { |
|
||||||
"lineStyle": { |
|
||||||
"color": "#87f7cf", |
|
||||||
"width": 1 |
|
||||||
}, |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"color": "#87f7cf", |
|
||||||
"borderWidth": 1 |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"color": "#f7f494" |
|
||||||
} |
|
||||||
}, |
|
||||||
"controlStyle": { |
|
||||||
"normal": { |
|
||||||
"color": "#87f7cf", |
|
||||||
"borderColor": "#87f7cf", |
|
||||||
"borderWidth": 0.5 |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"color": "#87f7cf", |
|
||||||
"borderColor": "#87f7cf", |
|
||||||
"borderWidth": 0.5 |
|
||||||
} |
|
||||||
}, |
|
||||||
"checkpointStyle": { |
|
||||||
"color": "#fc97af", |
|
||||||
"borderColor": "rgba(252,151,175,0.3)" |
|
||||||
}, |
|
||||||
"label": { |
|
||||||
"normal": { |
|
||||||
"textStyle": { |
|
||||||
"color": "#87f7cf" |
|
||||||
} |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"textStyle": { |
|
||||||
"color": "#87f7cf" |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"visualMap": { |
|
||||||
"color": [ |
|
||||||
"#fc97af", |
|
||||||
"#87f7cf" |
|
||||||
] |
|
||||||
}, |
|
||||||
"dataZoom": { |
|
||||||
"backgroundColor": "rgba(255,255,255,0)", |
|
||||||
"dataBackgroundColor": "rgba(114,204,255,1)", |
|
||||||
"fillerColor": "rgba(114,204,255,0.2)", |
|
||||||
"handleColor": "#72ccff", |
|
||||||
"handleSize": "100%", |
|
||||||
"textStyle": { |
|
||||||
"color": "#333333" |
|
||||||
} |
|
||||||
}, |
|
||||||
"markPoint": { |
|
||||||
"label": { |
|
||||||
"normal": { |
|
||||||
"textStyle": { |
|
||||||
"color": "#293441" |
|
||||||
} |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"textStyle": { |
|
||||||
"color": "#293441" |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,72 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<h1>柱状图示例</h1> |
|
||||||
<h2 id="simple">单条柱状图</h2> |
|
||||||
<div id="simpleChart" class="chart-container" ></div> |
|
||||||
<h2 id="multiple">多条柱状图</h2> |
|
||||||
<div id="multipleChart" class="chart-container" ></div> |
|
||||||
<h2 id="reverse">横向柱状图</h2> |
|
||||||
<div id="reverseChart" class="chart-container tall" ></div> |
|
||||||
<h2 id="mixin">折柱混合图</h2> |
|
||||||
<div id="mixinChart" class="chart-container tall" ></div> |
|
||||||
<h2 id="stack">堆叠柱状图</h2> |
|
||||||
<div id="stackChart" class="chart-container tall" ></div> |
|
||||||
<h2 id="timeline">时间轴柱状图</h2> |
|
||||||
<div id="timelineChart" class="chart-container tall" ></div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import Chart from '../../src/index' |
|
||||||
import { getSimpleList, getMultipleList, getTimelineList } from '../mock/data.js' |
|
||||||
import theme from '../mock/theme.json' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'barCharts', |
|
||||||
mounted () { |
|
||||||
// 注册主题 |
|
||||||
Chart.config({ |
|
||||||
theme: { |
|
||||||
name: 'test', |
|
||||||
data: theme, |
|
||||||
default: true |
|
||||||
} |
|
||||||
}) |
|
||||||
Chart.bar('#simpleChart', getSimpleList()) |
|
||||||
Chart.bar('#multipleChart', getMultipleList(), { theme: 'none' }) |
|
||||||
Chart.bar('#reverseChart', getMultipleList(), { reverseAxis: true }) |
|
||||||
Chart.bar('#mixinChart', getMultipleList(), { |
|
||||||
lineTypes: ['直接访问', '搜索引擎'], |
|
||||||
title: '', |
|
||||||
yAxis: [ |
|
||||||
{ |
|
||||||
type: 'value', |
|
||||||
name: '数值' |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'value', |
|
||||||
name: '温度', |
|
||||||
min: 0, |
|
||||||
max: 25, |
|
||||||
interval: 5, |
|
||||||
axisLabel: { |
|
||||||
formatter: '{value} °C' |
|
||||||
} |
|
||||||
} |
|
||||||
] |
|
||||||
}) |
|
||||||
Chart.bar('#stackChart', getMultipleList(), { |
|
||||||
title: '', |
|
||||||
stack: true |
|
||||||
}) |
|
||||||
Chart.bar('#timelineChart', getTimelineList(), { |
|
||||||
type: 'bar', |
|
||||||
title: '$timeline时间轴柱状图' |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
</style> |
|
||||||
|
|
||||||
@ -1,23 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<h1>漏斗图示例</h1> |
|
||||||
<h2 id="simple">简单漏斗图</h2> |
|
||||||
<div id="simpleChart" class="chart-container tall" ></div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import Chart from '../../src/index' |
|
||||||
import { getSimpleList } from '../mock/data.js' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'funnelCharts', |
|
||||||
mounted () { |
|
||||||
Chart.funnel('#simpleChart', getSimpleList()) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
</style> |
|
||||||
|
|
||||||
@ -1,29 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<h1>折线图示例</h1> |
|
||||||
<h2 id="simple">单条折线图</h2> |
|
||||||
<div id="simpleChart" class="chart-container" ></div> |
|
||||||
<h2 id="multiple">多条折线图</h2> |
|
||||||
<div id="multipleChart" class="chart-container" ></div> |
|
||||||
<h2 id="reverse">横向折线图</h2> |
|
||||||
<div id="reverseChart" class="chart-container tall" ></div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import { Line } from '../../src/index' |
|
||||||
import { getSimpleList, getMultipleList } from '../mock/data.js' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'lineCharts', |
|
||||||
mounted () { |
|
||||||
Line.init('#simpleChart', getSimpleList()) |
|
||||||
Line.init('#multipleChart', getMultipleList()) |
|
||||||
Line.init('#reverseChart', getMultipleList(), { reverseAxis: true }) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
</style> |
|
||||||
|
|
||||||
@ -1,29 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<h1>饼状图示例</h1> |
|
||||||
<h2 id="simple">简单饼状图</h2> |
|
||||||
<div id="simpleChart" class="chart-container" ></div> |
|
||||||
<h2 id="ring">环形图</h2> |
|
||||||
<div id="ringChart" class="chart-container" ></div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import Chart from '../../src/index' |
|
||||||
import { getSimpleList } from '../mock/data.js' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'pieCharts', |
|
||||||
mounted () { |
|
||||||
Chart.pie('#simpleChart', getSimpleList()) |
|
||||||
Chart.pie('#ringChart', getSimpleList(), { |
|
||||||
title: '环形图', |
|
||||||
ring: true |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
</style> |
|
||||||
|
|
||||||
@ -1,23 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<h1>雷达图示例</h1> |
|
||||||
<h2 id="simple">简单雷达图</h2> |
|
||||||
<div id="simpleChart" class="chart-container tall" ></div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import Chart from '../../src/index' |
|
||||||
import { getMultipleList } from '../mock/data.js' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'radarCharts', |
|
||||||
mounted () { |
|
||||||
Chart.radar('#simpleChart', getMultipleList()) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
</style> |
|
||||||
|
|
||||||
@ -1,23 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<h1>气泡图示例</h1> |
|
||||||
<h2 id="simple">气泡图</h2> |
|
||||||
<div id="simpleChart" class="chart-container tall" ></div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import Chart from '../../src/index' |
|
||||||
import { getMultipleList } from '../mock/data.js' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'scatterCharts', |
|
||||||
mounted () { |
|
||||||
Chart.scatter('#simpleChart', getMultipleList(true)) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
</style> |
|
||||||
|
|
||||||
@ -1,53 +0,0 @@ |
|||||||
import Vue from 'vue' |
|
||||||
import Router from 'vue-router' |
|
||||||
import Line from '../packages/line' |
|
||||||
import Bar from '../packages/bar' |
|
||||||
import Pie from '../packages/pie' |
|
||||||
import Radar from '../packages/radar' |
|
||||||
import Funnel from '../packages/funnel' |
|
||||||
import Scatter from '../packages/scatter' |
|
||||||
|
|
||||||
Vue.use(Router) |
|
||||||
|
|
||||||
const router = new Router({ |
|
||||||
mode: 'history', |
|
||||||
routes: [ |
|
||||||
{ |
|
||||||
path: '/line', |
|
||||||
component: Line |
|
||||||
}, |
|
||||||
{ |
|
||||||
path: '/bar', |
|
||||||
component: Bar |
|
||||||
}, |
|
||||||
{ |
|
||||||
path: '/pie', |
|
||||||
component: Pie |
|
||||||
}, |
|
||||||
{ |
|
||||||
path: '/radar', |
|
||||||
component: Radar |
|
||||||
}, |
|
||||||
{ |
|
||||||
path: '/funnel', |
|
||||||
component: Funnel |
|
||||||
}, |
|
||||||
{ |
|
||||||
path: '/scatter', |
|
||||||
component: Scatter |
|
||||||
} |
|
||||||
] |
|
||||||
}) |
|
||||||
|
|
||||||
router.afterEach((to, from) => { |
|
||||||
if (to.hash) { |
|
||||||
const target = document.querySelector(to.hash) |
|
||||||
if (target) { |
|
||||||
window.scrollTo(0, target.offsetTop) |
|
||||||
} |
|
||||||
} else { |
|
||||||
window.scrollTo(0, 0) |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
export default router |
|
||||||
@ -1,77 +0,0 @@ |
|||||||
$leftWidth: 200px; |
|
||||||
$leftPaddingX: 30px; |
|
||||||
|
|
||||||
body { |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.app-container { |
|
||||||
.left { |
|
||||||
position: fixed; |
|
||||||
left: 0; |
|
||||||
top: 0; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
width: $leftWidth; |
|
||||||
min-height: 500px; |
|
||||||
padding: 20px $leftPaddingX; |
|
||||||
.sidebar { |
|
||||||
padding: 0; |
|
||||||
list-style-type: none; |
|
||||||
a { |
|
||||||
display: block; |
|
||||||
text-decoration: none; |
|
||||||
color: #35495e; |
|
||||||
padding: 5px 10px; |
|
||||||
border-radius: 4px; |
|
||||||
letter-spacing: .25px; |
|
||||||
} |
|
||||||
.router-link-active { |
|
||||||
color: #fff; |
|
||||||
background-color: #41b883; |
|
||||||
} |
|
||||||
.router-link-active + .sub { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
li { |
|
||||||
font-size: 16px; |
|
||||||
.sub { |
|
||||||
display: none; |
|
||||||
padding-left: 20px; |
|
||||||
list-style-type: none; |
|
||||||
li { |
|
||||||
font-size: 14px; |
|
||||||
} |
|
||||||
.router-link-active { |
|
||||||
color: #41b883; |
|
||||||
background: #fff; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.right { |
|
||||||
margin-left: $leftWidth + $leftPaddingX * 2; |
|
||||||
border-left: 1px solid #c6c6c6; |
|
||||||
h1 { |
|
||||||
margin: 0; |
|
||||||
padding: 30px; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
h2 { |
|
||||||
margin: 0; |
|
||||||
padding: 20px; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
.chart-container { |
|
||||||
width: 80%; |
|
||||||
height: 300px; |
|
||||||
margin: auto; |
|
||||||
padding-bottom: 50px; |
|
||||||
} |
|
||||||
.tall { |
|
||||||
height: 600px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,65 +0,0 @@ |
|||||||
{ |
|
||||||
"name": "@analysys/ana-charts", |
|
||||||
"version": "1.0.4", |
|
||||||
"main": "dist/index.js", |
|
||||||
"repository": "git@git.analysys.cn:fss-modules/echarts-tooltip.git", |
|
||||||
"author": "liuxin <liuxin@analysys.com.cn>", |
|
||||||
"license": "MIT", |
|
||||||
"scripts": { |
|
||||||
"dev": "npm run clean && parcel ./example/index.html -p 3000", |
|
||||||
"build": "npm run clean && cross-env NODE_ENV=production webpack --config ./build/webpack.config.prod.js", |
|
||||||
"lint": "standard \"**/*.{js,vue}\"", |
|
||||||
"lint:fix": "standard \"**/*.{js,vue}\" --fix", |
|
||||||
"prepublishOnly": "npm run build", |
|
||||||
"clean": "rimraf dist", |
|
||||||
"start": "npm run dev", |
|
||||||
"test": "npm run lint" |
|
||||||
}, |
|
||||||
"dependencies": { |
|
||||||
"echarts": "^4.1.0" |
|
||||||
}, |
|
||||||
"devDependencies": { |
|
||||||
"@fedor/standard": "^1.0.3", |
|
||||||
"@vue/component-compiler-utils": "^2.2.0", |
|
||||||
"autoprefixer": "^9.1.3", |
|
||||||
"babel-core": "^6.26.3", |
|
||||||
"babel-eslint": "^8.2.6", |
|
||||||
"babel-loader": "^7.1.1", |
|
||||||
"babel-plugin-transform-object-rest-spread": "^6.26.0", |
|
||||||
"babel-preset-env": "^1.7.0", |
|
||||||
"cross-env": "^5.2.0", |
|
||||||
"css-loader": "^0.28.8", |
|
||||||
"cssnano": "^4.1.0", |
|
||||||
"extract-text-webpack-plugin": "^3.0.2", |
|
||||||
"ghooks": "^2.0.4", |
|
||||||
"node-sass": "^4.9.3", |
|
||||||
"optimize-css-assets-webpack-plugin": "3.2.0", |
|
||||||
"postcss-loader": "^3.0.0", |
|
||||||
"rimraf": "^2.6.2", |
|
||||||
"sass-loader": "^7.1.0", |
|
||||||
"uglifyjs-webpack-plugin": "^1.2.7", |
|
||||||
"vue": "^2.5.17", |
|
||||||
"vue-hot-reload-api": "^2.3.0", |
|
||||||
"vue-loader": "^15.4.1", |
|
||||||
"vue-router": "^3.0.1", |
|
||||||
"vue-style-loader": "^4.1.1", |
|
||||||
"vue-template-compiler": "^2.5.17", |
|
||||||
"webpack": "^3.12.0", |
|
||||||
"webpack-merge": "^4.1.4" |
|
||||||
}, |
|
||||||
"standard": { |
|
||||||
"parser": "babel-eslint", |
|
||||||
"ignore": [ |
|
||||||
"src/font/*", |
|
||||||
"dist/**", |
|
||||||
"test/coverage/**", |
|
||||||
"karma.conf.js", |
|
||||||
"postcss.config.js" |
|
||||||
] |
|
||||||
}, |
|
||||||
"config": { |
|
||||||
"ghooks": { |
|
||||||
"pre-commit": "npm run lint" |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,7 +0,0 @@ |
|||||||
module.exports = { |
|
||||||
plugins: [ |
|
||||||
require('autoprefixer')({ |
|
||||||
browsers: ["ie > 8", "last 2 version", "safari >= 9"] |
|
||||||
}) |
|
||||||
] |
|
||||||
} |
|
||||||
@ -1,55 +0,0 @@ |
|||||||
## Ans-UI |
|
||||||
|
|
||||||
component x base on vue.js |
|
||||||
|
|
||||||
### Install |
|
||||||
安装node > 8的LTS版本，https://nodejs.org/en/ |
|
||||||
|
|
||||||
```sh |
|
||||||
yarn add @analysys/ans-ui | npm i @analysys/ans-ui |
|
||||||
``` |
|
||||||
|
|
||||||
### Usage |
|
||||||
|
|
||||||
全部引入 |
|
||||||
|
|
||||||
```javascript |
|
||||||
import Vue from 'vue'; |
|
||||||
import '@analysys/ans-ui/lib/ans-ui.min.css'; |
|
||||||
import ans from '@analysys/ans-ui/lib/ans-ui.min.js'; |
|
||||||
|
|
||||||
Vue.use(ans); |
|
||||||
``` |
|
||||||
|
|
||||||
按需引入 |
|
||||||
|
|
||||||
```javascript |
|
||||||
import Vue from 'vue'; |
|
||||||
import '@analysys/ans-ui/lib/ans-ui.min.css'; |
|
||||||
import { xButton } from '@analysys/ans-ui/lib/ans-ui.min.js'; |
|
||||||
|
|
||||||
Vue.use(xButton); |
|
||||||
``` |
|
||||||
|
|
||||||
### Build |
|
||||||
```sh |
|
||||||
yarn global add parcel-bundler | npm i -g parcel-bundler |
|
||||||
# development default listen to 4000 |
|
||||||
yarn dev | npm run dev |
|
||||||
|
|
||||||
# production |
|
||||||
yarn build | npm run build |
|
||||||
``` |
|
||||||
|
|
||||||
### Build Single Component |
|
||||||
```sh |
|
||||||
yarn global add parcel-bundler | npm i -g parcel-bundler |
|
||||||
# development button 可以替换为任意组件名 |
|
||||||
yarn dev:c button | npm run dev:c button |
|
||||||
|
|
||||||
# production button 可以替换为任意组件名 |
|
||||||
yarn build:c button | npm run build:c button |
|
||||||
|
|
||||||
#or |
|
||||||
yarn dev:c | npm run dev:c |
|
||||||
``` |
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
Binary file not shown.
@ -1,2 +0,0 @@ |
|||||||
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("ans-ui/locale",[],t):"object"==typeof exports?exports["ans-ui/locale"]=t():e["ans-ui/locale"]=t()}("undefined"!=typeof self?self:this,function(){return function(e){var t={};function o(n){if(t[n])return t[n].exports;var a=t[n]={i:n,l:!1,exports:{}};return e[n].call(a.exports,a,a.exports,o),a.l=!0,a.exports}return o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/lib/locale/",o(o.s=0)}([function(e,t,o){"use strict";t.__esModule=!0,t.default={ans:{modal:{confirm:"OK",cancel:"Cancel"},cascader:{placeholder:"Select",noMatch:"No matching data",noData:"No data"},datepicker:{placeholder:"Select date",cancel:"Cancel",confirm:"OK",year:"",month1:"January",month2:"February",month3:"March",month4:"April",month5:"May",month6:"June",month7:"July",month8:"August",month9:"September",month10:"October",month11:"November",month12:"December",weeks:{sun:"Sun",mon:"Mon",tue:"Tue",wed:"Wed",thu:"Thu",fri:"Fri",sat:"Sat"},selectTime:"Select time",startTime:"Start time",endTime:"End time"},input:{placeholder:"Please enter..."},page:{goto:"Go to",pagesize:"/page",total:"Total {total}",pageClassifier:""},poptip:{confirm:"OK",cancel:"Cancel"},select:{placeholder:"Select",noMatch:"No matching data",noData:"No data",search:"Keyword"},table:{emptyText:"No data"},timepicker:{clear:"Clear",confirm:"OK",placeholder:"Select"}}}}])}); |
|
||||||
//# sourceMappingURL=en.js.map
|
|
||||||
File diff suppressed because one or more lines are too long
@ -1,2 +0,0 @@ |
|||||||
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("ans-ui/locale",[],t):"object"==typeof exports?exports["ans-ui/locale"]=t():e["ans-ui/locale"]=t()}("undefined"!=typeof self?self:this,function(){return function(e){var t={};function o(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/lib/locale/",o(o.s=1)}([,function(e,t,o){"use strict";t.__esModule=!0,t.default={ans:{modal:{confirm:"确定",cancel:"取消"},cascader:{placeholder:"请选择",noMatch:"搜索无结果",noData:"暂无数据"},datepicker:{placeholder:"请选择日期",cancel:"取消",confirm:"确定",year:"年",month1:"1 月",month2:"2 月",month3:"3 月",month4:"4 月",month5:"5 月",month6:"6 月",month7:"7 月",month8:"8 月",month9:"9 月",month10:"10 月",month11:"11 月",month12:"12 月",weeks:{sun:"日",mon:"一",tue:"二",wed:"三",thu:"四",fri:"五",sat:"六"},selectTime:"选择时间",startTime:"开始时间",endTime:"结束时间"},input:{placeholder:"请输入..."},page:{goto:"跳转至",pagesize:"条/页",total:"共 {total} 条",pageClassifier:"页"},poptip:{confirm:"确定",cancel:"取消"},select:{placeholder:"请选择",noMatch:"搜索无结果",noData:"暂无数据",search:"搜索"},table:{emptyText:"暂无数据"},timepicker:{clear:"清空",confirm:"确定",placeholder:"请选择时间"}}}}])}); |
|
||||||
//# sourceMappingURL=zh-CN.js.map
|
|
||||||
File diff suppressed because one or more lines are too long
@ -1,96 +0,0 @@ |
|||||||
{ |
|
||||||
"name": "@analysys/ans-ui", |
|
||||||
"version": "0.0.22", |
|
||||||
"description": "vue components for analysys", |
|
||||||
"keywords": [ |
|
||||||
"analysys", |
|
||||||
"UI" |
|
||||||
], |
|
||||||
"main": "lib/ans-ui.min.js", |
|
||||||
"style": "lib/ans-ui.min.css", |
|
||||||
"files": [ |
|
||||||
"lib", |
|
||||||
"src", |
|
||||||
"packages" |
|
||||||
], |
|
||||||
"license": "MIT", |
|
||||||
"scripts": { |
|
||||||
"build": "npm run clean && cross-env NODE_ENV=production webpack --config ./build/webpack.config.prod.js && webpack --config ./build/webpack.config.locale.js", |
|
||||||
"dev": "npm run clean && parcel ./example/index.html -p 4000", |
|
||||||
"build:c": "node build/component/buildComponent.js", |
|
||||||
"dev:c": "npm run clean && rimraf .cache && node build/component/devComponent.js", |
|
||||||
"clean": "rimraf dist", |
|
||||||
"lint": "standard \"**/*.{js,vue}\"", |
|
||||||
"lint:fix": "standard \"**/*.{js,vue}\" --fix", |
|
||||||
"theme": "node-sass --output-style compressed ./src/style/index.scss > ./theme/ans.min.css && cp -rf ./src/style/font/. ./theme/font", |
|
||||||
"prepublishOnly": "npm run build", |
|
||||||
"start": "npm run dev", |
|
||||||
"test": "npm run lint" |
|
||||||
}, |
|
||||||
"peerDependencies": { |
|
||||||
"vue": ">=2" |
|
||||||
}, |
|
||||||
"dependencies": { |
|
||||||
"async-validator": "^1.10.0", |
|
||||||
"dayjs": "^1.7.7", |
|
||||||
"deepmerge": "^3.2.0", |
|
||||||
"normalize-wheel": "^1.0.1", |
|
||||||
"popper.js": "^1.14.4" |
|
||||||
}, |
|
||||||
"devDependencies": { |
|
||||||
"@fedor/progress-webpack-plugin": "^1.0.0", |
|
||||||
"@fedor/standard": "^1.0.3", |
|
||||||
"autoprefixer": "^9.0.1", |
|
||||||
"babel-core": "^6.25.0", |
|
||||||
"babel-eslint": "^8.2.6", |
|
||||||
"babel-helper-vue-jsx-merge-props": "^2.0.0", |
|
||||||
"babel-loader": "^7.1.1", |
|
||||||
"babel-plugin-syntax-dynamic-import": "^6.18.0", |
|
||||||
"babel-plugin-syntax-jsx": "^6.18.0", |
|
||||||
"babel-plugin-transform-class-properties": "^6.24.1", |
|
||||||
"babel-plugin-transform-object-rest-spread": "^6.26.0", |
|
||||||
"babel-plugin-transform-remove-console": "^6.9.4", |
|
||||||
"babel-plugin-transform-runtime": "^6.23.0", |
|
||||||
"babel-plugin-transform-vue-jsx": "^3.7.0", |
|
||||||
"babel-preset-env": "^1.5.2", |
|
||||||
"babel-runtime": "^6.26.0", |
|
||||||
"cross-env": "^5.2.0", |
|
||||||
"css-loader": "0.28.8", |
|
||||||
"cssnano": "^4.0.3", |
|
||||||
"extract-text-webpack-plugin": "^3.0.2", |
|
||||||
"file-loader": "^1.1.11", |
|
||||||
"ghooks": "^2.0.4", |
|
||||||
"inquirer": "^6.2.0", |
|
||||||
"node-sass": "^4.9.3", |
|
||||||
"optimize-css-assets-webpack-plugin": "3.2.0", |
|
||||||
"postcss-loader": "^2.1.6", |
|
||||||
"rimraf": "^2.6.2", |
|
||||||
"sass-loader": "^7.0.3", |
|
||||||
"style-loader": "^0.21.0", |
|
||||||
"uglifyjs-webpack-plugin": "^1.2.7", |
|
||||||
"url-loader": "^1.0.1", |
|
||||||
"vue": "^2.5.17", |
|
||||||
"vue-loader": "^15.4.2", |
|
||||||
"vue-router": "^3.0.1", |
|
||||||
"vue-style-loader": "^4.1.1", |
|
||||||
"vue-template-compiler": "^2.5.17", |
|
||||||
"webpack": "^3", |
|
||||||
"webpack-merge": "^4.1.3" |
|
||||||
}, |
|
||||||
"maintainers": [ |
|
||||||
{ |
|
||||||
"name": "liuxin", |
|
||||||
"email": "liuxin@analysys.com.cn" |
|
||||||
} |
|
||||||
], |
|
||||||
"standard": { |
|
||||||
"parser": "babel-eslint", |
|
||||||
"ignore": [ |
|
||||||
"lib/*", |
|
||||||
"packages/*" |
|
||||||
] |
|
||||||
}, |
|
||||||
"config": { |
|
||||||
"ghooks": {} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,73 +0,0 @@ |
|||||||
## Box |
|
||||||
|
|
||||||
Box包含modal、message、notice三个组件。 |
|
||||||
|
|
||||||
### Modal options |
|
||||||
|
|
||||||
属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
--- | --- | --- | --- | --- |
|
||||||
title | 标题 | String / DOM | - | - |
|
||||||
content | 内容 | String / DOM | - | - |
|
||||||
width | 宽度 | Number / String | - | 520 |
|
||||||
className | 自定义样式名称 | String | - | - |
|
||||||
closable | 是否显示关闭 | Boolean | - | true |
|
||||||
escClose | 是否按 esc 键关闭 | Boolean | - | false |
|
||||||
ok | 点击确定的回调 | Object | {show [Boolean] ,text [String], handle[Function]} | - |
|
||||||
cancel | 点击取消的回调 | Object | {show [Boolean] ,text [String], handle[Function]} | - |
|
||||||
render | 自定义内容 | Function | 使用时 content, title ,ok , cancel 失效 | - |
|
||||||
showMask | 是否显示遮罩 | Boolean | - | false |
|
||||||
maskClosable | 点击遮罩是否关闭 | Boolean | - | false |
|
||||||
|
|
||||||
#### Modal 实例方法 |
|
||||||
|
|
||||||
instance.remove() 销毁当前实例 |
|
||||||
|
|
||||||
#### Modal 全局相关 |
|
||||||
|
|
||||||
this.$modal.destroy() 全局销毁所有实例 |
|
||||||
|
|
||||||
### Message options |
|
||||||
|
|
||||||
属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
--- | --- | --- | --- | --- |
|
||||||
content | 内容 | String | - | - |
|
||||||
duration | 自动关闭的延时，单位秒，不关闭可以写 0 | Number | - | 1.5 |
|
||||||
onClose | 关闭时的回调 | Function | - | - |
|
||||||
closable | 是否显示关闭图标 | Boolean | - | false |
|
||||||
|
|
||||||
#### Message 全局相关 |
|
||||||
|
|
||||||
this.$message.destroy() 全局销毁所有实例 |
|
||||||
|
|
||||||
this.$message.config(options) 全局配置 |
|
||||||
|
|
||||||
属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
--- | --- | --- | --- | --- |
|
||||||
top | 提示组件距离顶端的距离，单位像素 | Number | - | 60 |
|
||||||
duration | 默认自动关闭的延时，单位秒 | Number | - | 1.5 |
|
||||||
transitionName | 默认动画类名 | String | - | x-ani-move-in |
|
||||||
fixed | 显示是否固定位置 | String | Boolean | true |
|
||||||
|
|
||||||
### Notice options |
|
||||||
|
|
||||||
属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
--- | --- | --- | --- | --- |
|
||||||
title | 标题 | String | - | - |
|
||||||
content | 内容 | String | - | - |
|
||||||
duration | 自动关闭的延时，单位秒，不关闭可以写 0 | Number | - | 1.5 |
|
||||||
onClose | 关闭时的回调 | Function | - | - |
|
||||||
closable | 是否显示关闭图标 | Boolean | - | false |
|
||||||
|
|
||||||
#### Notice 全局相关 |
|
||||||
|
|
||||||
this.$notice.destroy() 全局销毁所有实例 |
|
||||||
|
|
||||||
this.$notice.config(options) 全局配置 |
|
||||||
|
|
||||||
属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
--- | --- | --- | --- | --- |
|
||||||
top | 提示组件距离顶端的距离，单位像素 | Number | - | 60 |
|
||||||
right | 提示组件距离屏幕右侧的距离，单位像素 | Number | - | 20 |
|
||||||
duration | 默认自动关闭的延时，单位秒 | Number | - | 1.5 |
|
||||||
transitionName | 默认动画类名 | String | - | x-ani-move-right |
|
||||||
list | 显示是否以列表形式展示 | Boolean | - | true |
|
||||||
@ -1,221 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<section class="demo-section"> |
|
||||||
<h4>modal</h4> |
|
||||||
<div> |
|
||||||
<x-button type="primary" @click="handleModal">Modal Dialog</x-button> |
|
||||||
<x-button type="primary" @click="handleAbstract">Abstract Modal Dialog</x-button> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
<section class="demo-section"> |
|
||||||
<h4>message</h4> |
|
||||||
<div> |
|
||||||
<x-button type="primary" @click="info">消息</x-button> |
|
||||||
<x-button type="success" @click="success">成功</x-button> |
|
||||||
<x-button type="warning" @click="warning">警告</x-button> |
|
||||||
<x-button type="error" @click="error">错误</x-button> |
|
||||||
<x-button type="primary" @click="loading">Get...</x-button> |
|
||||||
<x-button @click="loading">Loading</x-button> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
<section class="demo-section"> |
|
||||||
<h4>notice</h4> |
|
||||||
<div> |
|
||||||
<x-button type="primary" @click="infoNotice">消息</x-button> |
|
||||||
<x-button type="success" @click="successNotice">成功</x-button> |
|
||||||
<x-button type="warning" @click="warningNotice">警告</x-button> |
|
||||||
<x-button type="error" @click="errorNotice">错误</x-button> |
|
||||||
<x-button type="primary" @click="loadingNotice">Get...</x-button> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import Vue from 'vue' |
|
||||||
import { xButton } from '../../vue-button/src' |
|
||||||
import { xModal, xMessage, xNotice } from '../src' |
|
||||||
|
|
||||||
Vue.$message = Vue.prototype.$message = xMessage |
|
||||||
Vue.$modal = Vue.prototype.$modal = xModal |
|
||||||
Vue.$notice = Vue.prototype.$notice = xNotice |
|
||||||
|
|
||||||
const ModalTest = { |
|
||||||
data () { |
|
||||||
return { |
|
||||||
name: 1 |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
handleAbstract () { |
|
||||||
this.$modal.dialog({ |
|
||||||
title: '你好', |
|
||||||
width: 200, |
|
||||||
escClose: true, |
|
||||||
closable: false, |
|
||||||
showMask: true, |
|
||||||
className: 'x-modal-custom', |
|
||||||
maskClosable: true, |
|
||||||
render (h) { |
|
||||||
return ( |
|
||||||
<div class='customize-dialog'>This is a abstract modal dialog.</div> |
|
||||||
) |
|
||||||
} |
|
||||||
}) |
|
||||||
}, |
|
||||||
handleModal () { |
|
||||||
let self = this |
|
||||||
this.$modal.dialog({ |
|
||||||
className: 'x-modal-custom', |
|
||||||
width: 350, |
|
||||||
closable: true, |
|
||||||
showMask: true, |
|
||||||
maskClosable: true, |
|
||||||
title: '你好', |
|
||||||
content: 'hello word' + (this.name++), |
|
||||||
ok: { |
|
||||||
show: true, |
|
||||||
className: 'x-btn-ok', |
|
||||||
handle (e) { |
|
||||||
self.$notice.success({ |
|
||||||
title: 'Success', |
|
||||||
content: 'ok', |
|
||||||
duration: 2, |
|
||||||
onClose () {}, |
|
||||||
closable: false |
|
||||||
}) |
|
||||||
console.log('ok event handled.', e) |
|
||||||
} |
|
||||||
}, |
|
||||||
cancel: { |
|
||||||
handle (e) { |
|
||||||
self.$notice.info({ |
|
||||||
title: 'Canceled', |
|
||||||
content: 'cancel', |
|
||||||
duration: 2, |
|
||||||
onClose () {}, |
|
||||||
closable: false |
|
||||||
}) |
|
||||||
console.log('cancel event handled.', e) |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
export default { |
|
||||||
mixins: [ ModalTest ], |
|
||||||
components: { xButton }, |
|
||||||
data () { |
|
||||||
return { |
|
||||||
name: 1 |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
info () { |
|
||||||
this.$message.info({ |
|
||||||
content: 'hello word' + (this.name++), |
|
||||||
duration: 2, |
|
||||||
onClose: function () { |
|
||||||
}, |
|
||||||
closable: false |
|
||||||
}) |
|
||||||
}, |
|
||||||
infoNotice () { |
|
||||||
this.$notice.info({ |
|
||||||
title: '标题', |
|
||||||
content: 'hello word' + (this.name++), |
|
||||||
duration: 0, |
|
||||||
onClose: function () { |
|
||||||
}, |
|
||||||
closable: true |
|
||||||
}) |
|
||||||
}, |
|
||||||
success () { |
|
||||||
this.$message.success({ |
|
||||||
content: 'hello word' + (this.name++), |
|
||||||
duration: 2, |
|
||||||
onClose: function () { |
|
||||||
}, |
|
||||||
closable: false |
|
||||||
}) |
|
||||||
}, |
|
||||||
successNotice () { |
|
||||||
this.$notice.success({ |
|
||||||
title: '成功', |
|
||||||
content: 'hello word' + (this.name++), |
|
||||||
duration: 2, |
|
||||||
onClose: function () { |
|
||||||
}, |
|
||||||
closable: false |
|
||||||
}) |
|
||||||
}, |
|
||||||
error () { |
|
||||||
this.$message.error({ |
|
||||||
content: 'hello wordhello wordhello word' + (this.name++), |
|
||||||
duration: 0, |
|
||||||
onClose: function () { |
|
||||||
}, |
|
||||||
closable: true |
|
||||||
}) |
|
||||||
}, |
|
||||||
errorNotice () { |
|
||||||
this.$notice.error({ |
|
||||||
title: '错误', |
|
||||||
content: 'hello wordhello wordhello word' + (this.name++), |
|
||||||
duration: 0, |
|
||||||
onClose: function () { |
|
||||||
}, |
|
||||||
closable: true |
|
||||||
}) |
|
||||||
}, |
|
||||||
loading () { |
|
||||||
this.$message.loading({ |
|
||||||
content: 'hello word' + (this.name++), |
|
||||||
duration: 2, |
|
||||||
onClose: function () { |
|
||||||
}, |
|
||||||
closable: true |
|
||||||
}) |
|
||||||
}, |
|
||||||
loadingNotice () { |
|
||||||
this.$notice.loading({ |
|
||||||
title: '加载中', |
|
||||||
content: 'hello word' + (this.name++), |
|
||||||
duration: 2, |
|
||||||
onClose: function () { |
|
||||||
}, |
|
||||||
closable: true |
|
||||||
}) |
|
||||||
}, |
|
||||||
warning () { |
|
||||||
this.$message.warning({ |
|
||||||
content: 'hello word' + (this.name++), |
|
||||||
duration: 2, |
|
||||||
onClose: function () { |
|
||||||
}, |
|
||||||
closable: false |
|
||||||
}) |
|
||||||
}, |
|
||||||
warningNotice () { |
|
||||||
this.$notice.warning({ |
|
||||||
title: '警告', |
|
||||||
content: 'hello word' + (this.name++), |
|
||||||
duration: 2, |
|
||||||
onClose: function () { |
|
||||||
}, |
|
||||||
closable: false |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
.customize-dialog { |
|
||||||
padding: 10px; |
|
||||||
background: #ccc; |
|
||||||
border-radius: 4px; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,16 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<html lang="en"> |
|
||||||
<head> |
|
||||||
<meta charset="UTF-8"> |
|
||||||
<meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"> |
|
||||||
<script src="https://s1.analysys.cn/libs/??js-polyfills/0.1.42/polyfill.min.js"></script> |
|
||||||
<link rel="stylesheet" href="//s2.analysys.cn/libs/??-/@analysys/fss-demo.css@"> |
|
||||||
<link rel="stylesheet" href="../../../src/style/index.scss"> |
|
||||||
<title>demo</title> |
|
||||||
</head> |
|
||||||
<body> |
|
||||||
<div id="app"></div> |
|
||||||
|
|
||||||
<script src="./index.js"></script> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
@ -1,10 +0,0 @@ |
|||||||
import Vue from 'vue' |
|
||||||
import App from './app.vue' |
|
||||||
|
|
||||||
new Vue({ |
|
||||||
el: '#app', |
|
||||||
render: h => h(App), |
|
||||||
mounted () { |
|
||||||
console.log('success') |
|
||||||
} |
|
||||||
}) |
|
||||||
@ -1,9 +0,0 @@ |
|||||||
import xMessage from './source/layer/message/message' |
|
||||||
import xModal from './source/layer/modal/modal' |
|
||||||
import xNotice from './source/layer/notice/notice' |
|
||||||
|
|
||||||
export { |
|
||||||
xMessage, |
|
||||||
xModal, |
|
||||||
xNotice |
|
||||||
} |
|
||||||
@ -1,135 +0,0 @@ |
|||||||
<template> |
|
||||||
<transition :name="transitionName"> |
|
||||||
<div :class="classes" :style="styles"> |
|
||||||
<template v-if="type === 'message'"> |
|
||||||
<div :class="[baseClass + '-content']" ref="content"> |
|
||||||
<div :class="[baseClass + '-content-text']" v-html="content"></div> |
|
||||||
<a :class="[baseClass + '-close']" @click="close" v-if="closable"> |
|
||||||
<i class="ans-icon-close"></i> |
|
||||||
</a> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<template v-if="type === 'modal'"> |
|
||||||
<div :class="{msk: className.split(' ').indexOf('mask')!==-1}" ></div> |
|
||||||
<div :class="[baseClass + '-content-wrapper']"> |
|
||||||
<div :class="[baseClass + '-content']" ref="content" v-html="content"></div> |
|
||||||
<a :class="[baseClass + '-close']" @click="close" v-if="closable"> |
|
||||||
<i class="ans-icon-close"></i> |
|
||||||
</a> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<template v-if="type === 'notice'"> |
|
||||||
<div :class="[baseClass + '-content']" ref="content"> |
|
||||||
<div :class="[baseClass + '-content__inner']" v-html="content"></div> |
|
||||||
<a :class="[baseClass + '-close']" @click="close" v-if="closable"> |
|
||||||
<i class="ans-icon-close"></i> |
|
||||||
</a> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
</div> |
|
||||||
</transition> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import { findComponentUpward } from '../../../../../src/util' |
|
||||||
|
|
||||||
export default { |
|
||||||
props: { |
|
||||||
name: { |
|
||||||
type: String, |
|
||||||
required: true |
|
||||||
}, |
|
||||||
type: { |
|
||||||
type: String |
|
||||||
}, |
|
||||||
prefixCls: { |
|
||||||
type: String, |
|
||||||
default: '' |
|
||||||
}, |
|
||||||
transitionName: { |
|
||||||
type: String |
|
||||||
}, |
|
||||||
duration: { |
|
||||||
type: Number, |
|
||||||
default: 1.5 |
|
||||||
}, |
|
||||||
content: { |
|
||||||
type: String, |
|
||||||
default: '' |
|
||||||
}, |
|
||||||
styles: { |
|
||||||
type: Object, |
|
||||||
default: function () { |
|
||||||
return { |
|
||||||
right: '50%' |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
closable: { |
|
||||||
type: Boolean, |
|
||||||
default: false |
|
||||||
}, |
|
||||||
onClose: { |
|
||||||
type: Function, |
|
||||||
default: function () {} |
|
||||||
}, |
|
||||||
className: { |
|
||||||
type: String, |
|
||||||
default: '' |
|
||||||
}, |
|
||||||
escClose: { |
|
||||||
type: Boolean, |
|
||||||
default: false |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
clearCloseTimer () { |
|
||||||
if (this.closeTimer) { |
|
||||||
clearTimeout(this.closeTimer) |
|
||||||
this.closeTimer = null |
|
||||||
} |
|
||||||
}, |
|
||||||
close () { |
|
||||||
this.clearCloseTimer() |
|
||||||
this.onClose() |
|
||||||
let $parent = findComponentUpward(this, 'xBoxManager') |
|
||||||
if ($parent) { |
|
||||||
$parent.close(this.name) |
|
||||||
} |
|
||||||
}, |
|
||||||
escHandler (event) { |
|
||||||
/* eslint-disable */ |
|
||||||
let e = event || window.event || arguments.callee.caller.arguments[0] |
|
||||||
if (e && e.keyCode == 27) { // 按 Esc |
|
||||||
this.close() |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
baseClass () { |
|
||||||
return `${this.prefixCls}-box` |
|
||||||
}, |
|
||||||
classes () { |
|
||||||
return [ |
|
||||||
`${this.baseClass}`, |
|
||||||
`${this.className}` |
|
||||||
] |
|
||||||
} |
|
||||||
}, |
|
||||||
mounted () { |
|
||||||
this.clearCloseTimer() |
|
||||||
if (this.duration !== 0) { |
|
||||||
this.closeTimer = setTimeout(() => { |
|
||||||
this.close() |
|
||||||
}, this.duration * 1000) |
|
||||||
} |
|
||||||
if(this.$listeners.onrender){ |
|
||||||
this.$listeners.onrender(this.name) |
|
||||||
} |
|
||||||
// this.$emit('on-mounted', this.name) |
|
||||||
if (this.escClose) { |
|
||||||
document.onkeyup = this.escHandler |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,106 +0,0 @@ |
|||||||
<template> |
|
||||||
<div :class="classes" :style="styles"> |
|
||||||
<box |
|
||||||
v-for="box in boxs" |
|
||||||
:key="box.name" |
|
||||||
:name="box.name" |
|
||||||
:type="box.type" |
|
||||||
:prefix-cls="prefixCls" |
|
||||||
:transition-name="box.transitionName" |
|
||||||
:duration="box.duration" |
|
||||||
:content="box.content" |
|
||||||
:styles="box.styles" |
|
||||||
:closable="box.closable" |
|
||||||
:on-close="box.onClose" |
|
||||||
:class-name="box.className||''" |
|
||||||
:esc-close="box.escClose" |
|
||||||
@onrender="box.$onRender" |
|
||||||
@on-mounted="_onMounted"> |
|
||||||
</box> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import { LIB_NAME } from '../../../../../src/util' |
|
||||||
import Box from './Box.vue' |
|
||||||
|
|
||||||
const prefixCls = `${LIB_NAME}-layer` |
|
||||||
|
|
||||||
let seed = 0 |
|
||||||
const now = Date.now() |
|
||||||
|
|
||||||
function getUuid () { |
|
||||||
return `${LIB_NAME}-Box_${now}_${seed++}` |
|
||||||
} |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'xBoxManager', |
|
||||||
components: { Box }, |
|
||||||
props: { |
|
||||||
prefixCls: { |
|
||||||
type: String, |
|
||||||
default: prefixCls |
|
||||||
}, |
|
||||||
styles: { |
|
||||||
type: Object, |
|
||||||
default: function () { |
|
||||||
return { |
|
||||||
top: '65px', |
|
||||||
left: '50%' |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
className: { |
|
||||||
type: String |
|
||||||
} |
|
||||||
}, |
|
||||||
data () { |
|
||||||
return { |
|
||||||
boxs: [] |
|
||||||
} |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
classes () { |
|
||||||
return [ |
|
||||||
`${this.prefixCls}`, |
|
||||||
`${this.prefixCls}-wrapper`, |
|
||||||
{ |
|
||||||
[`${this.className}`]: !!this.className |
|
||||||
} |
|
||||||
] |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
onrender(){}, |
|
||||||
add (notice) { |
|
||||||
const name = notice.name || getUuid() |
|
||||||
let _notice = Object.assign({ |
|
||||||
styles: { |
|
||||||
right: '50%' |
|
||||||
}, |
|
||||||
content: '', |
|
||||||
duration: 1.5, |
|
||||||
closable: false, |
|
||||||
name: name |
|
||||||
}, notice) |
|
||||||
_notice.$onRender = _notice.$onRender?_notice.$onRender: () => {} |
|
||||||
this.boxs.push(_notice) |
|
||||||
}, |
|
||||||
close (name) { |
|
||||||
const boxs = this.boxs |
|
||||||
for (let i = 0; i < boxs.length; i++) { |
|
||||||
if (boxs[i].name === name) { |
|
||||||
this.boxs.splice(i, 1) |
|
||||||
break |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
closeAll () { |
|
||||||
this.boxs = [] |
|
||||||
}, |
|
||||||
_onMounted (boxName) { |
|
||||||
this.$emit('on-mounted', boxName) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,40 +0,0 @@ |
|||||||
/** |
|
||||||
* Created by tangwei on 17/8/25. |
|
||||||
*/ |
|
||||||
import Vue from 'vue' |
|
||||||
import BoxManager from './BoxManager.vue' |
|
||||||
|
|
||||||
BoxManager.newInstance = properties => { |
|
||||||
const _props = properties || {} |
|
||||||
|
|
||||||
const Instance = new Vue({ |
|
||||||
data: _props, |
|
||||||
render (h) { |
|
||||||
return h(BoxManager, { |
|
||||||
props: _props |
|
||||||
}) |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
const component = Instance.$mount() |
|
||||||
document.body.appendChild(component.$el) |
|
||||||
const notification = Instance.$children[0] |
|
||||||
|
|
||||||
return { |
|
||||||
notice (noticeProps) { |
|
||||||
notification.add(noticeProps) |
|
||||||
}, |
|
||||||
remove (name) { |
|
||||||
notification.close(name) |
|
||||||
}, |
|
||||||
component: notification, |
|
||||||
destroy (classname) { |
|
||||||
notification.closeAll() |
|
||||||
setTimeout(function () { |
|
||||||
document.body.removeChild(document.getElementsByClassName(classname)[0]) |
|
||||||
}, 500) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
export default BoxManager |
|
||||||
@ -1,99 +0,0 @@ |
|||||||
import { LIB_NAME, ANIMATION_PREFIX } from '../../../../../../src/util' |
|
||||||
import BoxManager from '../../base/index' |
|
||||||
|
|
||||||
const prefixCls = `${LIB_NAME}-message` |
|
||||||
const prefixKey = `${LIB_NAME}_message_key_` |
|
||||||
|
|
||||||
let messageInstance |
|
||||||
let name = 1 |
|
||||||
|
|
||||||
let defaultConfig = { |
|
||||||
// 设置全局的自动关闭时间，为0时不自动消失
|
|
||||||
duration: 1.5, |
|
||||||
// 设置出现的位置在浏览器顶部的距离
|
|
||||||
top: 60, |
|
||||||
transitionName: `${ANIMATION_PREFIX}move-in`, |
|
||||||
fixed: true |
|
||||||
} |
|
||||||
|
|
||||||
let iconTypes = { |
|
||||||
'info': 'ans-icon-notice-solid', |
|
||||||
'success': 'ans-icon-success-solid', |
|
||||||
'warning': 'ans-icon-warn-solid', |
|
||||||
'error': 'ans-icon-fail-solid', |
|
||||||
'loading': 'ans-icon-spinner' |
|
||||||
} |
|
||||||
|
|
||||||
function getMessageInstance () { |
|
||||||
messageInstance = messageInstance || BoxManager.newInstance({ |
|
||||||
prefixCls: prefixCls, |
|
||||||
styles: { |
|
||||||
top: defaultConfig.top + 'px', |
|
||||||
left: '50%' |
|
||||||
}, |
|
||||||
className: defaultConfig.fixed ? `${prefixCls}-fixed` : '' |
|
||||||
}) |
|
||||||
return messageInstance |
|
||||||
} |
|
||||||
|
|
||||||
function notice (content = '', duration = defaultConfig.duration, type, onClose = function () {}, closable = false) { |
|
||||||
let instance = getMessageInstance() |
|
||||||
|
|
||||||
instance.notice({ |
|
||||||
name: `${prefixKey}${name}`, |
|
||||||
duration: duration, |
|
||||||
transitionName: defaultConfig.transitionName, |
|
||||||
styles: {}, |
|
||||||
content: |
|
||||||
` |
|
||||||
<i class="${iconTypes[type]} ${type}"></i><span>${content}</span> |
|
||||||
`, |
|
||||||
onClose: onClose, |
|
||||||
closable: closable, |
|
||||||
type: 'message' |
|
||||||
}) |
|
||||||
|
|
||||||
name++ |
|
||||||
} |
|
||||||
|
|
||||||
function formatOptions (options) { |
|
||||||
const type = typeof options |
|
||||||
if (type === 'string') { |
|
||||||
options = { |
|
||||||
content: options |
|
||||||
} |
|
||||||
} |
|
||||||
return options |
|
||||||
} |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'Message', |
|
||||||
info (options) { |
|
||||||
options = formatOptions(options) |
|
||||||
return notice(options.content, options.duration, 'info', options.onClose, options.closable) |
|
||||||
}, |
|
||||||
success (options) { |
|
||||||
options = formatOptions(options) |
|
||||||
return notice(options.content, options.duration, 'success', options.onClose, options.closable) |
|
||||||
}, |
|
||||||
warning (options) { |
|
||||||
options = formatOptions(options) |
|
||||||
return notice(options.content, options.duration, 'warning', options.onClose, options.closable) |
|
||||||
}, |
|
||||||
error (options) { |
|
||||||
options = formatOptions(options) |
|
||||||
return notice(options.content, options.duration, 'error', options.onClose, options.closable) |
|
||||||
}, |
|
||||||
loading (options) { |
|
||||||
options = formatOptions(options) |
|
||||||
return notice(options.content, options.duration, 'loading', options.onClose, options.closable) |
|
||||||
}, |
|
||||||
config (cfg = {}) { |
|
||||||
defaultConfig = Object.assign(defaultConfig, cfg) |
|
||||||
}, |
|
||||||
destroy () { |
|
||||||
let instance = getMessageInstance() |
|
||||||
messageInstance = null |
|
||||||
instance.destroy(prefixCls) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,203 +0,0 @@ |
|||||||
import Vue from 'vue' |
|
||||||
import BoxManager from '../../base/index' |
|
||||||
import { on, hasClass } from '../../../../../../src/util' |
|
||||||
import { xButton } from '../../../../../vue-button/src' |
|
||||||
import { LIB_NAME, ANIMATION_PREFIX } from '../../../../../../src/util/constants' |
|
||||||
import { t } from '../../../../../../src/locale' |
|
||||||
|
|
||||||
const prefixCls = `${LIB_NAME}-modal` |
|
||||||
|
|
||||||
const prefixKey = `${LIB_NAME}_modal_key_` |
|
||||||
|
|
||||||
let messageInstance |
|
||||||
let name = 1 |
|
||||||
|
|
||||||
/* eslint-disable no-unused-vars */ |
|
||||||
let customModal |
|
||||||
let defaultConfig = { |
|
||||||
// 设置全局的自动关闭时间，为0时不自动消失
|
|
||||||
duration: 0, |
|
||||||
transitionName: `${ANIMATION_PREFIX}modal-down` |
|
||||||
} |
|
||||||
|
|
||||||
function getMessageInstance () { |
|
||||||
messageInstance = messageInstance || BoxManager.newInstance({ |
|
||||||
prefixCls: prefixCls, |
|
||||||
styles: {} |
|
||||||
}) |
|
||||||
return messageInstance |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* @params options {object} 生成modal的配置参数 |
|
||||||
* |
|
||||||
* transitionName {String} 弹框动画 |
|
||||||
* className {String} 弹窗的自定义样式名称 |
|
||||||
* content {String} 内容（支持dom字符串） |
|
||||||
* onClose {Function} 点击关闭图标的回调 |
|
||||||
* closable {Boolean} 是否显示关闭图标 |
|
||||||
* width {Number} 设置弹框宽度 |
|
||||||
* title {String} 设置标题 |
|
||||||
* ok {Object} {show [Boolean], text [String], handle [Function] } |
|
||||||
* cancel 同 ok |
|
||||||
* render {vue[render]函数} 当需要自定义显示内用时 (content, title, ok, cancel 失效) |
|
||||||
* showMask 是否显示遮罩 |
|
||||||
* maskClosable |
|
||||||
*/ |
|
||||||
function notice (options) { |
|
||||||
let instance = getMessageInstance() |
|
||||||
let keyName = `${prefixKey}${name}` |
|
||||||
|
|
||||||
|
|
||||||
let onRender = function (boxName) { |
|
||||||
if (keyName !== boxName) { |
|
||||||
return |
|
||||||
} |
|
||||||
let comp = instance.component.$children.find(o => o.name === keyName) |
|
||||||
if (options.render) { |
|
||||||
customModal = new Vue({ |
|
||||||
name: 'customModal', |
|
||||||
render: options.render, |
|
||||||
mounted () { |
|
||||||
on(this.$el, 'click', function (e) { |
|
||||||
// e.stopPropagation()
|
|
||||||
}) |
|
||||||
if (options.maskClosable) { |
|
||||||
on(comp.$el.children[0], 'click', function (e) { |
|
||||||
instance.remove(boxName) |
|
||||||
if (hasClass(e.target, 'msk')) { |
|
||||||
options.onClose && options.onClose() |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
}).$mount(comp.$refs.content) |
|
||||||
} else { |
|
||||||
customModal = new Vue({ |
|
||||||
name: 'defaultModal', |
|
||||||
data: { |
|
||||||
width: options.width ? options.width : '520', |
|
||||||
content: options.content || '', |
|
||||||
title: options.title || '', |
|
||||||
ok: Object.assign({ |
|
||||||
show: true, |
|
||||||
text: t('ans.modal.confirm'), |
|
||||||
handle: function () { |
|
||||||
} |
|
||||||
}, options.ok), |
|
||||||
cancel: Object.assign({ |
|
||||||
show: true, |
|
||||||
text: t('ans.modal.cancel'), |
|
||||||
handle: function () { |
|
||||||
} |
|
||||||
}, options.cancel) |
|
||||||
}, |
|
||||||
render () { |
|
||||||
const { width, content, title, ok, cancel } = this |
|
||||||
return ( |
|
||||||
<div class={`${prefixCls}-box-content`} style={{ width: width + 'px' }}> |
|
||||||
{ |
|
||||||
title ? ( |
|
||||||
<div class={`${prefixCls}-content-header`}> |
|
||||||
<div class={`${prefixCls}-header-inner`} domPropsInnerHTML={title} /> |
|
||||||
</div>) : null |
|
||||||
} |
|
||||||
{ |
|
||||||
content ? ( |
|
||||||
<div class={`${prefixCls}-content-body`} domPropsInnerHTML={content} /> |
|
||||||
) : null |
|
||||||
} |
|
||||||
{ |
|
||||||
(ok.show || cancel.show) ? ( |
|
||||||
<div class={`${prefixCls}-content-footer`}> |
|
||||||
{ |
|
||||||
cancel.show ? ( |
|
||||||
<x-button type='text' shape={cancel.shape || ''} class={cancel.className || 'x-btn-cancel'} onClick={this.cancelClick}>{cancel.text}</x-button> |
|
||||||
) : null |
|
||||||
} |
|
||||||
{ |
|
||||||
ok.show ? ( |
|
||||||
<x-button type='primary' shape={ok.shape || ''} class={ok.className || 'x-btn-submit'} onClick={this.okClick}>{ok.text}</x-button> |
|
||||||
) : null |
|
||||||
} |
|
||||||
</div> |
|
||||||
) : null |
|
||||||
} |
|
||||||
</div> |
|
||||||
) |
|
||||||
}, |
|
||||||
components: { xButton }, |
|
||||||
props: {}, |
|
||||||
methods: { |
|
||||||
cancelClick (e) { |
|
||||||
this.cancel.handle(e) |
|
||||||
instance.remove(boxName) |
|
||||||
}, |
|
||||||
okClick (e) { |
|
||||||
this.ok.handle(e) |
|
||||||
instance.remove(boxName) |
|
||||||
} |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
}, |
|
||||||
mounted () { |
|
||||||
on(this.$el, 'click', function (e) { |
|
||||||
e.stopPropagation() |
|
||||||
}) |
|
||||||
if (options.maskClosable) { |
|
||||||
on(comp.$el, 'click', function (e) { |
|
||||||
instance.remove(boxName) |
|
||||||
if (hasClass(e.target, 'msk')) { |
|
||||||
options.onClose && options.onClose() |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
}).$mount(comp.$refs.content) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
instance.notice({ |
|
||||||
$onRender: onRender, |
|
||||||
name: keyName, |
|
||||||
duration: defaultConfig.duration, |
|
||||||
// 弹框动画样式
|
|
||||||
transitionName: options.transitionName || defaultConfig.transitionName, |
|
||||||
// 弹框的样式
|
|
||||||
styles: {}, |
|
||||||
// 弹框的内容
|
|
||||||
content: '', |
|
||||||
// 弹框的关闭回调函数
|
|
||||||
onClose: options.onClose || (() => { }), |
|
||||||
// 弹框是否显示关闭按钮(右上角的关闭)
|
|
||||||
escClose: (typeof options.escClose) === 'boolean' ? options.escClose : false, |
|
||||||
closable: (typeof options.closable) === 'boolean' ? options.closable : true, |
|
||||||
className: `${options.className} ${options.showMask ? 'mask' : ''} `, |
|
||||||
// 弹框的类型
|
|
||||||
type: 'modal' |
|
||||||
}) |
|
||||||
|
|
||||||
|
|
||||||
return (function () { |
|
||||||
let target = name++ |
|
||||||
return { |
|
||||||
remove: () => { |
|
||||||
instance.remove(`${prefixKey}${target}`) |
|
||||||
} |
|
||||||
} |
|
||||||
})() |
|
||||||
} |
|
||||||
|
|
||||||
export default { |
|
||||||
dialog (options) { |
|
||||||
return notice(options) |
|
||||||
}, |
|
||||||
config (cfg = {}) { |
|
||||||
defaultConfig = Object.assign(defaultConfig, cfg) |
|
||||||
}, |
|
||||||
destroy () { |
|
||||||
let instance = getMessageInstance() |
|
||||||
messageInstance = null |
|
||||||
instance.destroy(prefixCls) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,104 +0,0 @@ |
|||||||
import { LIB_NAME, ANIMATION_PREFIX } from '../../../../../../src/util' |
|
||||||
import BoxManager from '../../base/index' |
|
||||||
|
|
||||||
const prefixCls = `${LIB_NAME}-notice` |
|
||||||
const prefixKey = `${LIB_NAME}_notice_key_` |
|
||||||
|
|
||||||
let messageInstance |
|
||||||
let name = 1 |
|
||||||
|
|
||||||
let defaultConfig = { |
|
||||||
// 设置全局的自动关闭时间，为0时不自动消失
|
|
||||||
duration: 1.5, |
|
||||||
// 设置出现的位置在浏览器顶部的距离
|
|
||||||
top: 60, |
|
||||||
right: 20, |
|
||||||
transitionName: `${ANIMATION_PREFIX}move-right`, |
|
||||||
list: true |
|
||||||
} |
|
||||||
|
|
||||||
let iconTypes = { |
|
||||||
'info': 'ans-icon-notice-solid', |
|
||||||
'success': 'ans-icon-success-solid', |
|
||||||
'warning': 'ans-icon-warn-solid', |
|
||||||
'error': 'ans-icon-fail-solid', |
|
||||||
'loading': 'ans-icon-spinner' |
|
||||||
} |
|
||||||
|
|
||||||
function getMessageInstance () { |
|
||||||
messageInstance = messageInstance || BoxManager.newInstance({ |
|
||||||
prefixCls: prefixCls, |
|
||||||
styles: { |
|
||||||
top: defaultConfig.top + 'px', |
|
||||||
right: defaultConfig.right + 'px' |
|
||||||
}, |
|
||||||
className: defaultConfig.list ? `${prefixCls}-list` : '' |
|
||||||
}) |
|
||||||
return messageInstance |
|
||||||
} |
|
||||||
|
|
||||||
function notice (title = '', content = '', duration = defaultConfig.duration, type, onClose = function () {}, closable = false) { |
|
||||||
let instance = getMessageInstance() |
|
||||||
|
|
||||||
instance.notice({ |
|
||||||
name: `${prefixKey}${name}`, |
|
||||||
duration: duration, |
|
||||||
transitionName: defaultConfig.transitionName, |
|
||||||
styles: {}, |
|
||||||
content: |
|
||||||
` |
|
||||||
<div class="${prefixCls}-custom-content"> |
|
||||||
<i class="${iconTypes[type]} ${type} ${prefixCls}__icon"></i> |
|
||||||
<span class="${prefixCls}__title">${title}</span> |
|
||||||
<div class="${prefixCls}__content">${content}</div> |
|
||||||
</div> |
|
||||||
`, |
|
||||||
onClose: onClose, |
|
||||||
closable: closable, |
|
||||||
type: 'notice' |
|
||||||
}) |
|
||||||
|
|
||||||
name++ |
|
||||||
} |
|
||||||
|
|
||||||
function formatOptions (options) { |
|
||||||
const type = typeof options |
|
||||||
if (type === 'string') { |
|
||||||
options = { |
|
||||||
content: options |
|
||||||
} |
|
||||||
} |
|
||||||
return options |
|
||||||
} |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'Notice', |
|
||||||
info (options) { |
|
||||||
options = formatOptions(options) |
|
||||||
return notice(options.title, options.content, options.duration, 'info', options.onClose, options.closable) |
|
||||||
}, |
|
||||||
success (options) { |
|
||||||
options = formatOptions(options) |
|
||||||
return notice(options.title, options.content, options.duration, 'success', options.onClose, options.closable) |
|
||||||
}, |
|
||||||
warning (options) { |
|
||||||
options = formatOptions(options) |
|
||||||
return notice(options.title, options.content, options.duration, 'warning', options.onClose, options.closable) |
|
||||||
}, |
|
||||||
error (options) { |
|
||||||
options = formatOptions(options) |
|
||||||
return notice(options.title, options.content, options.duration, 'error', options.onClose, options.closable) |
|
||||||
}, |
|
||||||
loading (options) { |
|
||||||
options = formatOptions(options) |
|
||||||
return notice(options.title, options.content, options.duration, 'loading', options.onClose, options.closable) |
|
||||||
}, |
|
||||||
config (cfg = {}) { |
|
||||||
defaultConfig = Object.assign(defaultConfig, cfg) |
|
||||||
}, |
|
||||||
destroy () { |
|
||||||
let instance = getMessageInstance() |
|
||||||
messageInstance = null |
|
||||||
instance.destroy(prefixCls) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,28 +0,0 @@ |
|||||||
## Button |
|
||||||
|
|
||||||
常用的操作按钮 |
|
||||||
|
|
||||||
### Button props |
|
||||||
|
|
||||||
属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
--- | --- | --- | --- | --- |
|
||||||
title | 标题 | String / DOM | - | - |
|
||||||
type | 类型 | String | primary、ghost、dashed、text、info、success、warning、error | - |
|
||||||
shape | 形状 | String | circle或者不设置 | - |
|
||||||
size | 大小 | String | large、small、default、xsmall | - |
|
||||||
loading | 是否为加载中状态 | Boolean | - | - |
|
||||||
disabled | 是否禁用 | Boolean | - | - |
|
||||||
visible | 在按钮组中，按钮是否显示 | Boolean | - | true |
|
||||||
html-type | 设置button原生的type | String | button、submit、reset | button |
|
||||||
icon | 按钮的图标类型 | String | - | - |
|
||||||
long | 开启后，长度为 100% | Boolean | - | false |
|
||||||
value | 按钮的值，可用于双向绑定 | any | - | - |
|
||||||
|
|
||||||
ButtonGroup props |
|
||||||
|
|
||||||
属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
--- | --- | --- | --- | --- |
|
||||||
size | 大小 | String | large、default、small、xsmall | - |
|
||||||
shape | 形状 | String | - | - |
|
||||||
vertical | 是否纵向排列按钮组 | Boolean | - | - |
|
||||||
value | 按钮的值，可用于双向绑定 | any | - | - |
|
||||||
@ -1,227 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<section class="demo-section"> |
|
||||||
<h4>类型</h4> |
|
||||||
<div> |
|
||||||
<x-button type="info" @click="info">Info</x-button> |
|
||||||
<x-button type="success" @click="success">Success</x-button> |
|
||||||
<x-button type="warning" @click="warning">Warning</x-button> |
|
||||||
<x-button type="error" @click="error">Error</x-button> |
|
||||||
<br><br> |
|
||||||
<x-button>Default</x-button> |
|
||||||
<x-button type="ghost">Ghost</x-button> |
|
||||||
<x-button type="dashed">Dashed</x-button> |
|
||||||
<x-button type="text">Text</x-button> |
|
||||||
<x-button type="ghost" disabled>Ghost(Disabled)</x-button> |
|
||||||
<x-button type="dashed" disabled>Dashed(Disabled)</x-button> |
|
||||||
<x-button type="text" disabled>Text(Disabled)</x-button> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
<section class="demo-section"> |
|
||||||
<h4>形状和图标</h4> |
|
||||||
<div> |
|
||||||
<x-button type="primary" shape="circle" icon="ans-icon-warn-empty" size="small"></x-button> |
|
||||||
<x-button type="primary" icon="ans-icon-search">Plugin</x-button> |
|
||||||
<x-button type="primary" shape="circle" icon="ans-icon-search">Plugin</x-button> |
|
||||||
<x-button type="primary" shape="circle">Circle</x-button> |
|
||||||
<br><br> |
|
||||||
<x-button type="ghost" shape="circle" icon="ans-icon-warn-empty"></x-button> |
|
||||||
<x-button type="ghost" icon="ans-icon-search">Plugin</x-button> |
|
||||||
<x-button type="ghost" shape="circle" icon="ans-icon-search">Plugin</x-button> |
|
||||||
<x-button type="ghost" shape="circle">Circle</x-button> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
<section class="demo-section"> |
|
||||||
<h4>大小</h4> |
|
||||||
<div> |
|
||||||
<x-button type="primary" size="large">Large</x-button> |
|
||||||
<x-button type="primary">Default</x-button> |
|
||||||
<x-button type="primary" size="small">Small</x-button> |
|
||||||
<x-button type="primary" size="xsmall">xSmall</x-button> |
|
||||||
<br><br> |
|
||||||
<x-button type="primary" shape="circle" size="large">Large</x-button> |
|
||||||
<x-button type="primary" shape="circle">Default</x-button> |
|
||||||
<x-button type="primary" shape="circle" size="small">Small</x-button> |
|
||||||
<x-button type="primary" shape="circle" size="xsmall">xSmall</x-button> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
<section class="demo-section"> |
|
||||||
<h4>状态</h4> |
|
||||||
<div> |
|
||||||
<x-button type="primary" disabled @click="info">Primary (Disabled)</x-button> |
|
||||||
<x-button type="dashed" disabled>Dashed (Disabled)</x-button> |
|
||||||
<x-button type="ghost" shape="circle" disabled>Ghost With Circle (Disabled)</x-button> |
|
||||||
<x-button type="primary" icon="ans-icon-search" :loading="spinnerLoading" ref="spinnerBtn" @click="handleLoadClick">Loading...</x-button> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
<section class="demo-section"> |
|
||||||
<h4>基本按钮组</h4> |
|
||||||
<div> |
|
||||||
<x-button-group v-model="checkedValue"> |
|
||||||
<x-button value="1">Cancel</x-button> |
|
||||||
<x-button value="2">Confirm</x-button> |
|
||||||
</x-button-group> |
|
||||||
<x-button-group size="small"> |
|
||||||
<x-button type="ghost">Yesterday</x-button> |
|
||||||
<x-button disabled type="ghost">Today</x-button> |
|
||||||
<x-button type="ghost">Tomorrow</x-button> |
|
||||||
</x-button-group> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
<section class="demo-section"> |
|
||||||
<h4>图标类型</h4> |
|
||||||
<div> |
|
||||||
<x-button-group :size="'large'" shape="circle"> |
|
||||||
<x-button type="primary" icon="ans-icon-search"></x-button> |
|
||||||
<x-button type="primary" icon="ans-icon-more"></x-button> |
|
||||||
<x-button type="primary" icon="ans-icon-close"></x-button> |
|
||||||
<x-button type="primary" icon="ans-icon-more"></x-button> |
|
||||||
</x-button-group> |
|
||||||
<x-button-group shape="circle"> |
|
||||||
<x-button type="primary" icon="ans-icon-arrow-to-left"></x-button> |
|
||||||
<x-button type="primary" icon="ans-icon-arrow-to-right"></x-button> |
|
||||||
</x-button-group> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
<section class="demo-section"> |
|
||||||
<h4>垂直排列</h4> |
|
||||||
<div> |
|
||||||
<x-button-group :vertical="true"> |
|
||||||
<x-button type="ghost" icon="ans-icon-arrow-up"></x-button> |
|
||||||
<x-button type="ghost" icon="ans-icon-arrow-right"></x-button> |
|
||||||
<x-button type="ghost" icon="ans-icon-arrow-down"></x-button> |
|
||||||
<x-button type="ghost" icon="ans-icon-arrow-left"></x-button> |
|
||||||
</x-button-group> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
<section class="demo-section"> |
|
||||||
<h4>圆角</h4> |
|
||||||
<div> |
|
||||||
<x-button-group shape="circle" value="open"> |
|
||||||
<x-button type="primary" value="open">开启</x-button> |
|
||||||
<x-button type="primary" value="close">关闭</x-button> |
|
||||||
</x-button-group> |
|
||||||
<x-button-group shape="circle" value="2"> |
|
||||||
<x-button :visible="false" type="ghost" icon="fa-github">苹果</x-button> |
|
||||||
<x-button type="ghost" icon="fa-html5" value="2">李子</x-button> |
|
||||||
<x-button type="ghost" icon="fa-firefox">橘子</x-button> |
|
||||||
<x-button :visible="false" type="ghost" icon="fa-chrome">香蕉</x-button> |
|
||||||
</x-button-group> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
<section class="demo-section"> |
|
||||||
<h4>大小</h4> |
|
||||||
<div> |
|
||||||
<x-button-group size="large"> |
|
||||||
<x-button type="ghost">Large</x-button> |
|
||||||
<x-button type="ghost">Large</x-button> |
|
||||||
</x-button-group> |
|
||||||
<x-button-group> |
|
||||||
<x-button type="ghost">Default</x-button> |
|
||||||
<x-button type="ghost">Default</x-button> |
|
||||||
</x-button-group> |
|
||||||
<x-button-group size="small"> |
|
||||||
<x-button type="ghost">Small</x-button> |
|
||||||
<x-button type="ghost">Small</x-button> |
|
||||||
</x-button-group> |
|
||||||
<x-button-group size="xsmall"> |
|
||||||
<x-button type="ghost">xSmall</x-button> |
|
||||||
<x-button type="ghost">xSmall</x-button> |
|
||||||
</x-button-group> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<x-button-group size="large" shape="circle"> |
|
||||||
<x-button type="ghost">Large</x-button> |
|
||||||
<x-button type="ghost">Large</x-button> |
|
||||||
</x-button-group> |
|
||||||
<x-button-group shape="circle"> |
|
||||||
<x-button type="ghost">Default</x-button> |
|
||||||
<x-button type="ghost">Default</x-button> |
|
||||||
</x-button-group> |
|
||||||
<x-button-group size="small" shape="circle"> |
|
||||||
<x-button type="ghost">Small</x-button> |
|
||||||
<x-button type="ghost">Small</x-button> |
|
||||||
</x-button-group> |
|
||||||
<x-button-group size="xsmall" shape="circle"> |
|
||||||
<x-button type="ghost">xSmall</x-button> |
|
||||||
<x-button type="ghost">xSmall</x-button> |
|
||||||
</x-button-group> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import { xButton, xButtonGroup } from '../src' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'app', |
|
||||||
data: function () { |
|
||||||
return { |
|
||||||
name: 1, |
|
||||||
timeout: 0, |
|
||||||
spinnerLoading: false, |
|
||||||
checkedValue: '2' // for button-group two-way binding. |
|
||||||
} |
|
||||||
}, |
|
||||||
watch: { |
|
||||||
// Watcher for pipe the button-group value to console |
|
||||||
checkedValue (newValue) { |
|
||||||
console.log(newValue) |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
handleLoadClick () { |
|
||||||
// toggle button `loading` manually |
|
||||||
this.spinnerLoading = !this.spinnerLoading |
|
||||||
var timeout = 10 |
|
||||||
// Simulate a sync progress |
|
||||||
let loop = () => { |
|
||||||
timeout -= 1 |
|
||||||
if (timeout <= 0) { |
|
||||||
// release the async locker |
|
||||||
this.spinnerLoading = false |
|
||||||
return |
|
||||||
} |
|
||||||
setTimeout(loop, 1000) |
|
||||||
} |
|
||||||
setTimeout(loop, 500) |
|
||||||
}, |
|
||||||
handleLockerClick (e, next) { |
|
||||||
this.timeout = 10 |
|
||||||
// Simulate a sync progress |
|
||||||
let loop = () => { |
|
||||||
this.timeout -= 1 |
|
||||||
if (this.timeout <= 0) { |
|
||||||
// release the async locker |
|
||||||
next() |
|
||||||
return |
|
||||||
} |
|
||||||
setTimeout(loop, 1000) |
|
||||||
} |
|
||||||
setTimeout(loop, 500) |
|
||||||
}, |
|
||||||
handleBtnGroupSelected (value) { |
|
||||||
console.log(value) |
|
||||||
}, |
|
||||||
info () { |
|
||||||
// vMessage.info({ content: 'hello word' + (this.name++), duration: 2, onClose: function () {}, closable: false }) |
|
||||||
}, |
|
||||||
success () { |
|
||||||
// message.success({ content: 'hello word' + (this.name++), duration: 2, onClose: function () {}, closable: false }) |
|
||||||
}, |
|
||||||
error () { |
|
||||||
// message.error({ content: 'hello wordhello wordhello word' + (this.name++), duration: 0, onClose: function () {}, closable: true }) |
|
||||||
}, |
|
||||||
loading () { |
|
||||||
// message.loading({ content: 'hello word' + (this.name++), duration: 2, onClose: function () {}, closable: true }) |
|
||||||
}, |
|
||||||
warning () { |
|
||||||
// message.warning({ content: 'hello word' + (this.name++), duration: 2, onClose: function () {}, closable: false }) |
|
||||||
} |
|
||||||
}, |
|
||||||
components: { xButtonGroup, xButton } |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"></style> |
|
||||||
@ -1,16 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<html lang="en"> |
|
||||||
<head> |
|
||||||
<meta charset="UTF-8"> |
|
||||||
<meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"> |
|
||||||
<script src="https://s1.analysys.cn/libs/??js-polyfills/0.1.42/polyfill.min.js"></script> |
|
||||||
<link rel="stylesheet" href="//s2.analysys.cn/libs/??-/@analysys/fss-demo.css@"> |
|
||||||
<link rel="stylesheet" href="../../../src/style/index.scss"> |
|
||||||
<title>demo</title> |
|
||||||
</head> |
|
||||||
<body> |
|
||||||
<div id="app"></div> |
|
||||||
|
|
||||||
<script src="./index.js"></script> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
@ -1,10 +0,0 @@ |
|||||||
import Vue from 'vue' |
|
||||||
import App from './app.vue' |
|
||||||
|
|
||||||
new Vue({ |
|
||||||
el: '#app', |
|
||||||
render: h => h(App), |
|
||||||
mounted () { |
|
||||||
console.log('success') |
|
||||||
} |
|
||||||
}) |
|
||||||
@ -1,7 +0,0 @@ |
|||||||
import xButton from './source/Button.vue' |
|
||||||
import xButtonGroup from './source/ButtonGroup.vue' |
|
||||||
|
|
||||||
export { |
|
||||||
xButton, |
|
||||||
xButtonGroup |
|
||||||
} |
|
||||||
@ -1,145 +0,0 @@ |
|||||||
<template> |
|
||||||
<button |
|
||||||
v-show="visible" |
|
||||||
:type="htmlType" |
|
||||||
:class="wrapClasses" |
|
||||||
:disabled="disabled" |
|
||||||
@click="handleClick" |
|
||||||
> |
|
||||||
<i v-if="icon && !showSpin" :class="['i', iconPrefix, {[icon]:true}]"></i> |
|
||||||
<i v-if="showSpin" :class="spinClasses"></i> |
|
||||||
<span v-if="showSlot" ref="slot"><slot></slot></span> |
|
||||||
</button> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import { LIB_NAME, emitter } from '../../../../src/util' |
|
||||||
const prefixCls = `${LIB_NAME}-btn` |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'xButton', |
|
||||||
|
|
||||||
data: function () { |
|
||||||
return { |
|
||||||
showSlot: true, |
|
||||||
iconPrefix: `${LIB_NAME}-icon`, |
|
||||||
isFirst: false, |
|
||||||
isLast: false |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
mixins: [emitter], |
|
||||||
|
|
||||||
props: { |
|
||||||
type: { |
|
||||||
type: String, |
|
||||||
default: 'primary', |
|
||||||
validator (v) { |
|
||||||
return ['primary', 'ghost', 'dashed', 'text', 'info', 'success', 'warning', 'error'].includes(v) |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
shape: { |
|
||||||
type: String, |
|
||||||
validator (v) { |
|
||||||
return ['circle', ''].includes(v) |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
size: { |
|
||||||
type: String, |
|
||||||
default: 'default', |
|
||||||
validator (v) { |
|
||||||
return ['xsmall', 'small', 'large', 'default'].includes(v) |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
// 设置按钮为加载中状态 |
|
||||||
loading: Boolean, |
|
||||||
|
|
||||||
disabled: Boolean, |
|
||||||
|
|
||||||
visible: { |
|
||||||
type: Boolean, |
|
||||||
default: true |
|
||||||
}, |
|
||||||
|
|
||||||
// 设置 button 原生的 type，可选值为 button、submit、reset |
|
||||||
htmlType: { |
|
||||||
type: String, |
|
||||||
default: 'button', |
|
||||||
validator (v) { |
|
||||||
return ['button', 'submit', 'reset'].includes(v) |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
// 设置按钮的图标类型 |
|
||||||
icon: String, |
|
||||||
|
|
||||||
// 开启后，按钮的长度为 100% |
|
||||||
long: { |
|
||||||
type: Boolean, |
|
||||||
default: false |
|
||||||
}, |
|
||||||
|
|
||||||
// 用于双向绑定 |
|
||||||
value: { |
|
||||||
default: '' |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
computed: { |
|
||||||
showSpin () { |
|
||||||
return this.loading |
|
||||||
}, |
|
||||||
|
|
||||||
spinClasses () { |
|
||||||
return [ this.iconPrefix, `x-fa-spin ${LIB_NAME}-icon-spinner` ] |
|
||||||
}, |
|
||||||
|
|
||||||
wrapClasses () { |
|
||||||
return [ |
|
||||||
`${prefixCls}`, |
|
||||||
{ |
|
||||||
'first-child': this.isFirst, |
|
||||||
'last-child': this.isLast, |
|
||||||
[`${prefixCls}-${this.type}`]: !!this.type, |
|
||||||
[`${prefixCls}-long`]: this.long, |
|
||||||
[`${prefixCls}-${this.shape}`]: !!this.shape, |
|
||||||
[`${prefixCls}-${this.size}`]: !!this.size, |
|
||||||
[`${prefixCls}-loading`]: this.showSpin, |
|
||||||
[`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || this.loading) |
|
||||||
} |
|
||||||
] |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
watch: { |
|
||||||
visible (newVal) { |
|
||||||
this.dispatch('xButtonGroup', 'buttonVisibleChanged') |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
methods: { |
|
||||||
handleClick (...args) { |
|
||||||
if (this.disabled || this.loading) { |
|
||||||
return |
|
||||||
} |
|
||||||
this.$emit('click', ...args) |
|
||||||
}, |
|
||||||
|
|
||||||
handlePositionChange ({ first, last }) { |
|
||||||
this.isFirst = first === this |
|
||||||
this.isLast = last === this |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
mounted () { |
|
||||||
this.showSlot = this.$slots.default !== undefined |
|
||||||
}, |
|
||||||
|
|
||||||
created () { |
|
||||||
this.$on('checkPosition', this.handlePositionChange) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,152 +0,0 @@ |
|||||||
<template> |
|
||||||
<div :class="classes"> |
|
||||||
<slot></slot> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<script> |
|
||||||
import { LIB_NAME, hasClass, addClass, removeClass, emitter } from '../../../../src/util' |
|
||||||
import vButton from './Button.vue' |
|
||||||
|
|
||||||
const prefixCls = `${LIB_NAME}-btn-group` |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'xButtonGroup', |
|
||||||
|
|
||||||
data () { |
|
||||||
return { |
|
||||||
buttons: [], |
|
||||||
checkedList: [], |
|
||||||
activeClass: 'active' |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
mixins: [emitter], |
|
||||||
|
|
||||||
props: { |
|
||||||
size: { |
|
||||||
type: String, |
|
||||||
default: 'default', |
|
||||||
validator (v) { |
|
||||||
return ['xsmall', 'small', 'large', 'default'].includes(v) |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
shape: { |
|
||||||
type: String, |
|
||||||
validator (v) { |
|
||||||
return ['circle', ''].includes(v) |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
vertical: Boolean, |
|
||||||
|
|
||||||
// 用于双向绑定 |
|
||||||
value: { |
|
||||||
default: '' |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
components: { vButton }, |
|
||||||
|
|
||||||
computed: { |
|
||||||
classes () { |
|
||||||
return [ |
|
||||||
`${prefixCls}`, |
|
||||||
{ |
|
||||||
[`${prefixCls}-${this.size}`]: !!this.size, |
|
||||||
[`${prefixCls}-${this.shape}`]: !!this.shape, |
|
||||||
[`${prefixCls}-vertical`]: this.vertical |
|
||||||
} |
|
||||||
] |
|
||||||
}, |
|
||||||
|
|
||||||
firstVisibleChild () { |
|
||||||
return this.buttons.find(b => b.visible) |
|
||||||
}, |
|
||||||
|
|
||||||
lastVisibleChild () { |
|
||||||
for (let i = this.buttons.length - 1; i > 0; i--) { |
|
||||||
const b = this.buttons[i] |
|
||||||
if (b.visible) return b |
|
||||||
} |
|
||||||
return null |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
methods: { |
|
||||||
initComponents () { |
|
||||||
this.buttons = this.$children.filter(v => v.$options.name === 'xButton') |
|
||||||
// sort by rendering index |
|
||||||
this.buttons.sort((a, b) => { |
|
||||||
const aIndex = Array.prototype.indexOf.call(a.$el.parentNode.children, a.$el) |
|
||||||
const bIndex = Array.prototype.indexOf.call(b.$el.parentNode.children, b.$el) |
|
||||||
return aIndex - bIndex |
|
||||||
}) |
|
||||||
this.handleButtonVisible() |
|
||||||
|
|
||||||
this.buttons.forEach(btn => { |
|
||||||
if (!btn._$bind) { |
|
||||||
btn._$bind = true |
|
||||||
btn.$on('click', this.handleChange.bind(this, btn)) |
|
||||||
} |
|
||||||
btn.checked = btn.value !== undefined && btn.value !== '' && btn.value === this.value |
|
||||||
}) |
|
||||||
|
|
||||||
this.$nextTick(() => { |
|
||||||
this.updateModel() |
|
||||||
}) |
|
||||||
}, |
|
||||||
|
|
||||||
updateModel () { |
|
||||||
let activeClass = this.activeClass |
|
||||||
this.buttons.forEach(child => { |
|
||||||
let has = hasClass(child.$el, activeClass) |
|
||||||
if (child.checked) { |
|
||||||
if (!has) addClass(child.$el, activeClass) |
|
||||||
} else { |
|
||||||
if (has) removeClass(child.$el, activeClass) |
|
||||||
} |
|
||||||
}) |
|
||||||
}, |
|
||||||
|
|
||||||
handleChange (child, ...args) { |
|
||||||
if ((this.buttons.length === 1 && this.buttons[0].checked) || child.checked) { |
|
||||||
return |
|
||||||
} |
|
||||||
|
|
||||||
let prev = this.buttons.find(v => v.checked && v !== child) |
|
||||||
if (prev) { |
|
||||||
prev.checked = false |
|
||||||
} |
|
||||||
|
|
||||||
child.checked = true |
|
||||||
|
|
||||||
this.checkedList = this.buttons.filter(o => o.checked).map(o => o.value) |
|
||||||
this.$emit('input', this.checkedList[0], () => this.updateModel()) |
|
||||||
this.updateModel() |
|
||||||
}, |
|
||||||
|
|
||||||
handleButtonVisible () { |
|
||||||
if (!this.buttons.length) return |
|
||||||
|
|
||||||
this.broadcast('xButton', 'checkPosition', { |
|
||||||
first: this.firstVisibleChild, |
|
||||||
last: this.lastVisibleChild |
|
||||||
}) |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
created () { |
|
||||||
this.checkedList = [this.value] |
|
||||||
this.$on('buttonVisibleChanged', this.handleButtonVisible) |
|
||||||
}, |
|
||||||
|
|
||||||
mounted () { |
|
||||||
this.initComponents() |
|
||||||
}, |
|
||||||
|
|
||||||
updated () { |
|
||||||
this.initComponents() |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,32 +0,0 @@ |
|||||||
## Cascader |
|
||||||
|
|
||||||
### Cascader props |
|
||||||
|
|
||||||
| 属性 | 说明 | required | 类型 | 默认值 | |
|
||||||
| :----| :------| :--------| :---:| :------| |
|
||||||
| options | 可选项数据源，键名可通过 props 属性配置, 配置选项: { value, label, html, children, disabled } | Required | Array | - | |
|
||||||
| prop | N/A | Optional | Object | {...} | |
|
||||||
| value | 选中项绑定值 `v-model` | Optional | Array | {...} | |
|
||||||
| separator | N/A | Optional | String | / | |
|
||||||
| placeholder | N/A | Optional | String | 请选择 ... | |
|
||||||
| disabled | N/A | Optional | Any | - | |
|
||||||
| clearable | 是否支持清空选项 | Optional | Any | - | |
|
||||||
| change-on-select | 是否允许选择任意一级的选项 | Optional | Any | - | |
|
||||||
| popper-class | 自定义浮层类名 | Optional | Any | - | |
|
||||||
| expand-trigger | 次级菜单的展开方式 [ click / hover ] | Optional | String | click | |
|
||||||
| filterable | 是否可搜索选项 | Optional | Any | - | |
|
||||||
| no-data-text | 无数据提示 | Optional | String | 暂无数据 | |
|
||||||
| no-match-text | 搜索无结果提示 | Optional | String | 搜索无结果 | |
|
||||||
| multiple | 是否多选 | Optional | Boolean | false | |
|
||||||
| placement | 弹出位置 | Optional | String | bottom-start | |
|
||||||
| distance | 与参考元素距离，单位为 px | Optional | Number | 1 | |
|
||||||
| append-to-body | 弹出层是否插入 body | Optional | Boolean | false | |
|
||||||
| position-fixed | 弹出层是否 fixed 定位 | Boolean | — | false | |
|
||||||
| viewport | 弹出层是否基于 viewport 定位 | Boolean | — | false | |
|
||||||
| popper-options | Popper.js 的可选项 | Optional | Object | — | |
|
||||||
|
|
||||||
### Cascader events |
|
||||||
|
|
||||||
- `on-change` Fired when the selected value is changed. |
|
||||||
|
|
||||||
--- |
|
||||||
@ -1,83 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<section class="demo-section"> |
|
||||||
<h4>基本用法</h4> |
|
||||||
<div> |
|
||||||
<x-cascader |
|
||||||
:options="phones" |
|
||||||
v-model="selectedOptions" |
|
||||||
@on-change="handleChange"> |
|
||||||
</x-cascader> |
|
||||||
</div> |
|
||||||
<br> |
|
||||||
<div> |
|
||||||
<x-cascader |
|
||||||
expand-trigger="hover" |
|
||||||
:options="components" |
|
||||||
v-model="selectedOptions2" |
|
||||||
@on-change="handleChange"> |
|
||||||
</x-cascader> |
|
||||||
</div> |
|
||||||
<br> |
|
||||||
<div> |
|
||||||
<x-cascader |
|
||||||
multiple |
|
||||||
expand-trigger="click" |
|
||||||
:options="components" |
|
||||||
@on-change="handleChange"> |
|
||||||
</x-cascader> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
<section class="demo-section"> |
|
||||||
<h4>允许选择任意一级的选项</h4> |
|
||||||
<div> |
|
||||||
<x-cascader |
|
||||||
change-on-select |
|
||||||
:options="phones" |
|
||||||
:show-all-levels="false" |
|
||||||
@on-change="handleChange"> |
|
||||||
</x-cascader> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
<section class="demo-section"> |
|
||||||
<h4>搜索</h4> |
|
||||||
<div> |
|
||||||
<x-cascader |
|
||||||
filterable |
|
||||||
clearable |
|
||||||
:options="phones" |
|
||||||
@on-change="handleChange"> |
|
||||||
</x-cascader> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import { xCascader } from '../src/index' |
|
||||||
import { phones, components } from './data' |
|
||||||
|
|
||||||
export default { |
|
||||||
data () { |
|
||||||
return { |
|
||||||
phones, |
|
||||||
components, |
|
||||||
selectedOptions: ['xiaomi', 'mi6', ['12878']], |
|
||||||
selectedOptions2: [] |
|
||||||
} |
|
||||||
}, |
|
||||||
components: { xCascader }, |
|
||||||
methods: { |
|
||||||
handleChange (value) { |
|
||||||
console.log(value) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
.ans-cascader-drop__menu .highlight { |
|
||||||
color: red; |
|
||||||
font-weight: normal; |
|
||||||
} |
|
||||||
</style> |
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue