baoliang
6 years ago
374 changed files with 9 additions and 45057 deletions
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> |
|
||||||
@ -1,635 +0,0 @@ |
|||||||
let phones = [ |
|
||||||
{ |
|
||||||
value: '305444499', |
|
||||||
label: '华为', |
|
||||||
html: '<b class="highlight">华</b>为', |
|
||||||
children: [ |
|
||||||
{ |
|
||||||
value: '12840', |
|
||||||
label: '华为 麦芒5', |
|
||||||
children: [{ |
|
||||||
value: '128401', |
|
||||||
label: '华为 麦芒51', |
|
||||||
},{ |
|
||||||
value: '128402', |
|
||||||
label: '华为 麦芒52', |
|
||||||
}] |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12820', |
|
||||||
label: '华为 Mate 9' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12841', |
|
||||||
label: '华为 麦芒5 高配版' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12848', |
|
||||||
label: '华为 P9 Plus' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12850', |
|
||||||
label: '华为 nova' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12879', |
|
||||||
label: '华为 畅享6S' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12886', |
|
||||||
label: '华为 P10' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12918', |
|
||||||
label: '华为 P10 Plus' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '13033', |
|
||||||
label: '华为 nova青春版' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '13036', |
|
||||||
label: '华为 nova 2 Plus' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '13044', |
|
||||||
label: '华为 畅享7 Plus' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '13069', |
|
||||||
label: '华为 揽阅M3' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '1614', |
|
||||||
label: '华为 Mate 8' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '1617', |
|
||||||
label: '华为 畅享5S' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '2435', |
|
||||||
label: '华为 P9' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '537', |
|
||||||
label: '华为 P8 Lite' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '556', |
|
||||||
label: '华为 麦芒3S' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '569', |
|
||||||
label: '华为 Mate S' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '604', |
|
||||||
label: '华为 P8' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '604', |
|
||||||
label: '华为 Ascend P8' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '625', |
|
||||||
label: '华为 Mate 7' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '626', |
|
||||||
label: '华为 P7' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '627', |
|
||||||
label: '华为 P8max' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '629', |
|
||||||
label: '华为 麦芒4' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '635', |
|
||||||
label: '华为 畅享5' |
|
||||||
} |
|
||||||
] |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '560', |
|
||||||
children: [ |
|
||||||
{ |
|
||||||
value: '12834', |
|
||||||
label: '荣耀 8' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12835', |
|
||||||
label: '荣耀 畅玩6X' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12841', |
|
||||||
label: '荣耀 畅玩5C 全网通' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12842', |
|
||||||
label: '荣耀 畅玩5C' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12843', |
|
||||||
label: '荣耀 5A' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12863', |
|
||||||
label: '荣耀 V8 高配版' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12883', |
|
||||||
label: '荣耀 V8' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12888', |
|
||||||
label: '荣耀 Note8' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12946', |
|
||||||
label: '荣耀 8青春版' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12963', |
|
||||||
label: '荣耀 V9' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '13031', |
|
||||||
label: '荣耀 9' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '13066', |
|
||||||
label: '荣耀 Magic' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '538', |
|
||||||
label: '荣耀 畅玩5' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '548', |
|
||||||
label: '荣耀 6' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '553999999', |
|
||||||
label: '荣耀 7i' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '567', |
|
||||||
label: '荣耀 畅玩4X' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '568', |
|
||||||
label: '荣耀 畅玩4C' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '628', |
|
||||||
label: '荣耀 6 Plus' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '662', |
|
||||||
label: '荣耀 7' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '666', |
|
||||||
label: '荣耀 畅玩5X' |
|
||||||
} |
|
||||||
], |
|
||||||
label: '荣耀' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: 'xiaomi', |
|
||||||
children: [ |
|
||||||
{ |
|
||||||
value: '121', |
|
||||||
label: '小米 MI 5' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '1250', |
|
||||||
label: '小米 MI 1S' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '1254', |
|
||||||
label: '小米 MI 2S' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '1255', |
|
||||||
label: '小米 MI 3' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '1256', |
|
||||||
label: '小米 MI 4' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '1262', |
|
||||||
label: '小米 note顶配版' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '1264', |
|
||||||
label: '小米 4C' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12821', |
|
||||||
label: '小米 红米3S' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12830', |
|
||||||
label: '小米 Max' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12859', |
|
||||||
label: '小米 5S' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12866', |
|
||||||
label: '小米 5S plus' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12927', |
|
||||||
label: '小米 Note2' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12928', |
|
||||||
label: '小米 MIX' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: 'mi6', |
|
||||||
label: '小米 6', |
|
||||||
children: [// {{{
|
|
||||||
{ |
|
||||||
value: '12858', |
|
||||||
label: '三星 GALAXY C7' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12878', |
|
||||||
label: '三星 S8003' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '13039', |
|
||||||
label: '三星 GALAXY S8' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '1408', |
|
||||||
label: '三星 Galaxy A5' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '1410', |
|
||||||
label: '三星 Galaxy A8' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '1433', |
|
||||||
label: '三星 Galaxy J5' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '1446', |
|
||||||
label: '三星 Galaxy Note 3' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '1448', |
|
||||||
label: '三星 Galaxy Note 4' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '1449', |
|
||||||
label: '三星 Galaxy Note 5' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '1451', |
|
||||||
label: '三星 Galaxy Note Edge' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '1452', |
|
||||||
label: '三星 Galaxy On7' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '1465', |
|
||||||
label: '三星 Galaxy S5' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '1468', |
|
||||||
label: '三星 Galaxy S6' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '1469', |
|
||||||
label: '三星 Galaxy S6 Edge' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '1470', |
|
||||||
label: '三星 Galaxy S6 Edge+' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '1976', |
|
||||||
label: '三星 Galaxy S7' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '1977', |
|
||||||
label: '三星 Galaxy S7 Edge' |
|
||||||
} |
|
||||||
]// }}}
|
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '13047', |
|
||||||
label: '小米 Max 2' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '947', |
|
||||||
label: '小米 note' |
|
||||||
} |
|
||||||
], |
|
||||||
label: '小米' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '63', |
|
||||||
children: [ |
|
||||||
{ |
|
||||||
value: '1167', |
|
||||||
label: 'vivo X5Pro' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '1191', |
|
||||||
label: 'vivo Y27' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12809', |
|
||||||
label: 'vivo X9' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12814', |
|
||||||
label: 'vivo X7' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12819', |
|
||||||
label: 'vivo X7 Plus' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12823', |
|
||||||
label: 'vivo Y55' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12826', |
|
||||||
label: 'vivo V3Max' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12829', |
|
||||||
label: 'vivo Y67' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12842', |
|
||||||
label: 'vivo X9 Plus' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '12887', |
|
||||||
label: 'vivo Xplay6' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '13068', |
|
||||||
label: 'vivo Xplay 5S' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '13082', |
|
||||||
label: 'vivo X6' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '1641', |
|
||||||
label: 'vivo X6 D' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '1686', |
|
||||||
label: 'vivo X6Plus A' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '1937', |
|
||||||
label: 'vivo X6s' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '1938', |
|
||||||
label: 'vivo X6s A' |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: '2436', |
|
||||||
label: 'vivo Xplay5 旗舰版' |
|
||||||
} |
|
||||||
], |
|
||||||
label: 'vivo', |
|
||||||
disabled: true |
|
||||||
} |
|
||||||
] |
|
||||||
|
|
||||||
let components = [ |
|
||||||
{ |
|
||||||
value: 'zhinan', |
|
||||||
label: '指南', |
|
||||||
disabled: true, |
|
||||||
children: [{ |
|
||||||
value: 'shejiyuanze', |
|
||||||
label: '设计原则', |
|
||||||
children: [{ |
|
||||||
value: 'yizhi', |
|
||||||
label: '一致' |
|
||||||
}, { |
|
||||||
value: 'fankui', |
|
||||||
label: '反馈' |
|
||||||
}, { |
|
||||||
value: 'xiaolv', |
|
||||||
label: '效率' |
|
||||||
}, { |
|
||||||
value: 'kekong', |
|
||||||
label: '可控' |
|
||||||
}] |
|
||||||
}, { |
|
||||||
value: 'daohang', |
|
||||||
label: '导航', |
|
||||||
children: [{ |
|
||||||
value: 'cexiangdaohang', |
|
||||||
label: '侧向导航' |
|
||||||
}, { |
|
||||||
value: 'dingbudaohang', |
|
||||||
label: '顶部导航' |
|
||||||
}] |
|
||||||
}] |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: 'zujian', |
|
||||||
label: '组件', |
|
||||||
children: [{ |
|
||||||
value: 'basic', |
|
||||||
label: 'Basic', |
|
||||||
children: [{ |
|
||||||
value: 'layout', |
|
||||||
label: 'Layout 布局' |
|
||||||
}, { |
|
||||||
value: 'color', |
|
||||||
label: 'Color 色彩' |
|
||||||
}, { |
|
||||||
value: 'typography', |
|
||||||
label: 'Typography 字体' |
|
||||||
}, { |
|
||||||
value: 'icon', |
|
||||||
label: 'Icon 图标' |
|
||||||
}, { |
|
||||||
value: 'button', |
|
||||||
label: 'Button 按钮' |
|
||||||
}] |
|
||||||
}, { |
|
||||||
value: 'form', |
|
||||||
label: 'Form', |
|
||||||
children: [{ |
|
||||||
value: 'radio', |
|
||||||
label: 'Radio 单选框' |
|
||||||
}, { |
|
||||||
value: 'checkbox', |
|
||||||
label: 'Checkbox 多选框' |
|
||||||
}, { |
|
||||||
value: 'input', |
|
||||||
label: 'Input 输入框' |
|
||||||
}, { |
|
||||||
value: 'input-number', |
|
||||||
label: 'InputNumber 计数器' |
|
||||||
}, { |
|
||||||
value: 'select', |
|
||||||
label: 'Select 选择器' |
|
||||||
}, { |
|
||||||
value: 'cascader', |
|
||||||
label: 'Cascader 级联选择器' |
|
||||||
}, { |
|
||||||
value: 'switch', |
|
||||||
label: 'Switch 开关' |
|
||||||
}, { |
|
||||||
value: 'slider', |
|
||||||
label: 'Slider 滑块' |
|
||||||
}, { |
|
||||||
value: 'time-picker', |
|
||||||
label: 'TimePicker 时间选择器' |
|
||||||
}, { |
|
||||||
value: 'date-picker', |
|
||||||
label: 'DatePicker 日期选择器' |
|
||||||
}, { |
|
||||||
value: 'datetime-picker', |
|
||||||
label: 'DateTimePicker 日期时间选择器' |
|
||||||
}, { |
|
||||||
value: 'upload', |
|
||||||
label: 'Upload 上传' |
|
||||||
}, { |
|
||||||
value: 'rate', |
|
||||||
label: 'Rate 评分' |
|
||||||
}, { |
|
||||||
value: 'form', |
|
||||||
label: 'Form 表单' |
|
||||||
}] |
|
||||||
}, { |
|
||||||
value: 'data', |
|
||||||
label: 'Data', |
|
||||||
children: [{ |
|
||||||
value: 'table', |
|
||||||
label: 'Table 表格' |
|
||||||
}, { |
|
||||||
value: 'tag', |
|
||||||
label: 'Tag 标签' |
|
||||||
}, { |
|
||||||
value: 'progress', |
|
||||||
label: 'Progress 进度条' |
|
||||||
}, { |
|
||||||
value: 'tree', |
|
||||||
label: 'Tree 树形控件' |
|
||||||
}, { |
|
||||||
value: 'pagination', |
|
||||||
label: 'Pagination 分页' |
|
||||||
}, { |
|
||||||
value: 'badge', |
|
||||||
label: 'Badge 标记' |
|
||||||
}] |
|
||||||
}, { |
|
||||||
value: 'notice', |
|
||||||
label: 'Notice', |
|
||||||
children: [{ |
|
||||||
value: 'alert', |
|
||||||
label: 'Alert 警告' |
|
||||||
}, { |
|
||||||
value: 'loading', |
|
||||||
label: 'Loading 加载' |
|
||||||
}, { |
|
||||||
value: 'message', |
|
||||||
label: 'Message 消息提示' |
|
||||||
}, { |
|
||||||
value: 'message-box', |
|
||||||
label: 'MessageBox 弹框' |
|
||||||
}, { |
|
||||||
value: 'notification', |
|
||||||
label: 'Notification 通知' |
|
||||||
}] |
|
||||||
}, { |
|
||||||
value: 'navigation', |
|
||||||
label: 'Navigation', |
|
||||||
children: [{ |
|
||||||
value: 'menu', |
|
||||||
label: 'NavMenu 导航菜单' |
|
||||||
}, { |
|
||||||
value: 'tabs', |
|
||||||
label: 'Tabs 标签页' |
|
||||||
}, { |
|
||||||
value: 'breadcrumb', |
|
||||||
label: 'Breadcrumb 面包屑' |
|
||||||
}, { |
|
||||||
value: 'dropdown', |
|
||||||
label: 'Dropdown 下拉菜单' |
|
||||||
}, { |
|
||||||
value: 'steps', |
|
||||||
label: 'Steps 步骤条' |
|
||||||
}] |
|
||||||
}, { |
|
||||||
value: 'others', |
|
||||||
label: 'Others', |
|
||||||
children: [{ |
|
||||||
value: 'dialog', |
|
||||||
label: 'Dialog 对话框' |
|
||||||
}, { |
|
||||||
value: 'tooltip', |
|
||||||
label: 'Tooltip 文字提示' |
|
||||||
}, { |
|
||||||
value: 'popover', |
|
||||||
label: 'Popover 弹出框' |
|
||||||
}, { |
|
||||||
value: 'card', |
|
||||||
label: 'Card 卡片' |
|
||||||
}, { |
|
||||||
value: 'carousel', |
|
||||||
label: 'Carousel 走马灯' |
|
||||||
}, { |
|
||||||
value: 'collapse', |
|
||||||
label: 'Collapse 折叠面板' |
|
||||||
}] |
|
||||||
}] |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: 'ziyuan', |
|
||||||
label: '资源', |
|
||||||
children: [{ |
|
||||||
value: 'axure', |
|
||||||
label: 'Axure Components' |
|
||||||
}, { |
|
||||||
value: 'sketch', |
|
||||||
label: 'Sketch Templates' |
|
||||||
}, { |
|
||||||
value: 'jiaohu', |
|
||||||
label: '组件交互文档' |
|
||||||
}] |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: 'test', |
|
||||||
label: 'Test', |
|
||||||
children: [{ |
|
||||||
value: 'foo', |
|
||||||
label: 'Foo' |
|
||||||
}, { |
|
||||||
value: 'bar', |
|
||||||
label: 'Bar', |
|
||||||
html: '<b class="highlight">Baaa..r</b>' |
|
||||||
}, { |
|
||||||
value: 'kit', |
|
||||||
label: 'Kitty' |
|
||||||
}] |
|
||||||
} |
|
||||||
] |
|
||||||
|
|
||||||
export { phones, components } |
|
||||||
@ -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,8 +0,0 @@ |
|||||||
import xCascader from './source/Cascader.vue' |
|
||||||
|
|
||||||
/* istanbul ignore next */ |
|
||||||
xCascader.install = function (Vue) { |
|
||||||
Vue.component(xCascader.name, xCascader) |
|
||||||
} |
|
||||||
|
|
||||||
export { xCascader } |
|
||||||
@ -1,440 +0,0 @@ |
|||||||
<template> |
|
||||||
<div :class="[prefixCls, 'ans-select', popperClass]" v-click-outside="handleClose"> |
|
||||||
<span> |
|
||||||
<div |
|
||||||
:class="['tag-container', scrollbar]" |
|
||||||
ref="multiple" |
|
||||||
v-if="multiple" |
|
||||||
:style="{maxWidth: (inputWidth - 25) + 'px'}" |
|
||||||
@click="toggle" |
|
||||||
@keydown.esc="handleClose"> |
|
||||||
<span |
|
||||||
class="tag-wrapper" |
|
||||||
v-for="(o, index) in selectedOptions" |
|
||||||
:key="typeof o.value === 'object' ? index : o.value"> |
|
||||||
<span class="tag-text">{{o.label}}</span> |
|
||||||
<i class="remove-tag ans-icon-close" @click.stop="handleRemoveTag(selected, o)"></i> |
|
||||||
</span> |
|
||||||
</div> |
|
||||||
<x-input |
|
||||||
class="inner-input" |
|
||||||
size="default" |
|
||||||
ref="input" |
|
||||||
:value="displayRender" |
|
||||||
:readonly="!filterable" |
|
||||||
:disabled="disabled" |
|
||||||
@input="handleQuery" |
|
||||||
:placeholder="multiple && selectedOptions.length ? '' : placeholder" |
|
||||||
@on-click="toggle" |
|
||||||
@on-click-icon="toggle" |
|
||||||
> |
|
||||||
<template slot="suffix"> |
|
||||||
<i v-if="clearable" v-show="showClear" class="ans-icon-fail-solid clear" @click.stop="handleClear"></i> |
|
||||||
<i v-show="!showClear" class="ans-icon-arrow-down arrow-down" :style="{ transform : visible ? 'rotateZ(180deg)' : '' }"></i> |
|
||||||
</template> |
|
||||||
</x-input> |
|
||||||
</span> |
|
||||||
<transition :name="transitionName"> |
|
||||||
<div ref="popper" :class="getCls('drop')" v-show="visible"> |
|
||||||
<caspanel :data="list" |
|
||||||
:multiple="multiple" |
|
||||||
:prefix-cls="getCls('drop')" |
|
||||||
:trigger="expandTrigger" |
|
||||||
:change-on-select="changeOnSelect" |
|
||||||
v-show="!showFilterList && list.length"> |
|
||||||
</caspanel> |
|
||||||
<div v-show="!showFilterList && !list.length"> |
|
||||||
<ul :class="[getCls('drop__menu'), 'nodata']"> |
|
||||||
<li><i class="ans-icon-no-data"></i></li> |
|
||||||
<li>{{noDataText}}</li> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
<div v-show="showFilterList"> |
|
||||||
<ul v-show="querySelections.length" :class="getCls('drop__menu')" > |
|
||||||
<li |
|
||||||
v-for="(item, i) in querySelections" |
|
||||||
:key="i" |
|
||||||
v-html="item.display" |
|
||||||
:class="getCls('drop__list')" |
|
||||||
@click="handleSelectItem(item)"> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
<ul v-show="!querySelections.length" :class="[getCls('drop__menu'), 'nodata']"> |
|
||||||
<li><i class="ans-icon-search-no-data"></i></li> |
|
||||||
<li>{{noMatchText}}</li> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</transition> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import { LIB_NAME, Popper, emitter, clickOutside, ANIMATION_PREFIX } from '../../../../src/util' |
|
||||||
import { xInput } from '../../../vue-input/src' |
|
||||||
import Caspanel from './Caspanel.vue' |
|
||||||
import { t } from '../../../../src/locale' |
|
||||||
|
|
||||||
const popperMixin = Object.assign({}, Popper, { |
|
||||||
props: { |
|
||||||
placement: { |
|
||||||
type: String, |
|
||||||
default: 'bottom-start' |
|
||||||
}, |
|
||||||
reference: HTMLElement, |
|
||||||
// 与参考元素距离，单位为 px |
|
||||||
distance: { |
|
||||||
type: Number, |
|
||||||
default: 1 |
|
||||||
}, |
|
||||||
appendToBody: { |
|
||||||
type: Boolean, |
|
||||||
default: false |
|
||||||
}, |
|
||||||
positionFixed: { |
|
||||||
type: Boolean, |
|
||||||
default: false |
|
||||||
}, |
|
||||||
viewport: { |
|
||||||
type: Boolean, |
|
||||||
default: false |
|
||||||
}, |
|
||||||
popperOptions: Object |
|
||||||
} |
|
||||||
}) |
|
||||||
const CHILDREN_NAME = 'Caspanel' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'xCascader', |
|
||||||
components: { xInput, Caspanel }, |
|
||||||
mixins: [popperMixin, emitter], |
|
||||||
directives: { clickOutside: clickOutside }, |
|
||||||
data () { |
|
||||||
return { |
|
||||||
prefixCls: `${LIB_NAME}-cascader`, |
|
||||||
scrollbar: `${LIB_NAME}-scrollbar`, |
|
||||||
queryStr: '', |
|
||||||
tmpSelected: [], |
|
||||||
selected: [], |
|
||||||
currentValue: [], |
|
||||||
updatingValue: false, |
|
||||||
list: [], |
|
||||||
childrenKey: 'children', |
|
||||||
transitionName: `${ANIMATION_PREFIX}drop`, |
|
||||||
selectedOptions: [], |
|
||||||
inputWidth: 0 |
|
||||||
} |
|
||||||
}, |
|
||||||
props: { |
|
||||||
// 下拉级连框数据 |
|
||||||
options: { |
|
||||||
type: Array, |
|
||||||
default: () => [] |
|
||||||
}, |
|
||||||
|
|
||||||
// 字段code |
|
||||||
prop: { |
|
||||||
type: Object, |
|
||||||
default () { |
|
||||||
return { |
|
||||||
children: 'children', |
|
||||||
label: 'label', |
|
||||||
value: 'value', |
|
||||||
disabled: 'disabled' |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
// 子菜单触发方式 |
|
||||||
expandTrigger: { |
|
||||||
validator (value) { |
|
||||||
return ['click', 'hover'].indexOf(value) > -1 |
|
||||||
}, |
|
||||||
default: 'click' |
|
||||||
}, |
|
||||||
|
|
||||||
// 是否可清除 |
|
||||||
clearable: { |
|
||||||
type: Boolean, |
|
||||||
default: true |
|
||||||
}, |
|
||||||
|
|
||||||
// 是否禁用 |
|
||||||
disabled: { |
|
||||||
type: Boolean, |
|
||||||
default: false |
|
||||||
}, |
|
||||||
|
|
||||||
placeholder: { |
|
||||||
type: String, |
|
||||||
default () { |
|
||||||
return t('ans.cascader.placeholder') |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
// 是否可搜索 |
|
||||||
filterable: Boolean, |
|
||||||
// 无数据提示文字 |
|
||||||
noDataText: { |
|
||||||
type: String, |
|
||||||
default () { |
|
||||||
return t('ans.cascader.noData') |
|
||||||
} |
|
||||||
}, |
|
||||||
// 无数据提示文字 |
|
||||||
noMatchText: { |
|
||||||
type: String, |
|
||||||
default () { |
|
||||||
return t('ans.cascader.noMatch') |
|
||||||
} |
|
||||||
}, |
|
||||||
changeOnSelect: Boolean, |
|
||||||
value: { |
|
||||||
type: Array, |
|
||||||
default: () => [] |
|
||||||
}, |
|
||||||
separator: { |
|
||||||
type: String, |
|
||||||
default: '/' |
|
||||||
}, |
|
||||||
popperClass: String, |
|
||||||
multiple: Boolean |
|
||||||
}, |
|
||||||
watch: { |
|
||||||
value: { |
|
||||||
deep: true, |
|
||||||
immediate: true, |
|
||||||
handler (val, oldVal) { |
|
||||||
if (JSON.stringify(val) !== JSON.stringify(oldVal)) { |
|
||||||
this.currentValue = val |
|
||||||
if (!val.length) this.selected = [] |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
currentValue (val, oldVal) { |
|
||||||
if (JSON.stringify(val) !== oldVal) { |
|
||||||
this.$emit('input', this.currentValue) |
|
||||||
if (this.updatingValue) { |
|
||||||
this.updatingValue = false |
|
||||||
return |
|
||||||
} |
|
||||||
this.updateSelected(true) |
|
||||||
} |
|
||||||
}, |
|
||||||
options: { |
|
||||||
deep: true, |
|
||||||
immediate: true, |
|
||||||
handler (val) { |
|
||||||
this.list = this.handlerData(val) |
|
||||||
} |
|
||||||
}, |
|
||||||
visible (val) { |
|
||||||
this.broadcast(CHILDREN_NAME, 'on-visible-change', val) |
|
||||||
} |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
showFilterList () { |
|
||||||
return this.filterable && this.queryStr !== '' |
|
||||||
}, |
|
||||||
// 是否显示清除按钮 |
|
||||||
showClear () { |
|
||||||
return this.currentValue && this.currentValue.length && this.clearable && !this.disabled |
|
||||||
}, |
|
||||||
|
|
||||||
displayRender () { |
|
||||||
let label = [] |
|
||||||
|
|
||||||
for (let i = 0; i < this.selected.length; i++) { |
|
||||||
let item = this.isArray(this.selected[i]) && this.selected[i].length |
|
||||||
? this.selected[i][0].label |
|
||||||
: this.selected[i].label |
|
||||||
label.push(item) |
|
||||||
} |
|
||||||
return this.multiple ? '' : label.join(this.separator) |
|
||||||
}, |
|
||||||
|
|
||||||
// filter list |
|
||||||
querySelections () { |
|
||||||
let selections = [] |
|
||||||
let _this = this |
|
||||||
function getSelections (arr, label, value) { |
|
||||||
for (let i = 0; i < arr.length; i++) { |
|
||||||
let item = arr[i] |
|
||||||
item.__label = label ? label + ' / ' + item.label : item.label |
|
||||||
item.__value = value ? value + ',' + item.value : item.value |
|
||||||
|
|
||||||
let obj = { |
|
||||||
label: item.__label, |
|
||||||
value: item.__value, |
|
||||||
display: item.__label, |
|
||||||
item: item, |
|
||||||
disabled: !!item.disabled |
|
||||||
} |
|
||||||
if (item.children && item.children.length) { |
|
||||||
getSelections(item.children, item.__label, item.__value) |
|
||||||
_this.changeOnSelect && selections.unshift(obj) |
|
||||||
delete item.__label |
|
||||||
delete item.__value |
|
||||||
} else { |
|
||||||
selections.unshift(obj) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
getSelections(this.list) |
|
||||||
selections = selections.filter(item => { |
|
||||||
return item.label ? item.label.indexOf(this.queryStr) > -1 : false |
|
||||||
}).map(item => { |
|
||||||
item.display = item.display.replace(new RegExp(this.queryStr, 'g'), `<span>${this.queryStr}</span>`) |
|
||||||
return item |
|
||||||
}) |
|
||||||
return selections |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
toggle () { |
|
||||||
if (this.disabled) return |
|
||||||
this.visible = !this.visible |
|
||||||
this.$refs.input.focus() |
|
||||||
}, |
|
||||||
handleClear () { |
|
||||||
const oldVal = JSON.stringify(this.currentValue) |
|
||||||
this.currentValue = this.selected = this.selectedOptions = this.tmpSelected = [] |
|
||||||
this.handleClose() |
|
||||||
this.emitValue(this.currentValue, oldVal) |
|
||||||
this.broadcast(CHILDREN_NAME, 'on-clear', true) |
|
||||||
this.setInputHeight() |
|
||||||
}, |
|
||||||
updateResult (result) { |
|
||||||
this.tmpSelected = result |
|
||||||
}, |
|
||||||
emitValue (val, oldVal) { |
|
||||||
if (JSON.stringify(val) !== oldVal) { |
|
||||||
this.$emit('on-change', this.currentValue, JSON.parse(JSON.stringify(this.selected))) |
|
||||||
} |
|
||||||
}, |
|
||||||
updateSelected (init = false) { |
|
||||||
if (!this.changeOnSelect || init) { |
|
||||||
this.broadcast(CHILDREN_NAME, 'on-find-selected', { value: this.currentValue }) |
|
||||||
} |
|
||||||
}, |
|
||||||
handleClose () { |
|
||||||
this.visible = false |
|
||||||
}, |
|
||||||
handleQuery () { |
|
||||||
this.visible = true |
|
||||||
this.queryStr = this.$refs.input.currentValue.trim() |
|
||||||
this.updateElementHandler() |
|
||||||
}, |
|
||||||
handleSelectItem (item) { |
|
||||||
this.queryStr = '' |
|
||||||
this.$refs.input.currentValue = '' |
|
||||||
const oldVal = JSON.stringify(this.currentValue) |
|
||||||
this.currentValue = item.value.split(',') |
|
||||||
this.emitValue(this.currentValue, oldVal) |
|
||||||
this.handleClose() |
|
||||||
}, |
|
||||||
handlerData (arr) { |
|
||||||
let list = JSON.parse(JSON.stringify(arr)) |
|
||||||
|
|
||||||
list.forEach(t => { |
|
||||||
Object.keys(this.prop).forEach(v => { |
|
||||||
if (!t[v]) { |
|
||||||
let val = t[this.prop[v]] |
|
||||||
t[v] = (v === this.childrenKey && val) ? this.handlerData(val) : val |
|
||||||
} |
|
||||||
}) |
|
||||||
}) |
|
||||||
|
|
||||||
return list |
|
||||||
}, |
|
||||||
getCls (cls) { |
|
||||||
return this.prefixCls + '-' + cls |
|
||||||
}, |
|
||||||
|
|
||||||
// 多选时，删除单个 |
|
||||||
handleRemoveTag (arr, o) { |
|
||||||
if (!arr) return |
|
||||||
|
|
||||||
arr.forEach((v, i) => { |
|
||||||
if (v.value === o.value) { |
|
||||||
arr.splice(i, 1) |
|
||||||
this.setInputHeight() |
|
||||||
this.updateValue(arr) |
|
||||||
return false |
|
||||||
} else { |
|
||||||
this.isArray(v) && this.handleRemoveTag(v, o) |
|
||||||
} |
|
||||||
}) |
|
||||||
}, |
|
||||||
isArray (obj) { |
|
||||||
return Object.prototype.toString.call(obj) === '[object Array]' |
|
||||||
}, |
|
||||||
setInputHeight () { |
|
||||||
const { input, multiple } = this.$refs |
|
||||||
if (!input || !multiple) return |
|
||||||
|
|
||||||
this.$nextTick(() => { |
|
||||||
const calculateHeight = multiple.clientHeight + 4 |
|
||||||
input.$refs.input.style.height = Math.max(32, calculateHeight) + 'px' |
|
||||||
this.updateElementHandler() |
|
||||||
}) |
|
||||||
}, |
|
||||||
|
|
||||||
// 根据selected,得到只包含value的对应数组 |
|
||||||
getNewVal (selected) { |
|
||||||
let newVal = [] |
|
||||||
|
|
||||||
selected.forEach((item) => { |
|
||||||
if (this.isArray(item)) { |
|
||||||
const tmp = [] |
|
||||||
this.selectedOptions = item |
|
||||||
item.forEach(v => { |
|
||||||
tmp.push(v.value) |
|
||||||
}) |
|
||||||
newVal.push(tmp) |
|
||||||
} else { |
|
||||||
newVal.push(item.value) |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
return newVal |
|
||||||
}, |
|
||||||
updateValue (newVal) { |
|
||||||
this.updatingValue = true |
|
||||||
let oldVal = this.currentValue |
|
||||||
this.currentValue = newVal |
|
||||||
this.emitValue(this.currentValue, oldVal) |
|
||||||
}, |
|
||||||
onResultChange () { |
|
||||||
this.$on('on-result-change', (params) => { |
|
||||||
let { lastValue, changeOnSelect, formInit } = params |
|
||||||
!this.multiple && lastValue && !formInit && (this.handleClose()) |
|
||||||
|
|
||||||
let newVal = [] |
|
||||||
if (lastValue || changeOnSelect) { |
|
||||||
this.selected = this.tmpSelected |
|
||||||
newVal = this.getNewVal(this.selected) |
|
||||||
} |
|
||||||
|
|
||||||
if (!formInit) { |
|
||||||
this.setInputHeight() |
|
||||||
this.updateValue(newVal) |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
}, |
|
||||||
created () { |
|
||||||
this.onResultChange() |
|
||||||
}, |
|
||||||
mounted () { |
|
||||||
this.updateSelected(true) |
|
||||||
this.$refs.reference = this.$el |
|
||||||
if (this.$refs.input) { |
|
||||||
this.inputWidth = this.$refs.input.$el.clientWidth |
|
||||||
} |
|
||||||
}, |
|
||||||
beforeDestroy () { |
|
||||||
this.$off('on-result-change') |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,213 +0,0 @@ |
|||||||
<template> |
|
||||||
<span style="white-space: nowrap"> |
|
||||||
<ul v-if="data && data.length" :class="prefixCls+ '__menu'"> |
|
||||||
<li v-for="item in data" |
|
||||||
@click.stop="handleClickItem(item)" |
|
||||||
@mouseenter.stop="handleHoverItem(item)" |
|
||||||
:class="itemClass(item)"> |
|
||||||
<a v-html="item.html || item.label" href="javascript:;"></a> |
|
||||||
<i :class="iconClass(item)"></i> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
<Caspanel |
|
||||||
:data="subList" :trigger="trigger" |
|
||||||
:prefix-cls="prefixCls" |
|
||||||
:multiple="multiple" |
|
||||||
v-show="curItem.length" |
|
||||||
:change-on-select=changeOnSelect |
|
||||||
style="margin-left: -5px;" |
|
||||||
v-if="subList && subList.length"> |
|
||||||
</Caspanel> |
|
||||||
</span> |
|
||||||
</template> |
|
||||||
<script> |
|
||||||
import { emitter, findComponentDownward, scrollIntoView } from '../../../../src/util' |
|
||||||
const PARENT_NAME = 'xCascader' |
|
||||||
const PANEL_NAME = 'Caspanel' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: PANEL_NAME, |
|
||||||
mixins: [emitter], |
|
||||||
data() { |
|
||||||
return { |
|
||||||
subList: [], |
|
||||||
|
|
||||||
// 选中的item |
|
||||||
curItem: [], |
|
||||||
} |
|
||||||
}, |
|
||||||
watch: { |
|
||||||
data () { |
|
||||||
this.subList = [] |
|
||||||
this.curItem = [] |
|
||||||
} |
|
||||||
}, |
|
||||||
props: { |
|
||||||
data: { |
|
||||||
type: Array, |
|
||||||
default: () => [] |
|
||||||
}, |
|
||||||
trigger: { |
|
||||||
validator (value) { |
|
||||||
return ['click', 'hover'].indexOf(value) > -1 |
|
||||||
}, |
|
||||||
default: 'click' |
|
||||||
}, |
|
||||||
changeOnSelect: Boolean, |
|
||||||
prefixCls: String, |
|
||||||
multiple: Boolean |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
getCurItem(item, fromInit) { |
|
||||||
const baseItem = this.getBaseItem(item) |
|
||||||
|
|
||||||
if (fromInit) { |
|
||||||
this.curItem.push(baseItem) |
|
||||||
} else if (this.multiple) { |
|
||||||
const index = this.inTmp(baseItem) |
|
||||||
if (!~index) { |
|
||||||
this.hasChildren(item) && (this.curItem = []) |
|
||||||
this.curItem.forEach((v, i) => { |
|
||||||
const id = this.data.findIndex(t => t.value === v.value && this.hasChildren(t)); |
|
||||||
~id && this.curItem.splice(i, 1) |
|
||||||
}) |
|
||||||
this.curItem.push(baseItem) |
|
||||||
} else { |
|
||||||
this.curItem.splice(index, 1) |
|
||||||
} |
|
||||||
} else { |
|
||||||
this.curItem = [baseItem] |
|
||||||
} |
|
||||||
}, |
|
||||||
// 处理item触发 |
|
||||||
handleTriggerItem (item, fromInit) { |
|
||||||
if (item.disabled) return |
|
||||||
|
|
||||||
this.subList = [] |
|
||||||
|
|
||||||
this.hasChildren(item) && (this.subList = item.children) |
|
||||||
this.getCurItem(item, fromInit) |
|
||||||
this.emitUpdate(this.curItem); |
|
||||||
|
|
||||||
this.dispatch(PARENT_NAME, 'on-result-change', { |
|
||||||
lastValue: !this.hasChildren(item), |
|
||||||
changeOnSelect: this.changeOnSelect, |
|
||||||
fromInit: fromInit |
|
||||||
}); |
|
||||||
}, |
|
||||||
handleClickItem(item) { |
|
||||||
if (this.trigger !== 'click' && this.hasChildren(item)) return |
|
||||||
this.handleTriggerItem(item) |
|
||||||
}, |
|
||||||
handleHoverItem(item) { |
|
||||||
if (this.trigger !== 'hover' || !this.hasChildren(item)) return |
|
||||||
this.handleTriggerItem(item) |
|
||||||
}, |
|
||||||
getBaseItem (item) { |
|
||||||
let backItem = Object.assign({}, item); |
|
||||||
backItem.children && delete backItem.children; |
|
||||||
|
|
||||||
return backItem; |
|
||||||
}, |
|
||||||
updateResult (item) { |
|
||||||
this.emitUpdate(this.result = this.curItem.concat(item)) |
|
||||||
}, |
|
||||||
// 调用父级方法 更新result |
|
||||||
emitUpdate (result) { |
|
||||||
this.$parent.updateResult(result[0] && result[0].__label != undefined ? [result] : result); |
|
||||||
}, |
|
||||||
inTmp(item) { |
|
||||||
return this.curItem.findIndex(t => t.value === item.value && t.label === item.label) |
|
||||||
}, |
|
||||||
itemClass(item) { |
|
||||||
return [ |
|
||||||
`${this.prefixCls}__list`, |
|
||||||
{ |
|
||||||
'active': ~this.inTmp(item), |
|
||||||
'disabled': item.disabled |
|
||||||
} |
|
||||||
] |
|
||||||
}, |
|
||||||
iconClass(item) { |
|
||||||
return [ |
|
||||||
{ |
|
||||||
'selected-mark': !this.hasChildren(item) && this.multiple, |
|
||||||
'ans-icon-arrow-right': this.hasChildren(item) |
|
||||||
} |
|
||||||
] |
|
||||||
}, |
|
||||||
hasChildren(item) { |
|
||||||
return item && item.children && item.children.length |
|
||||||
}, |
|
||||||
onFindSelected() { |
|
||||||
this.$on('on-find-selected', (params) => { |
|
||||||
const val = params.value; |
|
||||||
let value = [...val]; |
|
||||||
|
|
||||||
for (let i = 0; i < value.length; i++) { |
|
||||||
for (let j = 0; j < this.data.length; j++) { |
|
||||||
if (typeof value[i] === 'object') { |
|
||||||
value[i].forEach(t => { |
|
||||||
if (t === this.data[j].value) { |
|
||||||
value[i].splice(0, 1) |
|
||||||
this.handleTriggerItem(this.data[j], true); |
|
||||||
this.$nextTick(() => { |
|
||||||
this.broadcast(PANEL_NAME, 'on-find-selected', {value: value}); |
|
||||||
}); |
|
||||||
return false |
|
||||||
} |
|
||||||
}) |
|
||||||
} else if (value[i] === this.data[j].value) { |
|
||||||
value.splice(0, 1); |
|
||||||
this.handleTriggerItem(this.data[j], true); |
|
||||||
this.$nextTick(() => { |
|
||||||
this.broadcast(PANEL_NAME, 'on-find-selected', {value: value}); |
|
||||||
}); |
|
||||||
return false; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
}, |
|
||||||
onClear() { |
|
||||||
this.$on('on-clear', (deep = false) => { |
|
||||||
this.sublist = []; |
|
||||||
this.curItem = []; |
|
||||||
if (deep) { |
|
||||||
const panel = findComponentDownward(this, PANEL_NAME); |
|
||||||
panel && panel.$emit('on-clear', true); |
|
||||||
} |
|
||||||
}); |
|
||||||
}, |
|
||||||
onVisibleChange() { |
|
||||||
let _this = this |
|
||||||
|
|
||||||
_this.$on('on-visible-change', (val) => { |
|
||||||
val && _this.$nextTick(() => { |
|
||||||
let actives = document.getElementsByClassName('ans-cascader-drop__list active') |
|
||||||
for (let item = 0; item < actives.length; item ++) { |
|
||||||
scrollIntoView(actives[item].parentNode, actives[item]) |
|
||||||
} |
|
||||||
|
|
||||||
this.broadcast(PANEL_NAME, 'drop-visible-change', val); |
|
||||||
actives = null |
|
||||||
}) |
|
||||||
}) |
|
||||||
} |
|
||||||
}, |
|
||||||
mounted () { |
|
||||||
// 初始化已选的值 |
|
||||||
this.onFindSelected() |
|
||||||
|
|
||||||
// 清空 |
|
||||||
this.onClear() |
|
||||||
|
|
||||||
this.onVisibleChange() |
|
||||||
}, |
|
||||||
beforeDestroy() { |
|
||||||
this.$off('on-find-selected') |
|
||||||
this.$off('on-clear') |
|
||||||
this.$off('on-visible-change') |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,31 +0,0 @@ |
|||||||
## Checkbox |
|
||||||
|
|
||||||
用于一组可选项多项选择，或者单独用于标记切换某种状态。 |
|
||||||
|
|
||||||
### Checkbox props |
|
||||||
|
|
||||||
属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
--- | --- | --- | --- | --- |
|
||||||
value | 单独使用时有效，可用于v-model双向绑定 | String / Number / Boolean | - | - |
|
||||||
label | 组合使用时有效，指定当前选项value值 | String / Number / Boolean | - | - |
|
||||||
disabled | 是否禁用 | Boolean | - | false |
|
||||||
true-value | 自定义选中时的值 | String / Number / Boolean | - | true |
|
||||||
false-value | 自定义未选中时的值 | String / Number / Boolean | - | false |
|
||||||
|
|
||||||
### Checkbox events |
|
||||||
|
|
||||||
事件名称 | 说明 | 回调参数 |
|
||||||
--- | --- | --- |
|
||||||
on-change | 在选项状态发生改变时触发，返回当前状态。通过修改外部的数据改变时不会触发 | 选中的 Checkbox value 值 |
|
||||||
|
|
||||||
### CheckboxGroup props |
|
||||||
|
|
||||||
属性 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
--- | --- | --- | --- | --- |
|
||||||
value | 当前选中的值，可用于v-model双向绑定 | Array | - | [] |
|
||||||
|
|
||||||
### CheckboxGroup events |
|
||||||
|
|
||||||
事件名称 | 说明 | 回调参数 |
|
||||||
--- | --- | --- |
|
||||||
on-change | 在选项状态发生改变时触发，返回当前状态。通过修改外部的数据改变时不会触发 | 选中的 Checkbox label 值 |
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue