Skip to content

Commit d360a91

Browse files
yidalhyidalh
committed
添加Badge组件
1 parent 2ea426b commit d360a91

File tree

3 files changed

+143
-91
lines changed

3 files changed

+143
-91
lines changed

‎resources/js/components.js‎

Lines changed: 25 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -10,74 +10,29 @@ Vue.component("Grid", require("@/components/grid/Table").default);
1010
Vue.component("Tree", require("@/components/grid/Tree").default);
1111
Vue.component("Form", require("@/components/form/Form").default);
1212
Vue.component("FormItem", require("@/components/form/FormItem").default);
13-
1413
Vue.component("BaseForm", require("@/components/form/BaseForm").default);
1514
Vue.component("MenuItem", require("@/components/layout/MenuItem").default);
1615

1716
//Form
18-
19-
20-
2117
Vue.component("Input", require("@/components/widgets/Form/Input").default);
22-
Vue.component(
23-
"RadioGroup",
24-
require("@/components/widgets/Form/RadioGroup").default
25-
);
26-
Vue.component(
27-
"Checkbox",
28-
require("@/components/widgets/Form/Checkbox").default
29-
);
30-
Vue.component(
31-
"CheckboxGroup",
32-
require("@/components/widgets/Form/CheckboxGroup").default
33-
);
34-
Vue.component(
35-
"InputNumber",
36-
require("@/components/widgets/Form/InputNumber").default
37-
);
18+
Vue.component("RadioGroup", require("@/components/widgets/Form/RadioGroup").default);
19+
Vue.component("Checkbox", require("@/components/widgets/Form/Checkbox").default);
20+
Vue.component("CheckboxGroup", require("@/components/widgets/Form/CheckboxGroup").default);
21+
Vue.component("InputNumber", require("@/components/widgets/Form/InputNumber").default);
3822
Vue.component("Select", require("@/components/widgets/Form/Select").default);
39-
Vue.component(
40-
"Cascader",
41-
require("@/components/widgets/Form/Cascader").default
42-
);
23+
Vue.component("Cascader", require("@/components/widgets/Form/Cascader").default);
4324
Vue.component("CSwitch", require("@/components/widgets/Form/Switch").default);
4425
Vue.component("Slider", require("@/components/widgets/Form/Slider").default);
45-
Vue.component(
46-
"Transfer",
47-
require("@/components/widgets/Form/Transfer").default
48-
);
26+
Vue.component("Transfer", require("@/components/widgets/Form/Transfer").default);
4927
Vue.component("Upload", require("@/components/widgets/Form/Upload").default);
50-
Vue.component(
51-
"ColorPicker",
52-
require("@/components/widgets/Form/ColorPicker").default
53-
);
54-
Vue.component(
55-
"TimePicker",
56-
require("@/components/widgets/Form/TimePicker").default
57-
);
58-
Vue.component(
59-
"Rate",
60-
require("@/components/widgets/Form/Rate").default
61-
);
62-
Vue.component(
63-
"DatePicker",
64-
require("@/components/widgets/Form/DatePicker").default
65-
);
66-
Vue.component(
67-
"DateTimePicker",
68-
require("@/components/widgets/Form/DateTimePicker").default
69-
);
70-
Vue.component("WangEditor", () =>
71-
import("@/components/widgets/Form/WangEditor")
72-
);
73-
Vue.component(
74-
"ItemSelect",
75-
require("@/components/widgets/Form/ItemSelect").default
76-
);
77-
Vue.component(
78-
"IconChoose",
79-
require("./components/widgets/Form/IconChoose").default
80-
);
28+
Vue.component("ColorPicker", require("@/components/widgets/Form/ColorPicker").default);
29+
Vue.component("TimePicker", require("@/components/widgets/Form/TimePicker").default);
30+
Vue.component("Rate", require("@/components/widgets/Form/Rate").default);
31+
Vue.component("DatePicker", require("@/components/widgets/Form/DatePicker").default);
32+
Vue.component("DateTimePicker", require("@/components/widgets/Form/DateTimePicker").default);
33+
Vue.component("WangEditor", () => import("@/components/widgets/Form/WangEditor"));
34+
Vue.component("ItemSelect", require("@/components/widgets/Form/ItemSelect").default);
35+
Vue.component("IconChoose", require("./components/widgets/Form/IconChoose").default);
8136

8237
//Grid
8338
Vue.component("Avatar", require("./components/widgets/Grid/Avatar").default);
@@ -90,53 +45,32 @@ Vue.component("Boole", require("./components/widgets/Grid/Boole").default);
9045
Vue.component("GridRoute", require("./components/widgets/Grid/GridRoute").default);
9146

9247
//Actions
93-
Vue.component(
94-
"EditAction",
95-
require("@/components/widgets/Actions/EditAction").default
96-
);
97-
Vue.component(
98-
"DeleteAction",
99-
require("@/components/widgets/Actions/DeleteAction").default
100-
);
101-
Vue.component(
102-
"VueRouteAction",
103-
require("@/components/widgets/Actions/VueRouteAction").default
104-
);
105-
Vue.component(
106-
"ActionButton",
107-
require("@/components/widgets/Actions/ActionButton").default
108-
);
48+
Vue.component("EditAction", require("@/components/widgets/Actions/EditAction").default);
49+
Vue.component("DeleteAction", require("@/components/widgets/Actions/DeleteAction").default);
50+
Vue.component("VueRouteAction", require("@/components/widgets/Actions/VueRouteAction").default);
51+
Vue.component("ActionButton", require("@/components/widgets/Actions/ActionButton").default);
10952

11053
//BatchAction
111-
Vue.component(
112-
"BatchAction",
113-
require("@/components/widgets/BatchActions/BatchAction").default
114-
);
54+
Vue.component("BatchAction", require("@/components/widgets/BatchActions/BatchAction").default);
11555

11656
//Tools
117-
Vue.component(
118-
"GridCreateButton",
119-
require("@/components/widgets/Tools/Create").default
120-
);
121-
Vue.component(
122-
"ToolButton",
123-
require("@/components/widgets/Tools/ToolButton").default
124-
);
57+
Vue.component("GridCreateButton", require("@/components/widgets/Tools/Create").default);
58+
Vue.component("ToolButton", require("@/components/widgets/Tools/ToolButton").default);
12559

12660
//Widget
61+
Vue.component("Badge", require("./components/widgets/Base/Badge").default);
12762
Vue.component("IText", require("./components/widgets/Base/Text").default);
12863
Vue.component("Button", require("@/components/widgets/Base/Button").default);
12964
Vue.component("Divider", require("@/components/widgets/Base/Divider").default);
13065
Vue.component("Card", require("@/components/widgets/Base/Card").default);
13166
Vue.component("Steps", require("@/components/widgets/Base/Steps").default);
13267
Vue.component("Html", require("@/components/widgets/Base/Html").default);
13368
Vue.component("Alert", require("@/components/widgets/Base/Alert").default);
134-
Vue.component(
135-
"DialogButton",
136-
require("@/components/widgets/Base/DialogButton").default
137-
);
69+
Vue.component("DialogButton", require("@/components/widgets/Base/DialogButton").default);
13870
Vue.component("Tooltip", require("@/components/widgets/Base/Tooltip").default);
13971
Vue.component("Markdown", () => import("@/components/widgets/Base/Markdown"));
72+
73+
14074
//antv
14175
Vue.component("AntvLine", () => import("@/components/antv/AntvLine"));
14276
Vue.component("AntvArea", () => import("@/components/antv/AntvArea"));

‎resources/js/components/widgets/Base/Badge.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<el-badge :style="attrs.style" :class="attrs.className" :value="attrs.value" :max="attrs.max" :is-dot="attrs.isDot"
3+
:hidden="attrs.hidden" :type="attrs.type">
4+
<component
5+
v-if="attrs.child"
6+
:is="attrs.child.componentName"
7+
:attrs="attrs.child"
8+
v-bind="$attrs"
9+
/>
10+
</el-badge>
11+
</template>
12+
13+
<script>
14+
import {BaseComponent} from "@/mixins.js";
15+
16+
export default {
17+
mixins: [BaseComponent],
18+
props: {
19+
attrs: Object
20+
}
21+
};
22+
</script>

‎src/Components/Widgets/Badge.php‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<?php
2+
3+
4+
namespace SmallRuralDog\Admin\Components\Widgets;
5+
6+
7+
use SmallRuralDog\Admin\Components\Component;
8+
9+
class Badge extends Component
10+
{
11+
protected $componentName = "Badge";
12+
13+
protected $value;
14+
protected $max;
15+
protected $isDot = false;
16+
protected $hidden = false;
17+
protected $type;
18+
protected $child;
19+
20+
/**
21+
* Badge constructor.
22+
* @param $value
23+
*/
24+
public function __construct($value)
25+
{
26+
parent::__construct($value);
27+
$this->value = $value;
28+
}
29+
30+
public static function make($value)
31+
{
32+
return new Badge($value);
33+
}
34+
35+
/**
36+
* @param string|int $value
37+
* @return $this
38+
*/
39+
public function value($value)
40+
{
41+
$this->value = $value;
42+
return $this;
43+
}
44+
45+
/**
46+
* @param int $max
47+
* @return $this
48+
*/
49+
public function max(int $max)
50+
{
51+
$this->max = $max;
52+
return $this;
53+
}
54+
55+
/**
56+
* @param bool $isDot
57+
* @return $this
58+
*/
59+
public function isDot(bool $isDot)
60+
{
61+
$this->isDot = $isDot;
62+
return $this;
63+
}
64+
65+
/**
66+
* @param bool $hidden
67+
* @return $this
68+
*/
69+
public function hidden(bool $hidden)
70+
{
71+
$this->hidden = $hidden;
72+
return $this;
73+
}
74+
75+
/**
76+
* @param string $type
77+
* @return $this
78+
*/
79+
public function type(string $type)
80+
{
81+
$this->type = $type;
82+
return $this;
83+
}
84+
85+
/**
86+
* @param mixed $child
87+
* @return $this
88+
*/
89+
public function child($child)
90+
{
91+
$this->child = $child;
92+
return $this;
93+
}
94+
95+
96+
}

0 commit comments

Comments
 (0)