Merge pull request #9 from FairyEver/dev
theme system Former-commit-id: bd393478006813b4566c67fad5d7aba4a15d8d03 Former-commit-id: d72851d36b5f230079bcf52869aabbb26e9809fb Former-commit-id: 8df4b5ceee27b589abcec99c34d1d33315fc167d
This commit is contained in:
李杨
GitHub
@@ -81,6 +81,10 @@ module.exports = {
|
|||||||
test: /\.scss$/,
|
test: /\.scss$/,
|
||||||
loaders: ["style", "css", "sass"]
|
loaders: ["style", "css", "sass"]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
test: /\.md$/,
|
||||||
|
loaders: ["text-loader"]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
|
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
|
||||||
loader: 'url-loader',
|
loader: 'url-loader',
|
||||||
|
|||||||
@@ -11,6 +11,7 @@
|
|||||||
* [ 修复 ] 首次加载 loading 样式类名和程序内类名冲突，新的加载类名使用 `d2-app-loading` 前缀
|
* [ 修复 ] 首次加载 loading 样式类名和程序内类名冲突，新的加载类名使用 `d2-app-loading` 前缀
|
||||||
* [ 修改 ] 所有类似 `dd-` 的样式前缀(包括自动注册图标的id前缀)统一改为 `d2-`
|
* [ 修改 ] 所有类似 `dd-` 的样式前缀(包括自动注册图标的id前缀)统一改为 `d2-`
|
||||||
* [ 修复 ] 修复 `highlight` 组件和 `markdown` 组件的样式冲突
|
* [ 修复 ] 修复 `highlight` 组件和 `markdown` 组件的样式冲突
|
||||||
|
* [ 修改 ] 内置组件名称统一改为 `d2-` 前缀，统一使用横线连接 (kebab-case) 风格
|
||||||
|
|
||||||
## v1.0.0
|
## v1.0.0
|
||||||
|
|
||||||
|
|||||||
@@ -80,6 +80,7 @@
|
|||||||
"semver": "^5.3.0",
|
"semver": "^5.3.0",
|
||||||
"shelljs": "^0.7.6",
|
"shelljs": "^0.7.6",
|
||||||
"svg-sprite-loader": "^3.6.2",
|
"svg-sprite-loader": "^3.6.2",
|
||||||
|
"text-loader": "0.0.1",
|
||||||
"uglifyjs-webpack-plugin": "^1.1.1",
|
"uglifyjs-webpack-plugin": "^1.1.1",
|
||||||
"url-loader": "^0.5.8",
|
"url-loader": "^0.5.8",
|
||||||
"vue-loader": "^13.3.0",
|
"vue-loader": "^13.3.0",
|
||||||
|
|||||||
@@ -1,10 +1,13 @@
|
|||||||
// element 样式补丁
|
// element 样式补丁
|
||||||
|
|
||||||
.el-card {
|
.el-card {
|
||||||
box-shadow: none;
|
&.is-always-shadow {
|
||||||
&:hover {
|
box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
|
||||||
// box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
|
}
|
||||||
box-shadow: none;
|
&.is-hover-shadow {
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
156
src/assets/style/theme/d2/index.scss
Normal file
156
src/assets/style/theme/d2/index.scss
Normal file
@@ -0,0 +1,156 @@
|
|||||||
|
@import '../theme.scss';
|
||||||
|
@import './setting.scss';
|
||||||
|
|
||||||
|
.theme-#{$theme-name} {
|
||||||
|
|
||||||
|
.layout-main {
|
||||||
|
background-color: $theme-bg-color;
|
||||||
|
// background-image: url($theme-bg-image);
|
||||||
|
}
|
||||||
|
// 菜单项目
|
||||||
|
@mixin theme-menu-hover-style {
|
||||||
|
color: $theme-menu-item-color-hover;
|
||||||
|
i {
|
||||||
|
color: $theme-menu-item-color-hover;
|
||||||
|
}
|
||||||
|
background-color: $theme-menu-item-background-color-hover;
|
||||||
|
}
|
||||||
|
.el-submenu__title:hover {
|
||||||
|
@include theme-menu-hover-style;
|
||||||
|
}
|
||||||
|
.el-menu-item:hover {
|
||||||
|
@include theme-menu-hover-style;
|
||||||
|
}
|
||||||
|
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
|
||||||
|
@include theme-menu-hover-style;
|
||||||
|
}
|
||||||
|
.el-menu--horizontal .el-menu .el-submenu__title:hover {
|
||||||
|
@include theme-menu-hover-style;
|
||||||
|
}
|
||||||
|
|
||||||
|
// [组件] d2-container-full
|
||||||
|
.d2-container-full {
|
||||||
|
border: $theme-container-border;
|
||||||
|
border-bottom: none;
|
||||||
|
.d2-container-full__header {
|
||||||
|
border-bottom: $theme-container-border;
|
||||||
|
}
|
||||||
|
.d2-container-full__footer {
|
||||||
|
border-top: $theme-container-border;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// [组件] d2-container-card
|
||||||
|
.d2-container-card {
|
||||||
|
border: $theme-container-border;
|
||||||
|
.el-card__header {
|
||||||
|
border-bottom: $theme-container-border;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 顶栏
|
||||||
|
.el-header {
|
||||||
|
// 切换按钮
|
||||||
|
.toggle-aside-btn {
|
||||||
|
i {
|
||||||
|
color: $theme-header-item-color;
|
||||||
|
background-color: $theme-header-item-background-color;
|
||||||
|
&:hover {
|
||||||
|
color: $theme-header-item-color-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 顶栏菜单
|
||||||
|
.el-menu {
|
||||||
|
.el-menu-item {
|
||||||
|
transition: border-top-color 0s;
|
||||||
|
color: $theme-header-item-color;
|
||||||
|
background-color: $theme-header-item-background-color;
|
||||||
|
&:hover {
|
||||||
|
color: $theme-header-item-color-hover;
|
||||||
|
background-color: $theme-header-item-background-color-hover;
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
color: $theme-header-item-color-focus;
|
||||||
|
background-color: $theme-header-item-background-color-focus;
|
||||||
|
}
|
||||||
|
&.is-active {
|
||||||
|
color: $theme-header-item-color-active;
|
||||||
|
background-color: $theme-header-item-background-color-active;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-submenu {
|
||||||
|
.el-submenu__title {
|
||||||
|
transition: border-top-color 0s;
|
||||||
|
color: $theme-header-item-color;
|
||||||
|
background-color: $theme-header-item-background-color;
|
||||||
|
.el-submenu__icon-arrow {
|
||||||
|
color: $theme-header-item-color;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
color: $theme-header-item-color-hover;
|
||||||
|
background-color: $theme-header-item-background-color-hover;
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
color: $theme-header-item-color-focus;
|
||||||
|
background-color: $theme-header-item-background-color-focus;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 顶栏右侧
|
||||||
|
.d2-header-right {
|
||||||
|
.btn-text {
|
||||||
|
color: $theme-header-item-color;
|
||||||
|
&.can-hover {
|
||||||
|
&:hover {
|
||||||
|
color: $theme-header-item-color-hover;
|
||||||
|
background-color: $theme-header-item-background-color-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// [布局] 顶栏下面
|
||||||
|
.el-container {
|
||||||
|
// 侧边栏
|
||||||
|
.el-aside {
|
||||||
|
// [菜单] 正常状态
|
||||||
|
.el-menu {
|
||||||
|
.el-menu-item {
|
||||||
|
color: $theme-aside-item-color;
|
||||||
|
background-color: $theme-aside-item-background-color;
|
||||||
|
i {
|
||||||
|
color: $theme-aside-item-color;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
color: $theme-aside-item-color-hover;
|
||||||
|
background-color: $theme-aside-item-background-color-hover;
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
color: $theme-aside-item-color-focus;
|
||||||
|
background-color: $theme-aside-item-background-color-focus;
|
||||||
|
}
|
||||||
|
&.is-active {
|
||||||
|
color: $theme-aside-item-color-active;
|
||||||
|
background-color: $theme-aside-item-background-color-active;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-submenu {
|
||||||
|
.el-submenu__title {
|
||||||
|
color: $theme-aside-item-color;
|
||||||
|
background-color: $theme-aside-item-background-color;
|
||||||
|
i {
|
||||||
|
color: $theme-aside-item-color;
|
||||||
|
}
|
||||||
|
.el-submenu__icon-arrow {
|
||||||
|
color: $theme-aside-item-color;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
color: $theme-aside-item-color-hover;
|
||||||
|
background-color: $theme-aside-item-background-color-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
38
src/assets/style/theme/d2/setting.scss
Normal file
38
src/assets/style/theme/d2/setting.scss
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
// 主题名称
|
||||||
|
$theme-name: 'd2';
|
||||||
|
// 主题背景颜色
|
||||||
|
$theme-bg-color: $color-bg;
|
||||||
|
// 主题背景图片
|
||||||
|
// $theme-bg-image: '/static/image/bg/xxx.jpg';
|
||||||
|
// container组件的边框
|
||||||
|
$theme-container-border: 1px solid $color-border-1;
|
||||||
|
|
||||||
|
// 顶栏和侧边栏中展开的菜单 hover 状态下
|
||||||
|
$theme-menu-item-color-hover: #293849;
|
||||||
|
$theme-menu-item-background-color-hover: #ecf5ff;
|
||||||
|
|
||||||
|
// 顶栏上的文字颜色
|
||||||
|
$theme-header-item-color: $color-text-normal;
|
||||||
|
$theme-header-item-background-color: transparent;
|
||||||
|
// 顶栏上的项目在 hover 时
|
||||||
|
$theme-header-item-color-hover: $color-text-main;
|
||||||
|
$theme-header-item-background-color-hover: rgba(#000, .02);
|
||||||
|
// 顶栏上的项目在 focus 时
|
||||||
|
$theme-header-item-color-focus: $color-text-main;
|
||||||
|
$theme-header-item-background-color-focus: rgba(#000, .02);
|
||||||
|
// 顶栏上的项目在 active 时
|
||||||
|
$theme-header-item-color-active: $color-text-main;
|
||||||
|
$theme-header-item-background-color-active: rgba(#000, .03);
|
||||||
|
|
||||||
|
// 侧边栏上的文字颜色
|
||||||
|
$theme-aside-item-color: $color-text-normal;
|
||||||
|
$theme-aside-item-background-color: transparent;
|
||||||
|
// 侧边栏上的项目在 hover 时
|
||||||
|
$theme-aside-item-color-hover: $color-text-main;
|
||||||
|
$theme-aside-item-background-color-hover: rgba(#000, .02);
|
||||||
|
// 侧边栏上的项目在 focus 时
|
||||||
|
$theme-aside-item-color-focus: $color-text-main;
|
||||||
|
$theme-aside-item-background-color-focus: rgba(#000, .02);
|
||||||
|
// 侧边栏上的项目在 active 时
|
||||||
|
$theme-aside-item-color-active: $color-text-main;
|
||||||
|
$theme-aside-item-background-color-active: rgba(#000, .03);
|
||||||
@@ -1,20 +1,19 @@
|
|||||||
@import '../theme.scss';
|
@import '../theme.scss';
|
||||||
|
@import './setting.scss';
|
||||||
$theme-name: 'star';
|
|
||||||
$theme-bg-color: #EFF4F8;
|
|
||||||
$theme-bg-image: '/static/image/bg/star.jpg';
|
|
||||||
$theme-container-full-border-color: #d8dfea;
|
|
||||||
|
|
||||||
.theme-#{$theme-name} {
|
.theme-#{$theme-name} {
|
||||||
.theme {
|
|
||||||
|
.layout-main {
|
||||||
background-color: $theme-bg-color;
|
background-color: $theme-bg-color;
|
||||||
background-image: url($theme-bg-image);
|
background-image: url($theme-bg-image);
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
}
|
}
|
||||||
// 菜单项目
|
// 菜单项目
|
||||||
@mixin theme-menu-hover-style {
|
@mixin theme-menu-hover-style {
|
||||||
background-color: #eff4f8;
|
color: $theme-menu-item-color-hover;
|
||||||
|
i {
|
||||||
|
color: $theme-menu-item-color-hover;
|
||||||
|
}
|
||||||
|
background-color: $theme-menu-item-background-color-hover;
|
||||||
}
|
}
|
||||||
.el-submenu__title:hover {
|
.el-submenu__title:hover {
|
||||||
@include theme-menu-hover-style;
|
@include theme-menu-hover-style;
|
||||||
@@ -28,13 +27,21 @@ $theme-container-full-border-color: #d8dfea;
|
|||||||
.el-menu--horizontal .el-menu .el-submenu__title:hover {
|
.el-menu--horizontal .el-menu .el-submenu__title:hover {
|
||||||
@include theme-menu-hover-style;
|
@include theme-menu-hover-style;
|
||||||
}
|
}
|
||||||
|
|
||||||
// [组件] d2-container-full
|
// [组件] d2-container-full
|
||||||
.d2-container-full {
|
.d2-container-full {
|
||||||
.d2-container-full__header {
|
.d2-container-full__header {
|
||||||
border-bottom: 1px solid $theme-container-full-border-color;
|
border-bottom: $theme-container-border;
|
||||||
}
|
}
|
||||||
.d2-container-full__footer {
|
.d2-container-full__footer {
|
||||||
border-top: 1px solid $theme-container-full-border-color;
|
border-top: $theme-container-border;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// [组件] d2-container-card
|
||||||
|
.d2-container-card {
|
||||||
|
border: $theme-container-border;
|
||||||
|
.el-card__header {
|
||||||
|
border-bottom: $theme-container-border;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 顶栏
|
// 顶栏
|
||||||
@@ -42,9 +49,10 @@ $theme-container-full-border-color: #d8dfea;
|
|||||||
// 切换按钮
|
// 切换按钮
|
||||||
.toggle-aside-btn {
|
.toggle-aside-btn {
|
||||||
i {
|
i {
|
||||||
color: #FFF;
|
color: $theme-header-item-color;
|
||||||
|
background-color: $theme-header-item-background-color;
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #FFF;
|
color: $theme-header-item-color-hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -52,29 +60,36 @@ $theme-container-full-border-color: #d8dfea;
|
|||||||
.el-menu {
|
.el-menu {
|
||||||
.el-menu-item {
|
.el-menu-item {
|
||||||
transition: border-top-color 0s;
|
transition: border-top-color 0s;
|
||||||
color: #FFF;
|
color: $theme-header-item-color;
|
||||||
|
background-color: $theme-header-item-background-color;
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: rgba(#FFF, .3);
|
color: $theme-header-item-color-hover;
|
||||||
|
background-color: $theme-header-item-background-color-hover;
|
||||||
}
|
}
|
||||||
&:focus {
|
&:focus {
|
||||||
background-color: rgba(#FFF, .3);
|
color: $theme-header-item-color-focus;
|
||||||
|
background-color: $theme-header-item-background-color-focus;
|
||||||
}
|
}
|
||||||
&.is-active {
|
&.is-active {
|
||||||
background-color: rgba(#000, .3);
|
color: $theme-header-item-color-active;
|
||||||
|
background-color: $theme-header-item-background-color-active;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.el-submenu {
|
.el-submenu {
|
||||||
.el-submenu__title {
|
.el-submenu__title {
|
||||||
transition: border-top-color 0s;
|
transition: border-top-color 0s;
|
||||||
color: #FFF;
|
color: $theme-header-item-color;
|
||||||
|
background-color: $theme-header-item-background-color;
|
||||||
|
.el-submenu__icon-arrow {
|
||||||
|
color: $theme-header-item-color;
|
||||||
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: rgba(#FFF, .3);
|
color: $theme-header-item-color-hover;
|
||||||
|
background-color: $theme-header-item-background-color-hover;
|
||||||
}
|
}
|
||||||
&:focus {
|
&:focus {
|
||||||
background-color: rgba(#FFF, .3);
|
color: $theme-header-item-color-focus;
|
||||||
}
|
background-color: $theme-header-item-background-color-focus;
|
||||||
.el-submenu__icon-arrow {
|
|
||||||
color: #FFF;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -82,9 +97,12 @@ $theme-container-full-border-color: #d8dfea;
|
|||||||
// 顶栏右侧
|
// 顶栏右侧
|
||||||
.d2-header-right {
|
.d2-header-right {
|
||||||
.btn-text {
|
.btn-text {
|
||||||
color: #FFF;
|
color: $theme-header-item-color;
|
||||||
&:hover {
|
&.can-hover {
|
||||||
background-color: rgba(#FFF, .1);
|
&:hover {
|
||||||
|
color: $theme-header-item-color-hover;
|
||||||
|
background-color: $theme-header-item-background-color-hover;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -96,32 +114,38 @@ $theme-container-full-border-color: #d8dfea;
|
|||||||
// [菜单] 正常状态
|
// [菜单] 正常状态
|
||||||
.el-menu {
|
.el-menu {
|
||||||
.el-menu-item {
|
.el-menu-item {
|
||||||
color: #FFF;
|
color: $theme-aside-item-color;
|
||||||
|
background-color: $theme-aside-item-background-color;
|
||||||
|
i {
|
||||||
|
color: $theme-aside-item-color;
|
||||||
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: rgba(#FFF, .3);
|
color: $theme-aside-item-color-hover;
|
||||||
|
background-color: $theme-aside-item-background-color-hover;
|
||||||
}
|
}
|
||||||
&:focus {
|
&:focus {
|
||||||
background-color: rgba(#FFF, .3);
|
color: $theme-aside-item-color-focus;
|
||||||
}
|
background-color: $theme-aside-item-background-color-focus;
|
||||||
i {
|
|
||||||
color: #FFF;
|
|
||||||
}
|
}
|
||||||
&.is-active {
|
&.is-active {
|
||||||
background-color: rgba(#000, .3);
|
color: $theme-aside-item-color-active;
|
||||||
|
background-color: $theme-aside-item-background-color-active;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.el-submenu {
|
.el-submenu {
|
||||||
.el-submenu__title {
|
.el-submenu__title {
|
||||||
color: #FFF;
|
color: $theme-aside-item-color;
|
||||||
&:hover {
|
background-color: $theme-aside-item-background-color;
|
||||||
background-color: rgba(#FFF, .3);
|
|
||||||
}
|
|
||||||
i {
|
i {
|
||||||
color: #FFF;
|
color: $theme-aside-item-color;
|
||||||
}
|
}
|
||||||
.el-submenu__icon-arrow {
|
.el-submenu__icon-arrow {
|
||||||
color: #FFF;
|
color: $theme-aside-item-color;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
color: $theme-aside-item-color-hover;
|
||||||
|
background-color: $theme-aside-item-background-color-hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
38
src/assets/style/theme/star/setting.scss
Normal file
38
src/assets/style/theme/star/setting.scss
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
// 主题名称
|
||||||
|
$theme-name: 'star';
|
||||||
|
// 主题背景颜色
|
||||||
|
$theme-bg-color: #EFF4F8;
|
||||||
|
// 主题背景图片
|
||||||
|
$theme-bg-image: '/static/image/bg/star.jpg';
|
||||||
|
// container组件的边框
|
||||||
|
$theme-container-border: 1px solid #d8dfea;
|
||||||
|
|
||||||
|
// 顶栏和侧边栏中展开的菜单 hover 状态下
|
||||||
|
$theme-menu-item-color-hover: #293849;
|
||||||
|
$theme-menu-item-background-color-hover: #ecf5ff;
|
||||||
|
|
||||||
|
// 顶栏上的文字颜色
|
||||||
|
$theme-header-item-color: #FFF;
|
||||||
|
$theme-header-item-background-color: transparent;
|
||||||
|
// 顶栏上的项目在 hover 时
|
||||||
|
$theme-header-item-color-hover: #FFF;
|
||||||
|
$theme-header-item-background-color-hover: rgba(#000, .2);
|
||||||
|
// 顶栏上的项目在 focus 时
|
||||||
|
$theme-header-item-color-focus: #FFF;
|
||||||
|
$theme-header-item-background-color-focus: rgba(#000, .2);
|
||||||
|
// 顶栏上的项目在 active 时
|
||||||
|
$theme-header-item-color-active: #FFF;
|
||||||
|
$theme-header-item-background-color-active: rgba(#000, .3);
|
||||||
|
|
||||||
|
// 侧边栏上的文字颜色
|
||||||
|
$theme-aside-item-color: #FFF;
|
||||||
|
$theme-aside-item-background-color: transparent;
|
||||||
|
// 侧边栏上的项目在 hover 时
|
||||||
|
$theme-aside-item-color-hover: #FFF;
|
||||||
|
$theme-aside-item-background-color-hover: rgba(#000, .2);
|
||||||
|
// 侧边栏上的项目在 focus 时
|
||||||
|
$theme-aside-item-color-focus: #FFF;
|
||||||
|
$theme-aside-item-background-color-focus: rgba(#000, .2);
|
||||||
|
// 侧边栏上的项目在 active 时
|
||||||
|
$theme-aside-item-color-active: #FFF;
|
||||||
|
$theme-aside-item-background-color-active: rgba(#000, .3);
|
||||||
@@ -1,9 +1,11 @@
|
|||||||
@import '~@/assets/style/public.scss';
|
@import '~@/assets/style/public.scss';
|
||||||
|
|
||||||
// 主题公用
|
// 主题公用
|
||||||
.theme {
|
.layout-main {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
// [布局] 顶栏
|
// [布局] 顶栏
|
||||||
.el-header {
|
.el-header {
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container-component" :class="{responsive}">
|
<div class="container-component" :class="{responsive}">
|
||||||
<!-- [card] 卡片容器 -->
|
<!-- [card] 卡片容器 -->
|
||||||
<el-card v-if="type === 'card'" class="d2-mr d2-mb">
|
<el-card v-if="type === 'card'" shadow="never" class="d2-container-card d2-mr d2-mb">
|
||||||
<slot v-if="$slots.header" name="header" slot="header"/>
|
<slot v-if="$slots.header" name="header" slot="header"/>
|
||||||
<slot/>
|
<slot/>
|
||||||
</el-card>
|
</el-card>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
effect="dark"
|
effect="dark"
|
||||||
:content="isFullScreen ? '退出全屏' : '全屏'"
|
:content="isFullScreen ? '退出全屏' : '全屏'"
|
||||||
placement="bottom">
|
placement="bottom">
|
||||||
<el-button class="d2-mr btn-text" type="text" @click="toggleFullScreen">
|
<el-button class="d2-mr btn-text can-hover" type="text" @click="toggleFullScreen">
|
||||||
<d2-icon v-if="isFullScreen" name="compress"/>
|
<d2-icon v-if="isFullScreen" name="compress"/>
|
||||||
<d2-icon v-else name="arrows-alt"/>
|
<d2-icon v-else name="arrows-alt"/>
|
||||||
</el-button>
|
</el-button>
|
||||||
|
|||||||
@@ -1,28 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-tooltip effect="dark" content="theme" placement="bottom">
|
<el-tooltip effect="dark" content="theme" placement="bottom">
|
||||||
<el-button class="d2-ml-0 d2-mr btn-text" type="text" @click="dialogVisible = true">
|
<el-button class="d2-ml-0 d2-mr btn-text can-hover" type="text" @click="dialogVisible = true">
|
||||||
<d2-icon name="diamond"/>
|
<d2-icon name="diamond"/>
|
||||||
</el-button>
|
</el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
<el-dialog title="主题" :visible.sync="dialogVisible">
|
<el-dialog title="主题" width="600px" :visible.sync="dialogVisible">
|
||||||
<el-table :data="tableData">
|
<d2-theme-list/>
|
||||||
<el-table-column prop="name" label="主题名称" width="100"></el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="预览"
|
|
||||||
width="220">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<div
|
|
||||||
class="theme-preview"
|
|
||||||
:style="{'backgroundImage': `url(${ scope.row.preview })`}">
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
prop="address"
|
|
||||||
label="地址">
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -31,29 +15,8 @@
|
|||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
dialogVisible: false,
|
dialogVisible: false
|
||||||
tableData: [
|
|
||||||
{
|
|
||||||
name: 'd2admin',
|
|
||||||
preview: '/static/image/theme-preview/d2admin@2x.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'star',
|
|
||||||
preview: '/static/image/theme-preview/star@2x.png'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import '~@/assets/style/public.scss';
|
|
||||||
.theme-preview {
|
|
||||||
height: 100px;
|
|
||||||
width: 200px;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-size: cover;
|
|
||||||
border: 1px solid $color-border-1;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-container class="layout-main theme">
|
<el-container class="layout-main">
|
||||||
<!-- 顶栏 -->
|
<!-- 顶栏 -->
|
||||||
<el-header>
|
<el-header>
|
||||||
<div class="logo-group" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
|
<div class="logo-group" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
|
||||||
@@ -29,6 +29,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { mapMutations } from 'vuex'
|
||||||
export default {
|
export default {
|
||||||
name: 'd2-layout-main',
|
name: 'd2-layout-main',
|
||||||
components: {
|
components: {
|
||||||
@@ -44,11 +45,21 @@ export default {
|
|||||||
// [侧边栏宽度] 折叠状态
|
// [侧边栏宽度] 折叠状态
|
||||||
asideWidthCollapse: '65px'
|
asideWidthCollapse: '65px'
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
// 加载主题
|
||||||
|
this.loadTheme()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapMutations([
|
||||||
|
'loadTheme'
|
||||||
|
])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
// 主题
|
// 主题
|
||||||
|
@import '~@/assets/style/theme/d2/index.scss';
|
||||||
@import '~@/assets/style/theme/star/index.scss';
|
@import '~@/assets/style/theme/star/index.scss';
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
53
src/components/core/d2-theme-list/index.vue
Normal file
53
src/components/core/d2-theme-list/index.vue
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
<template>
|
||||||
|
<el-table :data="themeList" v-bind="table">
|
||||||
|
<el-table-column prop="name" align="center" width="160"/>
|
||||||
|
<el-table-column label="预览" width="220">
|
||||||
|
<div slot-scope="scope" class="theme-preview" :style="{'backgroundImage': `url(${ scope.row.preview })`}"></div>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="address" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button type="primary" @click="handleSelectTheme(scope.row.value)">使用</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapState, mapMutations } from 'vuex'
|
||||||
|
export default {
|
||||||
|
name: 'd2-theme-list',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
table: {
|
||||||
|
showHeader: false,
|
||||||
|
border: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
themeList: state => state.theme.list,
|
||||||
|
themeName: state => state.theme.name
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapMutations([
|
||||||
|
'setTheme'
|
||||||
|
]),
|
||||||
|
handleSelectTheme (themeName) {
|
||||||
|
this.setTheme(themeName)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '~@/assets/style/public.scss';
|
||||||
|
.theme-preview {
|
||||||
|
height: 100px;
|
||||||
|
width: 200px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-size: cover;
|
||||||
|
border: 1px solid $color-border-1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -14,5 +14,6 @@ Vue.component('d2-icon', () => import('@/components/core/d2-icon'))
|
|||||||
Vue.component('d2-icon-select', () => import('@/components/core/d2-icon-select/index.vue'))
|
Vue.component('d2-icon-select', () => import('@/components/core/d2-icon-select/index.vue'))
|
||||||
Vue.component('d2-icon-svg', () => import('@/components/core/d2-icon-svg/index.vue'))
|
Vue.component('d2-icon-svg', () => import('@/components/core/d2-icon-svg/index.vue'))
|
||||||
Vue.component('d2-markdown', () => import('@/components/core/d2-markdown'))
|
Vue.component('d2-markdown', () => import('@/components/core/d2-markdown'))
|
||||||
Vue.component('d2-quill', () => import('@/components/core/d2-quill'))
|
|
||||||
Vue.component('d2-mde', () => import('@/components/core/d2-mde'))
|
Vue.component('d2-mde', () => import('@/components/core/d2-mde'))
|
||||||
|
Vue.component('d2-quill', () => import('@/components/core/d2-quill'))
|
||||||
|
Vue.component('d2-theme-list', () => import('@/components/core/d2-theme-list'))
|
||||||
|
|||||||
@@ -57,8 +57,5 @@ new Vue({
|
|||||||
i18n,
|
i18n,
|
||||||
router,
|
router,
|
||||||
template: '<App/>',
|
template: '<App/>',
|
||||||
components: { App },
|
components: { App }
|
||||||
mounted () {
|
|
||||||
document.body.className = 'theme-star'
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -10,8 +10,8 @@ const demoPlugins = {
|
|||||||
title: '模拟数据',
|
title: '模拟数据',
|
||||||
children: [
|
children: [
|
||||||
{ path: `${pre}mock/ajax`, title: '拦截异步请求' },
|
{ path: `${pre}mock/ajax`, title: '拦截异步请求' },
|
||||||
{ path: `${pre}mock/dpd`, title: 'DPD规则' },
|
{ path: `${pre}mock/dpd`, title: 'DPD 规则' },
|
||||||
{ path: `${pre}mock/dtd`, title: 'DTD规则' }
|
{ path: `${pre}mock/dtd`, title: 'DTD 规则' }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -40,8 +40,8 @@ const demoPlugins = {
|
|||||||
},
|
},
|
||||||
{ path: `${pre}build`, title: '环境区分' },
|
{ path: `${pre}build`, title: '环境区分' },
|
||||||
{ path: `${pre}clipboard-polyfill`, title: '剪贴板访问' },
|
{ path: `${pre}clipboard-polyfill`, title: '剪贴板访问' },
|
||||||
{ path: `${pre}js-cookie`, title: 'cookie读写' },
|
{ path: `${pre}js-cookie`, title: 'Cookie 读写' },
|
||||||
{ path: `${pre}timeago`, title: '计算已经过去的时间' }
|
{ path: `${pre}timeago`, title: '时间差计算' }
|
||||||
])('/demo/plugins/')
|
])('/demo/plugins/')
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -58,7 +58,7 @@ const demoComponents = {
|
|||||||
children: [
|
children: [
|
||||||
{ path: `${pre}container/full`, title: '填满' },
|
{ path: `${pre}container/full`, title: '填满' },
|
||||||
{ path: `${pre}container/ghost`, title: '隐形' },
|
{ path: `${pre}container/ghost`, title: '隐形' },
|
||||||
{ path: `${pre}container/normal`, title: '一般' }
|
{ path: `${pre}container/card`, title: '卡片' }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -14,6 +14,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
name: 'd2-demo-chart-card-header',
|
||||||
props: {
|
props: {
|
||||||
title: {
|
title: {
|
||||||
type: String,
|
type: String,
|
||||||
@@ -2,50 +2,50 @@
|
|||||||
<d2-container type="ghost" :responsive="true" class="demo-chart-index">
|
<d2-container type="ghost" :responsive="true" class="demo-chart-index">
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col class="col" :span="8">
|
<el-col class="col" :span="8">
|
||||||
<el-card class="header-in">
|
<el-card shadow="never" class="header-in">
|
||||||
<ChartCardHeader slot="header" @refresh="handleRefreshData(0)" title="<d2-chart-line-base/>"></ChartCardHeader>
|
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(0)" title="<d2-chart-line-base/>"></d2-demo-chart-card-header>
|
||||||
<d2-chart-line-base :ref="chart[0].refName" v-bind="chart[0]" @ready="isReady(0)"></d2-chart-line-base>
|
<d2-chart-line-base :ref="chart[0].refName" v-bind="chart[0]" @ready="isReady(0)"></d2-chart-line-base>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col class="col" :span="8">
|
<el-col class="col" :span="8">
|
||||||
<el-card class="header-in">
|
<el-card shadow="never" class="header-in">
|
||||||
<ChartCardHeader slot="header" @refresh="handleRefreshData(1)" title="<d2-chart-line-step/>"></ChartCardHeader>
|
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(1)" title="<d2-chart-line-step/>"></d2-demo-chart-card-header>
|
||||||
<d2-chart-line-step :ref="chart[1].refName" v-bind="chart[1]" @ready="isReady(1)"></d2-chart-line-step>
|
<d2-chart-line-step :ref="chart[1].refName" v-bind="chart[1]" @ready="isReady(1)"></d2-chart-line-step>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col class="col" :span="8">
|
<el-col class="col" :span="8">
|
||||||
<el-card class="header-in">
|
<el-card shadow="never" class="header-in">
|
||||||
<ChartCardHeader slot="header" @refresh="handleRefreshData(2)" title="<d2-chart-column-base/>"></ChartCardHeader>
|
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(2)" title="<d2-chart-column-base/>"></d2-demo-chart-card-header>
|
||||||
<d2-chart-column-base :ref="chart[2].refName" v-bind="chart[2]" @ready="isReady(2)"></d2-chart-column-base>
|
<d2-chart-column-base :ref="chart[2].refName" v-bind="chart[2]" @ready="isReady(2)"></d2-chart-column-base>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col class="col" :span="8">
|
<el-col class="col" :span="8">
|
||||||
<el-card class="header-in">
|
<el-card shadow="never" class="header-in">
|
||||||
<ChartCardHeader slot="header" @refresh="handleRefreshData(3)" title="<d2-chart-bar-base/>"></ChartCardHeader>
|
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(3)" title="<d2-chart-bar-base/>"></d2-demo-chart-card-header>
|
||||||
<d2-chart-bar-base :ref="chart[3].refName" v-bind="chart[3]" @ready="isReady(3)"></d2-chart-bar-base>
|
<d2-chart-bar-base :ref="chart[3].refName" v-bind="chart[3]" @ready="isReady(3)"></d2-chart-bar-base>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col class="col" :span="8">
|
<el-col class="col" :span="8">
|
||||||
<el-card class="header-in">
|
<el-card shadow="never" class="header-in">
|
||||||
<ChartCardHeader slot="header" @refresh="handleRefreshData(4)" title="<d2-chart-pie-base/>"></ChartCardHeader>
|
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(4)" title="<d2-chart-pie-base/>"></d2-demo-chart-card-header>
|
||||||
<d2-chart-pie-base :ref="chart[4].refName" v-bind="chart[4]" @ready="isReady(4)"></d2-chart-pie-base>
|
<d2-chart-pie-base :ref="chart[4].refName" v-bind="chart[4]" @ready="isReady(4)"></d2-chart-pie-base>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col class="col" :span="8">
|
<el-col class="col" :span="8">
|
||||||
<el-card class="header-in">
|
<el-card shadow="never" class="header-in">
|
||||||
<ChartCardHeader slot="header" @refresh="handleRefreshData(5)" title="<d2-chart-nightingale-rose-base/>"></ChartCardHeader>
|
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(5)" title="<d2-chart-nightingale-rose-base/>"></d2-demo-chart-card-header>
|
||||||
<d2-chart-nightingale-rose-base :ref="chart[5].refName" v-bind="chart[5]" @ready="isReady(5)"></d2-chart-nightingale-rose-base>
|
<d2-chart-nightingale-rose-base :ref="chart[5].refName" v-bind="chart[5]" @ready="isReady(5)"></d2-chart-nightingale-rose-base>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col class="col" :span="8">
|
<el-col class="col" :span="8">
|
||||||
<el-card class="header-in">
|
<el-card shadow="never" class="header-in">
|
||||||
<ChartCardHeader slot="header" @refresh="handleRefreshData(6)" title="<d2-chart-radar-base/>"></ChartCardHeader>
|
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(6)" title="<d2-chart-radar-base/>"></d2-demo-chart-card-header>
|
||||||
<d2-chart-radar-base :ref="chart[6].refName" v-bind="chart[6]" @ready="isReady(6)"></d2-chart-radar-base>
|
<d2-chart-radar-base :ref="chart[6].refName" v-bind="chart[6]" @ready="isReady(6)"></d2-chart-radar-base>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col class="col" :span="8">
|
<el-col class="col" :span="8">
|
||||||
<el-card class="header-in">
|
<el-card shadow="never" class="header-in">
|
||||||
<ChartCardHeader slot="header" @refresh="handleRefreshData(7)" title="<d2-chart-area-base/>"></ChartCardHeader>
|
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(7)" title="<d2-chart-area-base/>"></d2-demo-chart-card-header>
|
||||||
<d2-chart-area-base :ref="chart[7].refName" v-bind="chart[7]" @ready="isReady(7)"></d2-chart-area-base>
|
<d2-chart-area-base :ref="chart[7].refName" v-bind="chart[7]" @ready="isReady(7)"></d2-chart-area-base>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
@@ -56,7 +56,7 @@
|
|||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
ChartCardHeader: () => import('./components/ChartCardHeader')
|
'd2-demo-chart-card-header': () => import('./components/d2-demo-chart-card-header')
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
|||||||
@@ -1,11 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost" :responsive="true">
|
<d2-container type="ghost" :responsive="true">
|
||||||
<ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
|
<d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
|
||||||
<d2-chart-pie-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-pie-base>
|
<d2-chart-pie-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-pie-base>
|
||||||
</ChartDemoCard>
|
</d2-demo-chart-card>
|
||||||
<el-card>
|
|
||||||
<d2-markdown url="/static/md/组件 - 图表.md"/>
|
|
||||||
</el-card>
|
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -1,11 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost" :responsive="true">
|
<d2-container type="ghost" :responsive="true">
|
||||||
<ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
|
<d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
|
||||||
<d2-chart-area-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-area-base>
|
<d2-chart-area-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-area-base>
|
||||||
</ChartDemoCard>
|
</d2-demo-chart-card>
|
||||||
<el-card>
|
|
||||||
<d2-markdown url="/static/md/组件 - 图表.md"/>
|
|
||||||
</el-card>
|
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -1,11 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost" :responsive="true">
|
<d2-container type="ghost" :responsive="true">
|
||||||
<ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
|
<d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
|
||||||
<d2-chart-bar-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-bar-base>
|
<d2-chart-bar-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-bar-base>
|
||||||
</ChartDemoCard>
|
</d2-demo-chart-card>
|
||||||
<el-card>
|
|
||||||
<d2-markdown url="/static/md/组件 - 图表.md"/>
|
|
||||||
</el-card>
|
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -1,11 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost" :responsive="true">
|
<d2-container type="ghost" :responsive="true">
|
||||||
<ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
|
<d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
|
||||||
<d2-chart-column-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-column-base>
|
<d2-chart-column-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-column-base>
|
||||||
</ChartDemoCard>
|
</d2-demo-chart-card>
|
||||||
<el-card>
|
|
||||||
<d2-markdown url="/static/md/组件 - 图表.md"/>
|
|
||||||
</el-card>
|
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -1,11 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost" :responsive="true">
|
<d2-container type="ghost" :responsive="true">
|
||||||
<ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
|
<d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
|
||||||
<d2-chart-line-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-line-base>
|
<d2-chart-line-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-line-base>
|
||||||
</ChartDemoCard>
|
</d2-demo-chart-card>
|
||||||
<el-card>
|
|
||||||
<d2-markdown url="/static/md/组件 - 图表.md"/>
|
|
||||||
</el-card>
|
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -1,11 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost" :responsive="true">
|
<d2-container type="ghost" :responsive="true">
|
||||||
<ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
|
<d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
|
||||||
<d2-chart-line-step slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-line-step>
|
<d2-chart-line-step slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-line-step>
|
||||||
</ChartDemoCard>
|
</d2-demo-chart-card>
|
||||||
<el-card>
|
|
||||||
<d2-markdown url="/static/md/组件 - 图表.md"/>
|
|
||||||
</el-card>
|
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
ChartDemoCard: () => import('../components/ChartDemoCard.vue')
|
'd2-demo-chart-card': () => import('../components/d2-demo-chart-card.vue')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,11 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost" :responsive="true">
|
<d2-container type="ghost" :responsive="true">
|
||||||
<ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
|
<d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
|
||||||
<d2-chart-nightingale-rose-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-nightingale-rose-base>
|
<d2-chart-nightingale-rose-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-nightingale-rose-base>
|
||||||
</ChartDemoCard>
|
</d2-demo-chart-card>
|
||||||
<el-card>
|
|
||||||
<d2-markdown url="/static/md/组件 - 图表.md"/>
|
|
||||||
</el-card>
|
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -1,11 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost" :responsive="true">
|
<d2-container type="ghost" :responsive="true">
|
||||||
<ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
|
<d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
|
||||||
<d2-chart-radar-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-radar-base>
|
<d2-chart-radar-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-radar-base>
|
||||||
</ChartDemoCard>
|
</d2-demo-chart-card>
|
||||||
<el-card>
|
|
||||||
<d2-markdown url="/static/md/组件 - 图表.md"/>
|
|
||||||
</el-card>
|
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -14,6 +14,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
name: 'd2-demo-chart-card-header',
|
||||||
props: {
|
props: {
|
||||||
title: {
|
title: {
|
||||||
type: String,
|
type: String,
|
||||||
@@ -3,57 +3,57 @@
|
|||||||
<d2-grid-layout v-bind="layout" @layout-updated="layoutUpdatedHandler">
|
<d2-grid-layout v-bind="layout" @layout-updated="layoutUpdatedHandler">
|
||||||
<!-- 卡片 -->
|
<!-- 卡片 -->
|
||||||
<d2-grid-item v-bind="layout.layout[0]" @resized="handleResized(chart[0].refName)">
|
<d2-grid-item v-bind="layout.layout[0]" @resized="handleResized(chart[0].refName)">
|
||||||
<el-card class="header-in">
|
<el-card shadow="never" class="header-in">
|
||||||
<ChartCardHeader slot="header" @refresh="handleRefreshData(0)" title="d2-chart-line-base"></ChartCardHeader>
|
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(0)" title="d2-chart-line-base"></d2-demo-chart-card-header>
|
||||||
<d2-chart-line-base :ref="chart[0].refName" v-bind="chart[0]" @ready="isReady(0)"></d2-chart-line-base>
|
<d2-chart-line-base :ref="chart[0].refName" v-bind="chart[0]" @ready="isReady(0)"></d2-chart-line-base>
|
||||||
</el-card>
|
</el-card>
|
||||||
</d2-grid-item>
|
</d2-grid-item>
|
||||||
<!-- 卡片 -->
|
<!-- 卡片 -->
|
||||||
<d2-grid-item v-bind="layout.layout[1]" @resized="handleResized(chart[1].refName)">
|
<d2-grid-item v-bind="layout.layout[1]" @resized="handleResized(chart[1].refName)">
|
||||||
<el-card class="header-in">
|
<el-card shadow="never" class="header-in">
|
||||||
<ChartCardHeader slot="header" @refresh="handleRefreshData(1)" title="d2-chart-line-step"></ChartCardHeader>
|
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(1)" title="d2-chart-line-step"></d2-demo-chart-card-header>
|
||||||
<d2-chart-line-step :ref="chart[1].refName" v-bind="chart[1]" @ready="isReady(1)"></d2-chart-line-step>
|
<d2-chart-line-step :ref="chart[1].refName" v-bind="chart[1]" @ready="isReady(1)"></d2-chart-line-step>
|
||||||
</el-card>
|
</el-card>
|
||||||
</d2-grid-item>
|
</d2-grid-item>
|
||||||
<!-- 卡片 -->
|
<!-- 卡片 -->
|
||||||
<d2-grid-item v-bind="layout.layout[2]" @resized="handleResized(chart[2].refName)">
|
<d2-grid-item v-bind="layout.layout[2]" @resized="handleResized(chart[2].refName)">
|
||||||
<el-card class="header-in">
|
<el-card shadow="never" class="header-in">
|
||||||
<ChartCardHeader slot="header" @refresh="handleRefreshData(2)" title="d2-chart-column-base"></ChartCardHeader>
|
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(2)" title="d2-chart-column-base"></d2-demo-chart-card-header>
|
||||||
<d2-chart-column-base :ref="chart[2].refName" v-bind="chart[2]" @ready="isReady(2)"></d2-chart-column-base>
|
<d2-chart-column-base :ref="chart[2].refName" v-bind="chart[2]" @ready="isReady(2)"></d2-chart-column-base>
|
||||||
</el-card>
|
</el-card>
|
||||||
</d2-grid-item>
|
</d2-grid-item>
|
||||||
<!-- 卡片 -->
|
<!-- 卡片 -->
|
||||||
<d2-grid-item v-bind="layout.layout[3]" @resized="handleResized(chart[3].refName)">
|
<d2-grid-item v-bind="layout.layout[3]" @resized="handleResized(chart[3].refName)">
|
||||||
<el-card class="header-in">
|
<el-card shadow="never" class="header-in">
|
||||||
<ChartCardHeader slot="header" @refresh="handleRefreshData(3)" title="d2-chart-bar-base"></ChartCardHeader>
|
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(3)" title="d2-chart-bar-base"></d2-demo-chart-card-header>
|
||||||
<d2-chart-bar-base :ref="chart[3].refName" v-bind="chart[3]" @ready="isReady(3)"></d2-chart-bar-base>
|
<d2-chart-bar-base :ref="chart[3].refName" v-bind="chart[3]" @ready="isReady(3)"></d2-chart-bar-base>
|
||||||
</el-card>
|
</el-card>
|
||||||
</d2-grid-item>
|
</d2-grid-item>
|
||||||
<!-- 卡片 -->
|
<!-- 卡片 -->
|
||||||
<d2-grid-item v-bind="layout.layout[4]" @resized="handleResized(chart[4].refName)">
|
<d2-grid-item v-bind="layout.layout[4]" @resized="handleResized(chart[4].refName)">
|
||||||
<el-card class="header-in">
|
<el-card shadow="never" class="header-in">
|
||||||
<ChartCardHeader slot="header" @refresh="handleRefreshData(4)" title="d2-chart-pie-base"></ChartCardHeader>
|
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(4)" title="d2-chart-pie-base"></d2-demo-chart-card-header>
|
||||||
<d2-chart-pie-base :ref="chart[4].refName" v-bind="chart[4]" @ready="isReady(4)"></d2-chart-pie-base>
|
<d2-chart-pie-base :ref="chart[4].refName" v-bind="chart[4]" @ready="isReady(4)"></d2-chart-pie-base>
|
||||||
</el-card>
|
</el-card>
|
||||||
</d2-grid-item>
|
</d2-grid-item>
|
||||||
<!-- 卡片 -->
|
<!-- 卡片 -->
|
||||||
<d2-grid-item v-bind="layout.layout[5]" @resized="handleResized(chart[5].refName)">
|
<d2-grid-item v-bind="layout.layout[5]" @resized="handleResized(chart[5].refName)">
|
||||||
<el-card class="header-in">
|
<el-card shadow="never" class="header-in">
|
||||||
<ChartCardHeader slot="header" @refresh="handleRefreshData(5)" title="d2-chart-nightingale-rose-base"></ChartCardHeader>
|
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(5)" title="d2-chart-nightingale-rose-base"></d2-demo-chart-card-header>
|
||||||
<d2-chart-nightingale-rose-base :ref="chart[5].refName" v-bind="chart[5]" @ready="isReady(5)"></d2-chart-nightingale-rose-base>
|
<d2-chart-nightingale-rose-base :ref="chart[5].refName" v-bind="chart[5]" @ready="isReady(5)"></d2-chart-nightingale-rose-base>
|
||||||
</el-card>
|
</el-card>
|
||||||
</d2-grid-item>
|
</d2-grid-item>
|
||||||
<!-- 卡片 -->
|
<!-- 卡片 -->
|
||||||
<d2-grid-item v-bind="layout.layout[6]" @resized="handleResized(chart[6].refName)">
|
<d2-grid-item v-bind="layout.layout[6]" @resized="handleResized(chart[6].refName)">
|
||||||
<el-card class="header-in">
|
<el-card shadow="never" class="header-in">
|
||||||
<ChartCardHeader slot="header" @refresh="handleRefreshData(6)" title="d2-chart-radar-base"></ChartCardHeader>
|
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(6)" title="d2-chart-radar-base"></d2-demo-chart-card-header>
|
||||||
<d2-chart-radar-base :ref="chart[6].refName" v-bind="chart[6]" @ready="isReady(6)"></d2-chart-radar-base>
|
<d2-chart-radar-base :ref="chart[6].refName" v-bind="chart[6]" @ready="isReady(6)"></d2-chart-radar-base>
|
||||||
</el-card>
|
</el-card>
|
||||||
</d2-grid-item>
|
</d2-grid-item>
|
||||||
<!-- 卡片 -->
|
<!-- 卡片 -->
|
||||||
<d2-grid-item v-bind="layout.layout[7]" @resized="handleResized(chart[7].refName)">
|
<d2-grid-item v-bind="layout.layout[7]" @resized="handleResized(chart[7].refName)">
|
||||||
<el-card class="header-in">
|
<el-card shadow="never" class="header-in">
|
||||||
<ChartCardHeader slot="header" @refresh="handleRefreshData(7)" title="d2-chart-area-base"></ChartCardHeader>
|
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(7)" title="d2-chart-area-base"></d2-demo-chart-card-header>
|
||||||
<d2-chart-area-base :ref="chart[7].refName" v-bind="chart[7]" @ready="isReady(7)"></d2-chart-area-base>
|
<d2-chart-area-base :ref="chart[7].refName" v-bind="chart[7]" @ready="isReady(7)"></d2-chart-area-base>
|
||||||
</el-card>
|
</el-card>
|
||||||
</d2-grid-item>
|
</d2-grid-item>
|
||||||
@@ -64,7 +64,7 @@
|
|||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
ChartCardHeader: () => import('./components/ChartCardHeader')
|
'd2-demo-chart-card-header': () => import('./components/d2-demo-chart-card-header')
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
|||||||
17
src/pages/demo/components/container/card.vue
Normal file
17
src/pages/demo/components/container/card.vue
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<template>
|
||||||
|
<d2-container>
|
||||||
|
<template slot="header">我是插入到 header 中的内容</template>
|
||||||
|
<d2-markdown :md="doc"/>
|
||||||
|
</d2-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import doc from './md/doc-card.md'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
doc
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -3,9 +3,20 @@
|
|||||||
<template slot="header">
|
<template slot="header">
|
||||||
我是插入到 header 中的内容
|
我是插入到 header 中的内容
|
||||||
</template>
|
</template>
|
||||||
<d2-markdown url="/static/md/组件 - 页面容器 - 撑满.md"/>
|
<d2-markdown :md="doc"/>
|
||||||
<template slot="footer">
|
<template slot="footer">
|
||||||
我是插入到 footer 中的内容
|
我是插入到 footer 中的内容
|
||||||
</template>
|
</template>
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import doc from './md/doc-full.md'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
doc
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|||||||
@@ -1,7 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost">
|
<d2-container type="ghost">
|
||||||
<el-card style="width: 50%;">
|
<el-card shadow="never" style="width: 50%;">
|
||||||
<d2-markdown url="/static/md/组件 - 页面容器 - 隐形.md"/>
|
<d2-markdown :md="doc"/>
|
||||||
</el-card>
|
</el-card>
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import doc from './md/doc-ghost.md'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
doc
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|||||||
@@ -72,4 +72,4 @@ Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0
|
|||||||
|
|
||||||
- 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
|
- 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
|
||||||
|
|
||||||
- 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
|
- 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
<template>
|
|
||||||
<d2-container>
|
|
||||||
<template slot="header">我是插入到 header 中的内容</template>
|
|
||||||
<d2-markdown url="/static/md/组件 - 页面容器 - 基础.md"/>
|
|
||||||
</d2-container>
|
|
||||||
</template>
|
|
||||||
@@ -1,11 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost" class="page">
|
<d2-container class="page">
|
||||||
<el-card>
|
<template slot="header">数字动画组件</template>
|
||||||
<d2-demo-page-header title="数字动画组件"/>
|
|
||||||
</el-card>
|
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<el-card>
|
<el-card shadow="never" class="d2-mb">
|
||||||
<p slot="title">只设置目标数字</p>
|
<p slot="title">只设置目标数字</p>
|
||||||
<div class="group">
|
<div class="group">
|
||||||
<d2-count-up :end="100"/>
|
<d2-count-up :end="100"/>
|
||||||
@@ -13,7 +11,7 @@
|
|||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<el-card>
|
<el-card shadow="never" class="d2-mb">
|
||||||
<p slot="title">设置起止数值</p>
|
<p slot="title">设置起止数值</p>
|
||||||
<div class="group">
|
<div class="group">
|
||||||
<d2-count-up :start="14" :end="100"/>
|
<d2-count-up :start="14" :end="100"/>
|
||||||
@@ -21,7 +19,7 @@
|
|||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<el-card>
|
<el-card shadow="never" class="d2-mb">
|
||||||
<p slot="title">小数位数</p>
|
<p slot="title">小数位数</p>
|
||||||
<div class="group">
|
<div class="group">
|
||||||
<d2-count-up :end="100" :decimals="2"/>
|
<d2-count-up :end="100" :decimals="2"/>
|
||||||
@@ -29,7 +27,7 @@
|
|||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<el-card>
|
<el-card shadow="never" class="d2-mb">
|
||||||
<p slot="title">动画时长</p>
|
<p slot="title">动画时长</p>
|
||||||
<div class="group">
|
<div class="group">
|
||||||
<d2-count-up :end="100" :duration="6"/>
|
<d2-count-up :end="100" :duration="6"/>
|
||||||
@@ -37,7 +35,7 @@
|
|||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<el-card>
|
<el-card shadow="never">
|
||||||
<p slot="title">回调函数</p>
|
<p slot="title">回调函数</p>
|
||||||
<div class="group">
|
<div class="group">
|
||||||
<d2-count-up :end="100" :callback="() => {className = 'end'}" :class="className"/>
|
<d2-count-up :end="100" :callback="() => {className = 'end'}" :class="className"/>
|
||||||
@@ -45,7 +43,7 @@
|
|||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<el-card>
|
<el-card shadow="never" class="d2-mb-0">
|
||||||
<p slot="title">结束一秒后更新数值</p>
|
<p slot="title">结束一秒后更新数值</p>
|
||||||
<div class="group">
|
<div class="group">
|
||||||
<d2-count-up :end="end" :callback="update"/>
|
<d2-count-up :end="end" :callback="update"/>
|
||||||
@@ -53,9 +51,6 @@
|
|||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-card>
|
|
||||||
<d2-markdown url="/static/md/组件 - 数字动画.md"/>
|
|
||||||
</el-card>
|
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -85,7 +80,6 @@ export default {
|
|||||||
.page {
|
.page {
|
||||||
.el-card {
|
.el-card {
|
||||||
@extend %unable-select;
|
@extend %unable-select;
|
||||||
margin-bottom: $margin;
|
|
||||||
.group {
|
.group {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|||||||
@@ -1,16 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost">
|
<d2-container>
|
||||||
<el-card class="d2-mb">
|
<d2-demo-page-header slot="header" title="基本示例"/>
|
||||||
<d2-demo-page-header slot="header" title="基本示例"/>
|
<d2-quill
|
||||||
<d2-quill
|
style="min-height: 200px;"
|
||||||
style="min-height: 200px;"
|
v-model="value"
|
||||||
v-model="value"
|
@text-change="textChangeHandler"
|
||||||
@text-change="textChangeHandler"
|
@selection-change="selectionChangeHandler"
|
||||||
@selection-change="selectionChangeHandler"
|
@editor-change="editorChangeHandler"/>
|
||||||
@editor-change="editorChangeHandler"/>
|
<el-card shadow="never" class="d2-mt">
|
||||||
</el-card>
|
|
||||||
<el-card>
|
|
||||||
<template slot="header">输出</template>
|
|
||||||
<d2-highlight :code="formated"/>
|
<d2-highlight :code="formated"/>
|
||||||
</el-card>
|
</el-card>
|
||||||
</d2-container>
|
</d2-container>
|
||||||
|
|||||||
@@ -1,13 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost">
|
<d2-container>
|
||||||
<el-card class="d2-mb">
|
<d2-demo-page-header slot="header" title="基本示例"/>
|
||||||
<d2-demo-page-header slot="header" title="基本示例"/>
|
<d2-mde
|
||||||
<d2-mde
|
v-model="text"
|
||||||
v-model="text"
|
class="mde"/>
|
||||||
class="mde"/>
|
<el-card shadow="never">
|
||||||
</el-card>
|
|
||||||
<el-card>
|
|
||||||
<template slot="header">输出</template>
|
|
||||||
<pre>{{text}}</pre>
|
<pre>{{text}}</pre>
|
||||||
</el-card>
|
</el-card>
|
||||||
</d2-container>
|
</d2-container>
|
||||||
|
|||||||
@@ -1,35 +1,30 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost">
|
<d2-container>
|
||||||
<el-card class="d2-mb">
|
<template slot="header">代码高亮组件</template>
|
||||||
<d2-demo-page-header title="代码高亮组件"/>
|
<el-card shadow="never" class="d2-mb">
|
||||||
</el-card>
|
|
||||||
<el-card class="d2-mb">
|
|
||||||
<p slot="title">javascript</p>
|
<p slot="title">javascript</p>
|
||||||
<d2-highlight :code="codeJavascript"/>
|
<d2-highlight :code="codeJavascript"/>
|
||||||
</el-card>
|
</el-card>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-card class="d2-mb">
|
<el-card shadow="never">
|
||||||
<p slot="title">css</p>
|
<p slot="title">css</p>
|
||||||
<d2-highlight :code="codeCSS"/>
|
<d2-highlight :code="codeCSS"/>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-card class="d2-mb">
|
<el-card shadow="never">
|
||||||
<p slot="title">scss</p>
|
<p slot="title">scss</p>
|
||||||
<d2-highlight :code="codeSCSS"/>
|
<d2-highlight :code="codeSCSS"/>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-card class="d2-mb">
|
<el-card shadow="never">
|
||||||
<p slot="title">html</p>
|
<p slot="title">html</p>
|
||||||
<d2-highlight :code="codeHTML"/>
|
<d2-highlight :code="codeHTML"/>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-card>
|
|
||||||
<d2-markdown url="/static/md/组件 - 代码高亮.md"/>
|
|
||||||
</el-card>
|
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -1,15 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost">
|
<d2-container>
|
||||||
<el-card class="d2-mb">
|
<template slot="header">图标组件</template>
|
||||||
<d2-demo-page-header slot="header" title="图标组件"/>
|
<d2-icon/>
|
||||||
<d2-icon/>
|
<d2-icon name="github"/>
|
||||||
<d2-icon name="github"/>
|
<d2-icon name="github" style="font-size: 100px;"/>
|
||||||
<d2-icon name="github" style="font-size: 100px;"/>
|
<d2-icon name="github" class="icon-class-demo"/>
|
||||||
<d2-icon name="github" class="icon-class-demo"/>
|
|
||||||
</el-card>
|
|
||||||
<el-card>
|
|
||||||
<d2-markdown url="/static/md/组件 - 图标组件.md"/>
|
|
||||||
</el-card>
|
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -1,28 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost">
|
<d2-container>
|
||||||
<el-card>
|
<template slot="header">
|
||||||
<template slot="header">
|
<el-radio-group v-model="showIndex" size="mini">
|
||||||
<el-radio-group v-model="showIndex" size="mini">
|
<el-radio-button
|
||||||
<el-radio-button
|
v-for="(item, index) in radioOptions"
|
||||||
v-for="(item, index) in radioOptions"
|
:key="index"
|
||||||
:key="index"
|
:label="item.value">
|
||||||
:label="item.value">
|
{{item.label}}
|
||||||
{{item.label}}
|
</el-radio-button>
|
||||||
</el-radio-button>
|
</el-radio-group>
|
||||||
</el-radio-group>
|
</template>
|
||||||
</template>
|
<el-row style="margin: -10px;">
|
||||||
<el-row style="margin: -10px;">
|
<el-alert title="点击图标复制代码" type="info" class="d2-m-10" style="width: auto;"/>
|
||||||
<el-alert
|
<el-col v-for="(iconItem, iconIndex) in iconShow.icon" :key="iconIndex" :span="6" class="d2-p-10">
|
||||||
title="点击图标复制代码"
|
<d2-icon-cell :icon="iconItem"/>
|
||||||
type="info"
|
</el-col>
|
||||||
class="d2-m-10"
|
</el-row>
|
||||||
style="width: auto;">
|
|
||||||
</el-alert>
|
|
||||||
<el-col v-for="(iconItem, iconIndex) in iconShow.icon" :key="iconIndex" :span="6" class="d2-p-10">
|
|
||||||
<d2-iconCell :icon="iconItem"></d2-iconCell>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-card>
|
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -30,7 +23,7 @@
|
|||||||
import icon from '@/assets/library/font-awesome-4.7.0-icon/icon.js'
|
import icon from '@/assets/library/font-awesome-4.7.0-icon/icon.js'
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
IconCell: () => import('./components/IconCell')
|
'd2-icon-cell': () => import('./components/d2-icon-cell')
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
|||||||
@@ -1,33 +1,28 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost">
|
<d2-container>
|
||||||
<el-card class="d2-mb">
|
<template slot="header">图标选择器</template>
|
||||||
<d2-demo-page-header slot="header" title="图标选择器"/>
|
<div class="title-group">
|
||||||
<div class="title-group">
|
<p class="title">一般用法</p>
|
||||||
<p class="title">一般用法</p>
|
<p class="sub-title">
|
||||||
<p class="sub-title">
|
<template v-if="icon">
|
||||||
<template v-if="icon">
|
选择的图标 {{icon}}
|
||||||
选择的图标 {{icon}}
|
<i :class="'fa fa-' + icon"></i>
|
||||||
<i :class="'fa fa-' + icon"></i>
|
</template>
|
||||||
</template>
|
<template v-else>未选择</template>
|
||||||
<template v-else>未选择</template>
|
</p>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
<d2-icon-select v-model="icon"/>
|
||||||
<d2-icon-select v-model="icon"/>
|
<div class="title-group">
|
||||||
<div class="title-group">
|
<p class="title">用户可以输入</p>
|
||||||
<p class="title">用户可以输入</p>
|
<p class="sub-title">
|
||||||
<p class="sub-title">
|
<template v-if="icon2">
|
||||||
<template v-if="icon2">
|
选择的图标 {{icon2}}
|
||||||
选择的图标 {{icon2}}
|
<i :class="'fa fa-' + icon2"></i>
|
||||||
<i :class="'fa fa-' + icon2"></i>
|
</template>
|
||||||
</template>
|
<template v-else>未选择</template>
|
||||||
<template v-else>未选择</template>
|
</p>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
<d2-icon-select v-model="icon2" :user-input="true"/>
|
||||||
<d2-icon-select v-model="icon2" :user-input="true"/>
|
|
||||||
</el-card>
|
|
||||||
<el-card>
|
|
||||||
<d2-markdown url="/static/md/组件 - 图标选择器.md"/>
|
|
||||||
</el-card>
|
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -1,19 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost">
|
<d2-container>
|
||||||
<el-card class="d2-mb">
|
<template slot="header">SVG图标组件</template>
|
||||||
<d2-demo-page-header slot="header" title="SVG图标组件"/>
|
<el-row>
|
||||||
<el-row>
|
<el-col class="icon-card" :span="4" v-for="(icon, index) in $IconSvg" :key="index">
|
||||||
<el-col class="icon-card" :span="4" v-for="(icon, index) in $IconSvg" :key="index">
|
<d2-icon-svg class="icon" :name="icon"/>
|
||||||
<d2-icon-svg class="icon" :name="icon"/>
|
<div class="icon-title">
|
||||||
<div class="icon-title">
|
<span>{{icon}}</span>
|
||||||
<span>{{icon}}</span>
|
</div>
|
||||||
</div>
|
</el-col>
|
||||||
</el-col>
|
</el-row>
|
||||||
</el-row>
|
|
||||||
</el-card>
|
|
||||||
<el-card>
|
|
||||||
<d2-markdown url="/static/md/组件 - 图标组件 - svg.md"/>
|
|
||||||
</el-card>
|
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost" class="demo-plugins-vue-grid-layout-demo">
|
<d2-container type="ghost" class="demo-layout-grid">
|
||||||
<d2-grid-layout
|
<d2-grid-layout
|
||||||
v-bind="layout"
|
v-bind="layout"
|
||||||
@layout-updated="layoutUpdatedHandler">
|
@layout-updated="layoutUpdatedHandler">
|
||||||
@@ -11,7 +11,7 @@
|
|||||||
@move="moveHandler"
|
@move="moveHandler"
|
||||||
@resized="resizedHandler"
|
@resized="resizedHandler"
|
||||||
@moved="movedHandler">
|
@moved="movedHandler">
|
||||||
<el-card>
|
<el-card shadow="never">
|
||||||
<el-tag size="mini" type="info" slot="header">Card {{item.i}}</el-tag>
|
<el-tag size="mini" type="info" slot="header">Card {{item.i}}</el-tag>
|
||||||
<template v-if="item.i === '0'">
|
<template v-if="item.i === '0'">
|
||||||
<div class="d2-mb">拖拽卡片调整位置</div>
|
<div class="d2-mb">拖拽卡片调整位置</div>
|
||||||
@@ -88,7 +88,7 @@ export default {
|
|||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import '~@/assets/style/public.scss';
|
@import '~@/assets/style/public.scss';
|
||||||
.demo-plugins-vue-grid-layout-demo {
|
.demo-layout-grid {
|
||||||
.vue-grid-layout {
|
.vue-grid-layout {
|
||||||
margin: -10px;
|
margin: -10px;
|
||||||
.el-card {
|
.el-card {
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container>
|
<d2-container>
|
||||||
<d2-demo-page-header slot="header" title="基本示例"/>
|
<template slot="header">基本示例</template>
|
||||||
<div style="height: 400px; margin: -16px;">
|
<div style="height: 400px; margin: -16px;">
|
||||||
<SplitPane :min-percent='20' :default-percent='30' split="vertical">
|
<SplitPane :min-percent='20' :default-percent='30' split="vertical">
|
||||||
<template slot="paneL"><div style="margin: 10px;">左</div></template>
|
<template slot="paneL"><div style="margin: 10px;">左</div></template>
|
||||||
|
|||||||
@@ -1,6 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container>
|
<d2-container>
|
||||||
<d2-demo-page-header slot="header" title="效果演示"/>
|
<template slot="header">效果演示</template>
|
||||||
<d2-markdown url="/static/md/组件 - markdown - 演示.md"/>
|
<d2-markdown :md="doc"/>
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import doc from './md/doc.md'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
doc
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|||||||
@@ -20,6 +20,4 @@ alert('Hello World')
|
|||||||
|
|
||||||
> 链接: https://pan.baidu.com/s/1ggFW21l 密码: 877y
|
> 链接: https://pan.baidu.com/s/1ggFW21l 密码: 877y
|
||||||
|
|
||||||
[https://github.com/FairyEver](https://github.com/FairyEver)
|
[https://github.com/FairyEver](https://github.com/FairyEver)
|
||||||
|
|
||||||
|
|
||||||
@@ -1,8 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="full">
|
<d2-container>
|
||||||
<template slot="header">
|
<template slot="header">多环境发布</template>
|
||||||
多环境发布
|
|
||||||
</template>
|
|
||||||
<p>当前是{{$env ? '开发' : '生产'}}环境</p>
|
<p>当前是{{$env ? '开发' : '生产'}}环境</p>
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container>
|
<d2-container>
|
||||||
<d2-demo-page-header slot="header" title="基本示例"/>
|
<template slot="header">剪贴板访问</template>
|
||||||
<el-row :gutter="10">
|
<el-row :gutter="10">
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<div class="d2-mb">
|
<div class="d2-mb">
|
||||||
@@ -12,7 +12,7 @@
|
|||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-alert
|
<el-alert
|
||||||
class="d2-mb"
|
class="d2-mb"
|
||||||
title="只有在 IE 浏览器下你才可以通过下面这两个按钮获取剪贴板数据"
|
title="在 IE 浏览器或者高版本 Chrome 下你才可以通过下面这两个按钮获取剪贴板数据"
|
||||||
type="warning"
|
type="warning"
|
||||||
show-icon>
|
show-icon>
|
||||||
</el-alert>
|
</el-alert>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container>
|
<d2-container>
|
||||||
<d2-demo-page-header slot="header" title="导出表格"/>
|
<template slot="header">导出表格</template>
|
||||||
<div class="d2-mb">
|
<div class="d2-mb">
|
||||||
<el-button type="primary" @click="exportCsv">
|
<el-button type="primary" @click="exportCsv">
|
||||||
<d2-icon name="download"/>
|
<d2-icon name="download"/>
|
||||||
@@ -11,7 +11,7 @@
|
|||||||
导出 Excel
|
导出 Excel
|
||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
<el-table v-bind="table" style="width: 100%" class="d2-mb">
|
<el-table v-bind="table" style="width: 100%">
|
||||||
<el-table-column
|
<el-table-column
|
||||||
v-for="(item, index) in table.columns"
|
v-for="(item, index) in table.columns"
|
||||||
:key="index"
|
:key="index"
|
||||||
@@ -19,7 +19,6 @@
|
|||||||
:label="item.label">
|
:label="item.label">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
<d2-markdown url="/static/md/插件 - 导出.md"/>
|
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -1,19 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container>
|
<d2-container>
|
||||||
<d2-demo-page-header slot="header" title="导出文本"/>
|
<template slot="header">导出文本</template>
|
||||||
<el-input
|
<el-input
|
||||||
type="textarea"
|
type="textarea"
|
||||||
:autosize="{minRows: 2, maxRows: 4}"
|
:autosize="{minRows: 2, maxRows: 4}"
|
||||||
placeholder="请输入内容 然后点击保存按钮导出文本文档"
|
placeholder="请输入内容 然后点击保存按钮导出文本文档"
|
||||||
v-model="text">
|
v-model="text">
|
||||||
</el-input>
|
</el-input>
|
||||||
<div class="d2-mt d2-mb">
|
<div class="d2-mt">
|
||||||
<el-button type="primary" @click="exportTxt">
|
<el-button type="primary" @click="exportTxt">
|
||||||
<d2-icon name="download"/>
|
<d2-icon name="download"/>
|
||||||
保存为 txt
|
保存为 txt
|
||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
<d2-markdown url="/static/md/插件 - 导出.md"/>
|
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container>
|
<d2-container>
|
||||||
<d2-demo-page-header slot="header" :title="`${$t('pub.pageHeader.demo')} 1`"/>
|
<template slot="header">{{`${$t('pub.pageHeader.demo')} 1`}}</template>
|
||||||
<DemoI18nControl></DemoI18nControl>
|
<DemoI18nControl></DemoI18nControl>
|
||||||
<DemoI18n></DemoI18n>
|
<DemoI18n></DemoI18n>
|
||||||
</d2-container>
|
</d2-container>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container>
|
<d2-container>
|
||||||
<d2-demo-page-header slot="header" :title="`${$t('pub.pageHeader.demo')} 2`"/>
|
<template slot="header">{{`${$t('pub.pageHeader.demo')} 2`}}</template>
|
||||||
<DemoI18nControl></DemoI18nControl>
|
<DemoI18nControl></DemoI18nControl>
|
||||||
<DemoI18n></DemoI18n>
|
<DemoI18n></DemoI18n>
|
||||||
</d2-container>
|
</d2-container>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container>
|
<d2-container>
|
||||||
<d2-demo-page-header slot="header" title="导入 csv"/>
|
<template slot="header">导入 csv</template>
|
||||||
<div class="d2-mb">
|
<div class="d2-mb">
|
||||||
<el-button @click="download">
|
<el-button @click="download">
|
||||||
<d2-icon name="download"/>
|
<d2-icon name="download"/>
|
||||||
@@ -23,7 +23,6 @@
|
|||||||
:label="item.label">
|
:label="item.label">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
<d2-markdown url="/static/md/插件 - 导入.md"/>
|
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container>
|
<d2-container>
|
||||||
<d2-demo-page-header slot="header" title="导入 xlsx"/>
|
<template slot="header">导入 xlsx</template>
|
||||||
<div class="d2-mb">
|
<div class="d2-mb">
|
||||||
<el-button @click="download">
|
<el-button @click="download">
|
||||||
<d2-icon name="download"/>
|
<d2-icon name="download"/>
|
||||||
@@ -23,7 +23,6 @@
|
|||||||
:label="item.label">
|
:label="item.label">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
<d2-markdown url="/static/md/插件 - 导入.md"/>
|
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -1,18 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost">
|
<d2-container>
|
||||||
<el-card class="d2-mb">
|
<template slot="header">Cookie 读写</template>
|
||||||
<d2-demo-page-header slot="header" title="基本示例"/>
|
<p class="d2-mt-0">基本读写删</p>
|
||||||
<p class="d2-mt-0">基本读写删</p>
|
<el-button type="primary" @click="set('test-user-name', 'test-user')">set('test-user-name', 'normalValue')</el-button>
|
||||||
<el-button type="primary" @click="set('test-user-name', 'test-user')">set('test-user-name', 'normalValue')</el-button>
|
<el-button type="info" @click="get('test-user-name')">get('test-user-name')</el-button>
|
||||||
<el-button type="info" @click="get('test-user-name')">get('test-user-name')</el-button>
|
<el-button type="error" @click="remove('test-user-name')">remove('test-user-name')</el-button>
|
||||||
<el-button type="error" @click="remove('test-user-name')">remove('test-user-name')</el-button>
|
<p>设置有效期</p>
|
||||||
<p>设置有效期</p>
|
<el-button type="primary" @click="setExpires('test-user-pwd', '123456789', 1)">设置 'test-user-pwd' 有效期为一天</el-button>
|
||||||
<el-button type="primary" @click="setExpires('test-user-pwd', '123456789', 1)">设置 'test-user-pwd' 有效期为一天</el-button>
|
<el-button type="info" @click="get('test-user-pwd')">get('test-user-pwd')</el-button>
|
||||||
<el-button type="info" @click="get('test-user-pwd')">get('test-user-pwd')</el-button>
|
<el-button type="error" @click="remove('test-user-pwd')">remove('test-user-pwd')</el-button>
|
||||||
<el-button type="error" @click="remove('test-user-pwd')">remove('test-user-pwd')</el-button>
|
<p>获取所有可以获得的数据</p>
|
||||||
<p>获取所有可以获得的数据</p>
|
<el-button type="info" @click="getAll">getAll</el-button>
|
||||||
<el-button type="info" @click="getAll">getAll</el-button>
|
|
||||||
</el-card>
|
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -1,19 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost">
|
<d2-container>
|
||||||
<el-card>
|
<div slot="header">
|
||||||
<div slot="header">
|
<el-button @click="ajax">发送请求</el-button>
|
||||||
<el-button @click="ajax">发送请求</el-button>
|
</div>
|
||||||
</div>
|
<el-table v-bind="table" style="width: 100%">
|
||||||
<el-table v-bind="table" style="width: 100%" class="d2-mb">
|
<el-table-column
|
||||||
<el-table-column
|
v-for="(item, index) in table.columns"
|
||||||
v-for="(item, index) in table.columns"
|
:key="index"
|
||||||
:key="index"
|
:prop="item.prop"
|
||||||
:prop="item.prop"
|
:label="item.label">
|
||||||
:label="item.label">
|
</el-table-column>
|
||||||
</el-table-column>
|
</el-table>
|
||||||
</el-table>
|
|
||||||
<d2-markdown url="/static/md/插件 - mock拦截ajax.md"/>
|
|
||||||
</el-card>
|
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-card class="d2-mb">
|
<el-card shadow="never" class="d2-mb">
|
||||||
<div slot="header" class="d2-clearfix">
|
<div slot="header" class="d2-clearfix">
|
||||||
<el-button type="text" size="mini">{{title}}</el-button>
|
<el-button type="text" size="mini">{{title}}</el-button>
|
||||||
<el-tooltip content="重新 mock 数据" placement="top-end">
|
<el-tooltip content="重新 mock 数据" placement="top-end">
|
||||||
@@ -23,6 +23,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
name: 'd2-demo-mock-card',
|
||||||
props: {
|
props: {
|
||||||
title: {
|
title: {
|
||||||
type: String,
|
type: String,
|
||||||
@@ -1,17 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost">
|
<d2-container type="ghost">
|
||||||
<el-card class="d2-mb">
|
<el-card shadow="never" class="d2-mb">
|
||||||
<d2-demo-page-header slot="header" title="数据占位符"/>
|
<d2-demo-page-header slot="header" title="数据占位符"/>
|
||||||
<d2-markdown url="/static/md/插件 - mock演示页面介绍.md"/>
|
<d2-markdown :md="doc"/>
|
||||||
</el-card>
|
</el-card>
|
||||||
<MockDemoCard
|
<d2-demo-mock-card
|
||||||
v-for="(item, index) in settingDPD"
|
v-for="(item, index) in settingDPD"
|
||||||
:key="index"
|
:key="index"
|
||||||
:title="item.title"
|
:title="item.title"
|
||||||
:code="JSON.stringify(item.json, null, 2)"
|
:code="JSON.stringify(item.json, null, 2)"
|
||||||
:mock="mockResult[index]"
|
:mock="mockResult[index]"
|
||||||
@reload="doMock(index)">
|
@reload="doMock(index)">
|
||||||
</MockDemoCard>
|
</d2-demo-mock-card>
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -20,15 +20,17 @@ import Vue from 'vue'
|
|||||||
import clone from '@/utils/clone.js'
|
import clone from '@/utils/clone.js'
|
||||||
import Mock from 'mockjs'
|
import Mock from 'mockjs'
|
||||||
import settingDPD from './data/settingDPD'
|
import settingDPD from './data/settingDPD'
|
||||||
|
import doc from './md/doc.md'
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
MockDemoCard: () => import('./components/MockDemoCard')
|
'd2-demo-mock-card': () => import('./components/d2-demo-mock-card')
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
mockResult: [],
|
mockResult: [],
|
||||||
settingDPD,
|
settingDPD,
|
||||||
settingDPDClone: clone(settingDPD)
|
settingDPDClone: clone(settingDPD),
|
||||||
|
doc
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
|
|||||||
@@ -1,29 +1,29 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost">
|
<d2-container type="ghost">
|
||||||
<el-card class="d2-mb">
|
<el-card shadow="never" class="d2-mb">
|
||||||
<d2-demo-page-header slot="header" title="数据模板"/>
|
<d2-demo-page-header slot="header" title="数据模板"/>
|
||||||
<d2-markdown url="/static/md/插件 - mock演示页面介绍.md"/>
|
<d2-markdown :md="doc"/>
|
||||||
</el-card>
|
</el-card>
|
||||||
<MockDemoCard
|
<d2-demo-mock-card
|
||||||
v-for="(item, index) in settingDTD"
|
v-for="(item, index) in settingDTD"
|
||||||
:key="index"
|
:key="index"
|
||||||
:title="item.title"
|
:title="item.title"
|
||||||
:code="JSON.stringify(item.json, null, 2)"
|
:code="JSON.stringify(item.json, null, 2)"
|
||||||
:mock="mockResult[index]"
|
:mock="mockResult[index]"
|
||||||
@reload="doMock(index)">
|
@reload="doMock(index)">
|
||||||
</MockDemoCard>
|
</d2-demo-mock-card>
|
||||||
<MockDemoCard
|
<d2-demo-mock-card
|
||||||
:title="fn.title"
|
:title="fn.title"
|
||||||
:code="fn.code"
|
:code="fn.code"
|
||||||
:mock="fn.mocked"
|
:mock="fn.mocked"
|
||||||
@reload="fnMock()">
|
@reload="fnMock()">
|
||||||
</MockDemoCard>
|
</d2-demo-mock-card>
|
||||||
<MockDemoCard
|
<d2-demo-mock-card
|
||||||
:title="regexp.title"
|
:title="regexp.title"
|
||||||
:code="regexp.code"
|
:code="regexp.code"
|
||||||
:mock="regexp.mocked"
|
:mock="regexp.mocked"
|
||||||
@reload="regexpMock()">
|
@reload="regexpMock()">
|
||||||
</MockDemoCard>
|
</d2-demo-mock-card>
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -34,19 +34,21 @@ import Mock from 'mockjs'
|
|||||||
import settingDTD from './data/settingDTD'
|
import settingDTD from './data/settingDTD'
|
||||||
import regexp from './mixins/regexp'
|
import regexp from './mixins/regexp'
|
||||||
import fn from './mixins/function'
|
import fn from './mixins/function'
|
||||||
|
import doc from './md/doc.md'
|
||||||
export default {
|
export default {
|
||||||
mixins: [
|
mixins: [
|
||||||
regexp,
|
regexp,
|
||||||
fn
|
fn
|
||||||
],
|
],
|
||||||
components: {
|
components: {
|
||||||
MockDemoCard: () => import('./components/MockDemoCard')
|
'd2-demo-mock-card': () => import('./components/d2-demo-mock-card')
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
mockResult: [],
|
mockResult: [],
|
||||||
settingDTD,
|
settingDTD,
|
||||||
settingDTDClone: clone(settingDTD)
|
settingDTDClone: clone(settingDTD),
|
||||||
|
doc
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
|
|||||||
@@ -1,15 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost">
|
<d2-container type="ghost">
|
||||||
<el-card class="d2-mb">
|
<el-card shadow="never" class="d2-mb">
|
||||||
<d2-demo-page-header title="基本示例"/>
|
|
||||||
</el-card>
|
|
||||||
<el-card class="d2-mb">
|
|
||||||
<div class="d2-text-center">
|
<div class="d2-text-center">
|
||||||
<h1 style="font-size: 30px;">您在{{openPageDateAgo}}打开的此页面</h1>
|
<h1 style="font-size: 30px;">您在{{openPageDateAgo}}打开的此页面</h1>
|
||||||
<p style="font-size: 10px;">请稍等一下 10秒后会开始自动刷新</p>
|
<p style="font-size: 10px;">请稍等一下 10秒后会开始自动刷新</p>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
<el-card class="d2-mb">
|
<el-card shadow="never">
|
||||||
<div class="d2-text-center">
|
<div class="d2-text-center">
|
||||||
<h1 style="font-size: 30px;">{{dateTimeRangeAgo}}</h1>
|
<h1 style="font-size: 30px;">{{dateTimeRangeAgo}}</h1>
|
||||||
<el-date-picker
|
<el-date-picker
|
||||||
@@ -21,9 +18,6 @@
|
|||||||
</el-date-picker>
|
</el-date-picker>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
<el-card>
|
|
||||||
<d2-markdown url="/static/md/插件 - timeago.md"/>
|
|
||||||
</el-card>
|
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -28,7 +28,7 @@ const routes = [
|
|||||||
children: (pre => [
|
children: (pre => [
|
||||||
{ path: 'container/full', name: `${pre}container-full`, component: () => import('@/pages/demo/components/container/full.vue') },
|
{ path: 'container/full', name: `${pre}container-full`, component: () => import('@/pages/demo/components/container/full.vue') },
|
||||||
{ path: 'container/ghost', name: `${pre}container-ghost`, component: () => import('@/pages/demo/components/container/ghost.vue') },
|
{ path: 'container/ghost', name: `${pre}container-ghost`, component: () => import('@/pages/demo/components/container/ghost.vue') },
|
||||||
{ path: 'container/normal', name: `${pre}container-normal`, component: () => import('@/pages/demo/components/container/normal.vue') },
|
{ path: 'container/normal', name: `${pre}container-card`, component: () => import('@/pages/demo/components/container/card.vue') },
|
||||||
{ path: 'countup', name: `${pre}countup`, component: () => import('@/pages/demo/components/countup/index.vue') },
|
{ path: 'countup', name: `${pre}countup`, component: () => import('@/pages/demo/components/countup/index.vue') },
|
||||||
{ path: 'editor-quill', name: `${pre}editor-quill`, component: () => import('@/pages/demo/components/editor-quill/index.vue') },
|
{ path: 'editor-quill', name: `${pre}editor-quill`, component: () => import('@/pages/demo/components/editor-quill/index.vue') },
|
||||||
{ path: 'editor-simpleMDE', name: `${pre}editor-simpleMDE`, component: () => import('@/pages/demo/components/editor-simpleMDE/index.vue') },
|
{ path: 'editor-simpleMDE', name: `${pre}editor-simpleMDE`, component: () => import('@/pages/demo/components/editor-simpleMDE/index.vue') },
|
||||||
|
|||||||
@@ -1,11 +1,47 @@
|
|||||||
|
import Cookies from 'js-cookie'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
state: {
|
state: {
|
||||||
themeName: 'star'
|
list: [
|
||||||
|
{
|
||||||
|
name: 'd2admin 经典',
|
||||||
|
value: 'd2',
|
||||||
|
preview: '/static/image/theme-preview/d2@2x.png'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '流星',
|
||||||
|
value: 'star',
|
||||||
|
preview: '/static/image/theme-preview/star@2x.png'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
name: ''
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
// 设置主题
|
// 从 cookie 加载主题
|
||||||
setTheme (state, themeName) {
|
loadTheme (state) {
|
||||||
state.themeName = themeName
|
const name = Cookies.get('themeName')
|
||||||
|
if (name) {
|
||||||
|
// 设置 store
|
||||||
|
state.name = name
|
||||||
|
// 激活主题
|
||||||
|
this.commit('activeTheme')
|
||||||
|
} else {
|
||||||
|
// 设置新的主题为列表第一项
|
||||||
|
this.commit('setTheme', state.list[0].value)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 设置新的主题
|
||||||
|
setTheme (state, name) {
|
||||||
|
// 设置 store
|
||||||
|
state.name = name
|
||||||
|
// 设置 Cookie
|
||||||
|
Cookies.set('themeName', name)
|
||||||
|
// 激活主题
|
||||||
|
this.commit('activeTheme')
|
||||||
|
},
|
||||||
|
// 激活当前主题
|
||||||
|
activeTheme (state) {
|
||||||
|
document.body.className = `theme-${state.name}`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,35 +0,0 @@
|
|||||||
在 `src/mock/demo/001.js` 配置拦截返回的数据
|
|
||||||
|
|
||||||
```
|
|
||||||
import Mock from 'mockjs'
|
|
||||||
|
|
||||||
Mock.mock('/api/demo/001', {
|
|
||||||
'list|4-10': [{
|
|
||||||
'id|+1': 1,
|
|
||||||
'name': '@CNAME',
|
|
||||||
'star|1-5': '★',
|
|
||||||
'delFlag|1': [0, 1],
|
|
||||||
'creatDate': '@DATE',
|
|
||||||
'address': '@CITY',
|
|
||||||
'zip': '@ZIP'
|
|
||||||
}]
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
请求数据
|
|
||||||
|
|
||||||
```
|
|
||||||
ajax () {
|
|
||||||
this.$axios.get('/api/demo/001')
|
|
||||||
.then(res => {
|
|
||||||
this.table.columns = Object.keys(res.data.list[0]).map(e => ({
|
|
||||||
label: e,
|
|
||||||
prop: e
|
|
||||||
}))
|
|
||||||
this.table.data = res.data.list
|
|
||||||
})
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -1,181 +0,0 @@
|
|||||||
# 语法规范
|
|
||||||
|
|
||||||
Mock.js 的语法规范包括两部分：
|
|
||||||
|
|
||||||
1. 数据模板定义规范（Data Template Definition，DTD）
|
|
||||||
2. 数据占位符定义规范（Data Placeholder Definition，DPD）
|
|
||||||
|
|
||||||
## 数据模板定义规范 DTD
|
|
||||||
|
|
||||||
**数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：**
|
|
||||||
|
|
||||||
```js
|
|
||||||
// 属性名 name
|
|
||||||
// 生成规则 rule
|
|
||||||
// 属性值 value
|
|
||||||
'name|rule': value
|
|
||||||
```
|
|
||||||
|
|
||||||
**注意：**
|
|
||||||
|
|
||||||
* _属性名_ 和 _生成规则_ 之间用竖线 `|` 分隔。
|
|
||||||
* _生成规则_ 是可选的。
|
|
||||||
* _生成规则_ 有 7 种格式：
|
|
||||||
1. `'name|min-max': value`
|
|
||||||
1. `'name|count': value`
|
|
||||||
1. `'name|min-max.dmin-dmax': value`
|
|
||||||
1. `'name|min-max.dcount': value`
|
|
||||||
1. `'name|count.dmin-dmax': value`
|
|
||||||
1. `'name|count.dcount': value`
|
|
||||||
1. `'name|+step': value`
|
|
||||||
* **_生成规则_ 的 含义 需要依赖 _属性值的类型_ 才能确定。**
|
|
||||||
* _属性值_ 中可以含有 `@占位符`。
|
|
||||||
* _属性值_ 还指定了最终值的初始值和类型。
|
|
||||||
|
|
||||||
<!-- 感谢 @麦少 同学对 Mock.js 语法的整理和分析，才有了这版相对清晰的语法文档。 -->
|
|
||||||
|
|
||||||
**生成规则和示例：**
|
|
||||||
|
|
||||||
### 1. 属性值是字符串 **String**
|
|
||||||
|
|
||||||
1. `'name|min-max': string`
|
|
||||||
|
|
||||||
通过重复 `string` 生成一个字符串，重复次数大于等于 `min`，小于等于 `max`。
|
|
||||||
|
|
||||||
2. `'name|count': string`
|
|
||||||
|
|
||||||
通过重复 `string` 生成一个字符串，重复次数等于 `count`。
|
|
||||||
|
|
||||||
### 2. 属性值是数字 **Number**
|
|
||||||
|
|
||||||
1. `'name|+1': number`
|
|
||||||
|
|
||||||
属性值自动加 1，初始值为 `number`。
|
|
||||||
|
|
||||||
2. `'name|min-max': number`
|
|
||||||
|
|
||||||
生成一个大于等于 `min`、小于等于 `max` 的整数，属性值 `number` 只是用来确定类型。
|
|
||||||
|
|
||||||
3. `'name|min-max.dmin-dmax': number`
|
|
||||||
|
|
||||||
生成一个浮点数，整数部分大于等于 `min`、小于等于 `max`，小数部分保留 `dmin` 到 `dmax` 位。
|
|
||||||
|
|
||||||
```js
|
|
||||||
Mock.mock({
|
|
||||||
'number1|1-100.1-10': 1,
|
|
||||||
'number2|123.1-10': 1,
|
|
||||||
'number3|123.3': 1,
|
|
||||||
'number4|123.10': 1.123
|
|
||||||
})
|
|
||||||
// =>
|
|
||||||
{
|
|
||||||
"number1": 12.92,
|
|
||||||
"number2": 123.51,
|
|
||||||
"number3": 123.777,
|
|
||||||
"number4": 123.1231091814
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 3. 属性值是布尔型 **Boolean**
|
|
||||||
|
|
||||||
1. `'name|1': boolean`
|
|
||||||
|
|
||||||
随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
|
|
||||||
|
|
||||||
2. `'name|min-max': value`
|
|
||||||
|
|
||||||
随机生成一个布尔值，值为 `value` 的概率是 `min / (min + max)`，值为 `!value` 的概率是 `max / (min + max)`。
|
|
||||||
|
|
||||||
### 4. 属性值是对象 **Object**
|
|
||||||
|
|
||||||
1. `'name|count': object`
|
|
||||||
|
|
||||||
从属性值 `object` 中随机选取 `count` 个属性。
|
|
||||||
|
|
||||||
2. `'name|min-max': object`
|
|
||||||
|
|
||||||
从属性值 `object` 中随机选取 `min` 到 `max` 个属性。
|
|
||||||
|
|
||||||
### 5. 属性值是数组 **Array**
|
|
||||||
|
|
||||||
1. `'name|1': array`
|
|
||||||
|
|
||||||
从属性值 `array` 中随机选取 1 个元素，作为最终值。
|
|
||||||
|
|
||||||
2. `'name|+1': array`
|
|
||||||
|
|
||||||
从属性值 `array` 中顺序选取 1 个元素，作为最终值。
|
|
||||||
|
|
||||||
3. `'name|min-max': array`
|
|
||||||
|
|
||||||
通过重复属性值 `array` 生成一个新数组，重复次数大于等于 `min`，小于等于 `max`。
|
|
||||||
|
|
||||||
4. `'name|count': array`
|
|
||||||
|
|
||||||
通过重复属性值 `array` 生成一个新数组，重复次数为 `count`。
|
|
||||||
|
|
||||||
### 6. 属性值是函数 **Function**
|
|
||||||
|
|
||||||
1. `'name': function`
|
|
||||||
|
|
||||||
执行函数 `function`，取其返回值作为最终的属性值，函数的上下文为属性 `'name'` 所在的对象。
|
|
||||||
|
|
||||||
### 7. 属性值是正则表达式 **RegExp**
|
|
||||||
|
|
||||||
1. `'name': regexp`
|
|
||||||
|
|
||||||
根据正则表达式 `regexp` 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
|
|
||||||
|
|
||||||
```js
|
|
||||||
Mock.mock({
|
|
||||||
'regexp1': /[a-z][A-Z][0-9]/,
|
|
||||||
'regexp2': /\w\W\s\S\d\D/,
|
|
||||||
'regexp3': /\d{5,10}/
|
|
||||||
})
|
|
||||||
// =>
|
|
||||||
{
|
|
||||||
"regexp1": "pJ7",
|
|
||||||
"regexp2": "F)\fp1G",
|
|
||||||
"regexp3": "561659409"
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## 数据占位符定义规范 DPD
|
|
||||||
|
|
||||||
_占位符_ 只是在属性值字符串中占个位置，并不出现在最终的属性值中。
|
|
||||||
|
|
||||||
_占位符_ 的格式为：
|
|
||||||
|
|
||||||
```
|
|
||||||
@占位符
|
|
||||||
@占位符(参数 [, 参数])
|
|
||||||
```
|
|
||||||
|
|
||||||
**注意：**
|
|
||||||
|
|
||||||
1. 用 `@` 来标识其后的字符串是 _占位符_。
|
|
||||||
2. _占位符_ 引用的是 `Mock.Random` 中的方法。
|
|
||||||
3. 通过 `Mock.Random.extend()` 来扩展自定义占位符。
|
|
||||||
4. _占位符_ 也可以引用 _数据模板_ 中的属性。
|
|
||||||
5. _占位符_ 会优先引用 _数据模板_ 中的属性。
|
|
||||||
6. _占位符_ 支持 _相对路径_ 和 _绝对路径_。
|
|
||||||
|
|
||||||
```js
|
|
||||||
Mock.mock({
|
|
||||||
name: {
|
|
||||||
first: '@FIRST',
|
|
||||||
middle: '@FIRST',
|
|
||||||
last: '@LAST',
|
|
||||||
full: '@first @middle @last'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
// =>
|
|
||||||
{
|
|
||||||
"name": {
|
|
||||||
"first": "Charles",
|
|
||||||
"middle": "Brenda",
|
|
||||||
"last": "Lopez",
|
|
||||||
"full": "Charles Brenda Lopez"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
```
|
|
||||||
import timeago from 'timeago.js'
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
// 打开页面时间
|
|
||||||
openPageDate: new Date(),
|
|
||||||
// 打开页面已经过去的时间
|
|
||||||
openPageDateAgo: '',
|
|
||||||
// 打开页面时间计时器
|
|
||||||
dateTimeRangeTimer: null,
|
|
||||||
// 起止时间
|
|
||||||
dateTimeRange: [new Date(2018, 0, 1, 0, 0), new Date()],
|
|
||||||
// 上面起止时间的计算结果
|
|
||||||
dateTimeRangeAgo: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
// 刷新打开页面过去的时间
|
|
||||||
this.refreshOpenPageDateAgo()
|
|
||||||
this.dateTimeRangeTimer = setInterval(this.refreshOpenPageDateAgo, 1000)
|
|
||||||
// 刷新起止时间的计算结果
|
|
||||||
this.refreshDateTimeRangeAgo()
|
|
||||||
},
|
|
||||||
beforeDestroy () {
|
|
||||||
// 清空计时器
|
|
||||||
clearInterval(this.dateTimeRangeTimer)
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
dateTimeRange () {
|
|
||||||
// 刷新起止时间的计算结果
|
|
||||||
this.refreshDateTimeRangeAgo()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 计算打开页面过了多久
|
|
||||||
refreshOpenPageDateAgo () {
|
|
||||||
this.openPageDateAgo = timeago().format(this.openPageDate, 'zh_CN')
|
|
||||||
},
|
|
||||||
// 计算起止时间间隔
|
|
||||||
refreshDateTimeRangeAgo () {
|
|
||||||
const timeagoInstance = timeago(this.dateTimeRange[1])
|
|
||||||
this.dateTimeRangeAgo = timeagoInstance.format(this.dateTimeRange[0], 'zh_CN')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
@@ -1,122 +0,0 @@
|
|||||||
# vue-i18n
|
|
||||||
|
|
||||||
多国语插件
|
|
||||||
|
|
||||||
> 此文档仅限于演示如何在 `D2Admin` 中使用多国语言设置
|
|
||||||
|
|
||||||
公用的语言设置建议放在 `src/i18n` 下
|
|
||||||
|
|
||||||
i18n 文件夹结构如下所示
|
|
||||||
|
|
||||||
```
|
|
||||||
|__index.js // 主文件
|
|
||||||
|__lang // 语言配置文件夹
|
|
||||||
| |__cn // 中文
|
|
||||||
| | |__index.js // 中文 公用配置
|
|
||||||
| |__ja // 日语
|
|
||||||
| | |__index.js // 日语 公用配置
|
|
||||||
| |__en // 英语
|
|
||||||
| | |__index.js // 英语 公用配置
|
|
||||||
```
|
|
||||||
|
|
||||||
在 `src/i18n/index.js` 中导入同级lang文件夹内的语言设置，并导出一个新的 `VueI18n` 实例供 `main.js` 使用
|
|
||||||
|
|
||||||
```
|
|
||||||
import i18n from './i18n'
|
|
||||||
new Vue({
|
|
||||||
el: '#app',
|
|
||||||
store,
|
|
||||||
i18n, // 使用 i18n
|
|
||||||
router,
|
|
||||||
template: '<App/>',
|
|
||||||
components: { App }
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
## 基本使用方法
|
|
||||||
|
|
||||||
使用 `$t('路径')`
|
|
||||||
|
|
||||||
```
|
|
||||||
<PageHeader
|
|
||||||
slot="header"
|
|
||||||
:title="`${$t('pub.pageHeader.demo')} 1`"
|
|
||||||
url="http://kazupon.github.io/vue-i18n/en/">
|
|
||||||
</PageHeader>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 在组件中单独配置
|
|
||||||
|
|
||||||
有时候我们只希望在某个文件中配置这个组件的多国语言，如果所有的语言设置都放在 `d2admin-vue-element/src/i18n` 中会造成混乱，不易维护
|
|
||||||
|
|
||||||
`D2Admin` 已经替你安装好了 `vue-i18n-loader`，可以方便地在单文件组件中使用
|
|
||||||
|
|
||||||
示例
|
|
||||||
|
|
||||||
```
|
|
||||||
<i18n src="./lang.json"></i18n>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<el-tag>{{$t('hello')}}</el-tag>
|
|
||||||
<p>{{$t('check.title')}}</p>
|
|
||||||
<el-checkbox-group v-model="check">
|
|
||||||
<el-checkbox label="a">{{$t('check.label.Beijing')}}</el-checkbox>
|
|
||||||
<el-checkbox label="b">{{$t('check.label.Tokyo')}}</el-checkbox>
|
|
||||||
<el-checkbox label="c">{{$t('check.label.NewYork')}}</el-checkbox>
|
|
||||||
</el-checkbox-group>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
check: ['a', 'b']
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
在同一文件夹下的 `lang.json`
|
|
||||||
|
|
||||||
```
|
|
||||||
{
|
|
||||||
"cn": {
|
|
||||||
"hello": "你好",
|
|
||||||
"check": {
|
|
||||||
"title": "请选择",
|
|
||||||
"label": {
|
|
||||||
"Beijing": "北京",
|
|
||||||
"Tokyo": "东京",
|
|
||||||
"NewYork": "纽约"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"en": {
|
|
||||||
"hello": "hello",
|
|
||||||
"check": {
|
|
||||||
"title": "Please choose",
|
|
||||||
"label": {
|
|
||||||
"Beijing": "Beijing",
|
|
||||||
"Tokyo": "Tokyo",
|
|
||||||
"NewYork": "NewYork"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"ja": {
|
|
||||||
"hello": "こんにちは",
|
|
||||||
"check": {
|
|
||||||
"title": "選択してください",
|
|
||||||
"label": {
|
|
||||||
"Beijing": "北京",
|
|
||||||
"Tokyo": "東京",
|
|
||||||
"NewYork": "ニューヨーク"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
详细教程请查看官方文档，见此页右上角的链接
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
# Vue.$import
|
|
||||||
|
|
||||||
本框架集成了数据导入功能，并包装成插件
|
|
||||||
|
|
||||||
## 注册插件
|
|
||||||
|
|
||||||
> 默认已经注册，可以直接使用
|
|
||||||
|
|
||||||
```
|
|
||||||
import pluginImport from '@/plugin/import'
|
|
||||||
Vue.use(pluginImport)
|
|
||||||
```
|
|
||||||
|
|
||||||
之后就可以在组件中使用 `this.$import` 来调用导出功能
|
|
||||||
|
|
||||||
## Vue.$import.csv()
|
|
||||||
|
|
||||||
导入csv文件，并且返回一个 `Promise` 对象
|
|
||||||
|
|
||||||
```
|
|
||||||
// 在选择文件后调用
|
|
||||||
handleUpload (file) {
|
|
||||||
this.$import.csv(file)
|
|
||||||
.then(res => {
|
|
||||||
this.table.columns = Object.keys(res.data[0]).map(e => ({
|
|
||||||
label: e,
|
|
||||||
prop: e
|
|
||||||
}))
|
|
||||||
this.table.data = res.data
|
|
||||||
})
|
|
||||||
// 阻止默认的上传
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Vue.$import.xlsx()
|
|
||||||
|
|
||||||
导入xlsx文件，并且返回一个 `Promise` 对象
|
|
||||||
|
|
||||||
**注意 导入的表格文件第一行应为表头**
|
|
||||||
|
|
||||||
参考下述示例使用
|
|
||||||
|
|
||||||
```
|
|
||||||
// 在选择文件后调用
|
|
||||||
handleUpload (file) {
|
|
||||||
this.$import.xlsx(file)
|
|
||||||
.then(({header, results}) => {
|
|
||||||
// header 为表头
|
|
||||||
// results 为内容
|
|
||||||
this.table.columns = header.map(e => {
|
|
||||||
return {
|
|
||||||
label: e,
|
|
||||||
prop: e
|
|
||||||
}
|
|
||||||
})
|
|
||||||
this.table.data = results
|
|
||||||
})
|
|
||||||
// 阻止默认的上传
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
```
|
|
||||||
@@ -1,146 +0,0 @@
|
|||||||
# Vue.$export
|
|
||||||
|
|
||||||
本框架集成了数据导出功能，并包装成插件
|
|
||||||
|
|
||||||
## 注册插件
|
|
||||||
|
|
||||||
> 默认已经注册，可以直接使用
|
|
||||||
|
|
||||||
```
|
|
||||||
import pluginExport from '@/plugin/export'
|
|
||||||
Vue.use(pluginExport)
|
|
||||||
```
|
|
||||||
|
|
||||||
之后就可以在组件中使用 `this.$export` 来调用导出功能
|
|
||||||
|
|
||||||
## Vue.$export.csv()
|
|
||||||
|
|
||||||
此方法将数据以 `CSV` 格式导出，并且返回一个 `Promise` 对象
|
|
||||||
|
|
||||||
使用
|
|
||||||
|
|
||||||
```
|
|
||||||
this.$export.csv({
|
|
||||||
columns,
|
|
||||||
data
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// ...可选回调
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
参数
|
|
||||||
|
|
||||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
|
||||||
| --- | --- | --- | --- | --- | --- |
|
|
||||||
| columns | 列 | 非 | Array | | 空数组 |
|
|
||||||
| data | 行数据 | 非 | Array | | 空数组 |
|
|
||||||
| table | 文件名 | 非 | String | | table |
|
|
||||||
| noHeader | 不导出表头 | 非 | Boolean | | false |
|
|
||||||
| separator | 数据分隔符 | 非 | String | | , |
|
|
||||||
| quoted | 每项数据是否加引号 | 非 | Boolean | | false |
|
|
||||||
|
|
||||||
示例
|
|
||||||
|
|
||||||
```
|
|
||||||
const columns = [
|
|
||||||
{
|
|
||||||
label: '姓名',
|
|
||||||
prop: 'name'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '年龄',
|
|
||||||
prop: 'age'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
const data = [
|
|
||||||
{
|
|
||||||
name: 'lucy',
|
|
||||||
age: 24
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'bob',
|
|
||||||
age: 26
|
|
||||||
}
|
|
||||||
]
|
|
||||||
this.$export.csv({
|
|
||||||
columns,
|
|
||||||
data
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
## Vue.$export.excel()
|
|
||||||
|
|
||||||
此方法将数据以 `xlsx` 格式导出，并且返回一个 `Promise` 对象
|
|
||||||
|
|
||||||
使用
|
|
||||||
|
|
||||||
```
|
|
||||||
this.$export.excel({
|
|
||||||
columns,
|
|
||||||
data
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// ...可选回调
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
参数
|
|
||||||
|
|
||||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
|
||||||
| --- | --- | --- | --- | --- | --- |
|
|
||||||
| columns | 列 | 非 | Array | | 空数组 |
|
|
||||||
| data | 行数据 | 非 | Array | | 空数组 |
|
|
||||||
| table | 文件名 | 非 | String | | table |
|
|
||||||
|
|
||||||
示例
|
|
||||||
|
|
||||||
```
|
|
||||||
const columns = [
|
|
||||||
{
|
|
||||||
label: '姓名',
|
|
||||||
prop: 'name'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '年龄',
|
|
||||||
prop: 'age'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
const data = [
|
|
||||||
{
|
|
||||||
name: 'lucy',
|
|
||||||
age: 24
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'bob',
|
|
||||||
age: 26
|
|
||||||
}
|
|
||||||
]
|
|
||||||
this.$export.excel({
|
|
||||||
columns,
|
|
||||||
data
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
## Vue.$export.txt()
|
|
||||||
|
|
||||||
此方法将数据以 `txt` 格式导出，并且返回一个 `Promise` 对象
|
|
||||||
|
|
||||||
使用
|
|
||||||
|
|
||||||
```
|
|
||||||
this.$export.txt({
|
|
||||||
text: '文本内容',
|
|
||||||
title: '文件名'
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
// ...可选回调
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
参数
|
|
||||||
|
|
||||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
|
||||||
| --- | --- | --- | --- | --- | --- |
|
|
||||||
| text | 文件内容 | 非 | String | | 空 |
|
|
||||||
| title | 文件名 | 非 | String | | 文本 |
|
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
## 参数
|
|
||||||
|
|
||||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
|
||||||
| --- | --- | --- | --- | --- | --- |
|
|
||||||
| url | markdown文件地址 | 非 | String | | 无 |
|
|
||||||
| md | markdown内容 | 非 | String | | 无 |
|
|
||||||
| highlight | 代码高亮 | 非 | Boolean | | false |
|
|
||||||
| baidupan | 百度网盘分享链接显示优化 | 非 | Boolean | | true |
|
|
||||||
|
|
||||||
## 使用方法
|
|
||||||
|
|
||||||
加载一个.md文件
|
|
||||||
|
|
||||||
```
|
|
||||||
<d2-markdown url="/static/md/xxxx.md"/>
|
|
||||||
```
|
|
||||||
|
|
||||||
加载资源
|
|
||||||
|
|
||||||
```
|
|
||||||
const md = `# Header
|
|
||||||
|
|
||||||
## title
|
|
||||||
|
|
||||||
text`
|
|
||||||
|
|
||||||
<d2-markdown :md="md"/>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 百度网盘分享链接优化
|
|
||||||
|
|
||||||
当书写类似下面的分享链接时
|
|
||||||
|
|
||||||
> 需要 `baidupan = true`
|
|
||||||
|
|
||||||
```
|
|
||||||
普通分享链接
|
|
||||||
|
|
||||||
> https://pan.baidu.com/s/1kW6uUwB
|
|
||||||
|
|
||||||
私密分享链接
|
|
||||||
|
|
||||||
> 链接: https://pan.baidu.com/s/1ggFW21l 密码: 877y
|
|
||||||
```
|
|
||||||
|
|
||||||
markdown 中引用部分的文本由于被识别为百度云的分享链接，所以不会被当做 `blockquote` 渲染（非百度云链接的引用行不会改变），会以一种特别的块来显示
|
|
||||||
|
|
||||||
就像这样
|
|
||||||
|
|
||||||
> https://pan.baidu.com/s/1kW6uUwB
|
|
||||||
|
|
||||||
上面的块会嵌套在你的 markdown 渲染结果中
|
|
||||||
|
|
||||||
> 了解 D2Admin 是如何在 markdown 中匹配百度云链接的？ [查看源码](https://github.com/FairyEver/d2admin-vue-element/blob/master/src/components/core/Markdown/plugin/baidupan.js)
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
## 参数
|
|
||||||
|
|
||||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
|
||||||
| --- | --- | --- | --- | --- | --- |
|
|
||||||
| code | 代码字符串 | 非 | String | | console.log('you lost code prop') |
|
|
||||||
|
|
||||||
## 示例
|
|
||||||
|
|
||||||
```
|
|
||||||
<d2-highlight code="alert('Hello')"/>
|
|
||||||
```
|
|
||||||
|
|
||||||
> 本框架只是提供代码高亮的简单实现，如需实现更高级的设置请修改组件代码
|
|
||||||
@@ -1,33 +0,0 @@
|
|||||||
## 参数
|
|
||||||
|
|
||||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
|
||||||
| --- | --- | --- | --- | --- | --- |
|
|
||||||
| name | 图标名称 | 非 | String | 放在 src/assets/icons/svg 中的 .svg 文件名 | 空 |
|
|
||||||
|
|
||||||
## 使用方法
|
|
||||||
|
|
||||||
首先将下载的 .svg 图标放入 `src/assets/icons/svg` 文件夹下
|
|
||||||
|
|
||||||
然后使用组件
|
|
||||||
|
|
||||||
```
|
|
||||||
<d2-icon-svg name="刚才的svg文件名"/>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 获取已经注册的所有图标
|
|
||||||
|
|
||||||
你已经发现了，只需要将图标文件放入项目中就会自动注册
|
|
||||||
|
|
||||||
这是因为已经对 `webpack` 和 `svg-sprite-loader` 进行了相关设置，`src/assets/icons/svg` 文件夹中的图标会自动注册到项目中，文件全部打包成 svg-sprite，名称注册到 `Vue.$IconSvg` 属性中
|
|
||||||
|
|
||||||
所以如果你需要检查项目中已经注册的所有图标，可以通过如下方式
|
|
||||||
|
|
||||||
```
|
|
||||||
// 在 vue 单文件组件中
|
|
||||||
console.log(this.$IconSvg)
|
|
||||||
```
|
|
||||||
|
|
||||||
## 参考
|
|
||||||
|
|
||||||
演示图标来源 [iconfont.cn @龙正昆《常用的50个4px双色图标库》](http://iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=4878)
|
|
||||||
|
|
||||||
@@ -1,39 +0,0 @@
|
|||||||
## 参数
|
|
||||||
|
|
||||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
|
||||||
| --- | --- | --- | --- | --- | --- |
|
|
||||||
| name | 图标名称 | 非 | String | font-awesome 所有图标名 | font-awesome |
|
|
||||||
|
|
||||||
## 使用方法
|
|
||||||
|
|
||||||
基本
|
|
||||||
|
|
||||||
```
|
|
||||||
// 这样用没有毛病 但是也没什么用
|
|
||||||
<d2-icon/>
|
|
||||||
|
|
||||||
// 指定图标名称
|
|
||||||
<d2-icon name="github"/>
|
|
||||||
|
|
||||||
// 设置行内样式
|
|
||||||
<d2-icon name="github" style="font-size: 100px;"/>
|
|
||||||
|
|
||||||
// 设置 class
|
|
||||||
<d2-icon name="github" class="icon-class-demo"/>
|
|
||||||
```
|
|
||||||
|
|
||||||
这个组件只是简化了写法而已
|
|
||||||
|
|
||||||
```
|
|
||||||
<d2-icon name="github"/>
|
|
||||||
// 等同于
|
|
||||||
<i class="fa fa-github" aria-hidden="true"></i>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 参考
|
|
||||||
|
|
||||||
图标索引
|
|
||||||
|
|
||||||
[Font Awesome 中文网](http://www.fontawesome.com.cn/faicons/)
|
|
||||||
|
|
||||||
[fontawesome.com](https://fontawesome.com/icons?d=gallery)
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
# 图标选择器
|
|
||||||
|
|
||||||
## 参数
|
|
||||||
|
|
||||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
|
||||||
| --- | --- | --- | --- | --- | --- |
|
|
||||||
| value | 绑定的值，可以使用 v-model | 非 | String | | |
|
|
||||||
| placeholder | 占位符，显示在未选择之前的按钮和输入框中 | 非 | String | | 请选择 |
|
|
||||||
| placement | 界面探出方向 | 非 | String | 同 Popover 组件 placement 参数 | right |
|
|
||||||
| clearable | 是否允许清空 | 非 | Boolean | | true |
|
|
||||||
| userInput | 是否允许用户自由输入 | 非 | Boolean | | false |
|
|
||||||
| autoClose | 是否在选择后自动关闭 | 非 | Boolean | | true |
|
|
||||||
|
|
||||||
@@ -1,68 +0,0 @@
|
|||||||
## 介绍
|
|
||||||
|
|
||||||
D2Admin 集成了由蚂蚁金服出品的 **G2** 图表库
|
|
||||||
|
|
||||||
## 实现方式
|
|
||||||
|
|
||||||
`src/components/charts/register.js` 为注册图表组件的文件
|
|
||||||
|
|
||||||
`src/components/charts/G2` 为图表组件存放位置
|
|
||||||
|
|
||||||
`src/components/charts/G2/mixins/G2.js` 是图表最主要的文件，这是一个所有的图表组件都会使用的 mixin，这个 mixin 主要有以下用途
|
|
||||||
|
|
||||||
- 将 G2 和 DataSet 绑定到 data 上，方便组件使用，省去重复 `import G2 from '@antv/g2'` 等
|
|
||||||
- 将 [G2 Chart类](http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_Chart) 的属性全部暴露为 Vue 组件参数，这些参数会在初始化图表时用到
|
|
||||||
- 提供了额外的设置参数，比如自动高度，自动初始化，初始化延时
|
|
||||||
- 关闭 G2 的体验改进计划打点请求
|
|
||||||
- data 上的 chart 对象
|
|
||||||
- 自动初始化(或者不初始化)图表
|
|
||||||
- `creatChart` 方法，根据参数设置生成 data 上的 chart 对象
|
|
||||||
- `resize` 方法
|
|
||||||
|
|
||||||
在图表组件中使用这个 mixin 示例
|
|
||||||
|
|
||||||
```
|
|
||||||
<template>
|
|
||||||
<!-- 如果需要开启自动高度功能 需要在这里设置 style="height: 100%;" -->
|
|
||||||
<div ref="chart" style="height: 100%;"></div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// 引入公用 mixin
|
|
||||||
import G2 from '@/components/charts/G2/mixins/G2.js'
|
|
||||||
export default {
|
|
||||||
mixins: [
|
|
||||||
G2
|
|
||||||
],
|
|
||||||
methods: {
|
|
||||||
// 初始化图表
|
|
||||||
init () {
|
|
||||||
// mixin 中提供 creatChart 方法，这部分每个图表都一样
|
|
||||||
this.creatChart()
|
|
||||||
// 本组件的特殊设置 这部分每个图表不一样 你只需要改这部分内容
|
|
||||||
this.chart.source(this.data)
|
|
||||||
this.chart.coord().transpose()
|
|
||||||
this.chart.interval().position('x*y')
|
|
||||||
// 最后一步 渲染图表 这部分每个图表都一样
|
|
||||||
this.chart.render()
|
|
||||||
},
|
|
||||||
// 数据源改变 重新渲染新的数据
|
|
||||||
changeData () {
|
|
||||||
this.chart.changeData(this.data)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
上面的代码段展示了如何使用 mixin 快速制作一个图表组件，只需根据某个图表的个性化需要，在组件中重新定义 `init` 和 `changeData` 方法即可
|
|
||||||
|
|
||||||
你可以修改这个 mixin 去实现更多的功能，同时影响所有的图表组件
|
|
||||||
|
|
||||||
> 这只仅仅是作者个人对于图表封装的一个实现思路
|
|
||||||
|
|
||||||
## 为什么没有选择其他产品
|
|
||||||
|
|
||||||
G2 完全可以胜任一般的后台界面报表图表需求，而且官网文档清晰友好
|
|
||||||
|
|
||||||
如果你需要更酷炫的图表，也完全可以剔除集成的库，换用 百度的[echarts](http://echarts.baidu.com/) 或者超级强大的 [d3.js](https://d3js.org/)
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
## 参数
|
|
||||||
|
|
||||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
|
||||||
| --- | --- | --- | --- | --- | --- |
|
|
||||||
| start | 起始值 | 非 | Number | | 0 |
|
|
||||||
| end | 结束值 | 是 | Number | | 0 |
|
|
||||||
| decimals | 小数位数 | 非 | Number | | 0 |
|
|
||||||
| duration | 持续时间 | 非 | Number | | 2 |
|
|
||||||
| options | 设置项 | 非 | Object | | 空对象 |
|
|
||||||
| callback | 回调函数 | 非 | Function | | 空函数 |
|
|
||||||
|
|
||||||
## 示例
|
|
||||||
|
|
||||||
```
|
|
||||||
// 基本使用方法
|
|
||||||
<d2-count-up :end="100"/>
|
|
||||||
|
|
||||||
// 设置始末值
|
|
||||||
<d2-count-up :start="14" :end="100"/>
|
|
||||||
|
|
||||||
// 设置动画时间
|
|
||||||
<d2-count-up :end="100" :decimals="2"/>
|
|
||||||
```
|
|
||||||
|
|
||||||
组件会在页面上渲染 `<span>` 标签
|
|
||||||
|
|
||||||
组件根据 [countUp.js](https://github.com/inorganik/countUp.js) 封装，`options` 参数详见原始插件文档
|
|
||||||
@@ -1,36 +0,0 @@
|
|||||||
页面容器组件是每个页面的基础，为了在整个项目中统一效果，它应该是 `<template>` 组件的直接子组件
|
|
||||||
|
|
||||||
## 参数
|
|
||||||
|
|
||||||
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
|
||||||
| --- | --- | --- | --- | --- | --- |
|
|
||||||
| type | 容器类型 | 非 | String | card ghost card-full | card |
|
|
||||||
| responsive | 响应式宽度 | 非 | Boolean | | false |
|
|
||||||
|
|
||||||
> `responsive` 参数设置只在 `type` 等于 `card` 或 `ghost` 时生效
|
|
||||||
|
|
||||||
## 使用方法
|
|
||||||
|
|
||||||
一个基础单文件页面组件的示例
|
|
||||||
|
|
||||||
```
|
|
||||||
<template>
|
|
||||||
<d2-container>
|
|
||||||
<template slot="header">
|
|
||||||
可选的 header 内容 ...
|
|
||||||
</template>
|
|
||||||
主体内容 ...
|
|
||||||
</d2-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'your-component-name'
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
// 需要的话引入
|
|
||||||
@import '~@/assets/style/public.scss';
|
|
||||||
</style>
|
|
||||||
```
|
|
||||||
Reference in New Issue
Block a user