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