Skip to content

Commit 1e9cba0

Browse files
GongJSvanoneang
GongJS
authored and
vanoneang
committed
Component (#144):radio checkbox组件
* feat: Input组件 * fix * feat: radio checkbox组件
1 parent 252616c commit 1e9cba0

13 files changed

Lines changed: 855 additions & 119 deletions

File tree

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
77
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
88
<link rel="stylesheet" type="text/css" href="./iconfont.css" />
9-
<script>//at.alicdn.com/t/font_1104271_so151lbumpq.js</script>
9+
<script src="//at.alicdn.com/t/font_1104271_so151lbumpq.js"></script>
1010
<title>lin-cms</title>
1111
</head>
1212

‎src/assets/styles/realize/element-variables.scss‎

Lines changed: 14 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ $--color-success: #00c292 !default;
66
$--color-warning: #dee2e6 !default;
77
$--color-danger: #f4516c !default;
88

9+
$--background-color-base: #F6F7FA !default;
10+
911
/* 改变 icon 字体路径变量，必需 */
1012
$--font-path: "~element-ui/lib/theme-chalk/fonts";
1113

@@ -161,6 +163,10 @@ $--font-path: "~element-ui/lib/theme-chalk/fonts";
161163

162164
.el-radio__inner {
163165
border: 1px solid #c4c0d2 !important;
166+
&::after {
167+
width:7px;
168+
height:7px;
169+
}
164170
}
165171

166172
.el-radio__input.is-checked .el-radio__inner {
@@ -195,8 +201,11 @@ $--font-path: "~element-ui/lib/theme-chalk/fonts";
195201
}
196202

197203
// pagination
198-
.el-pagination__editor.el-input .el-input__inner {
199-
border-radius: 4px;
204+
.el-pagination__editor.el-input {
205+
.el-input__inner {
206+
border-radius: 4px;
207+
}
208+
200209
}
201210

202211
.el-pagination.is-background .el-pager li:not(.disabled).active {
@@ -205,48 +214,10 @@ $--font-path: "~element-ui/lib/theme-chalk/fonts";
205214
}
206215

207216
// input
208-
.el-input-group__append {
209-
padding: 0 8px;
210-
border-top-right-radius: 20px;
211-
border-bottom-right-radius: 20px;
217+
.el-input-group__append, .el-input-group__prepend {
212218
background: $theme;
213-
color: #ffffff;
214-
border: 1px solid $theme;
215-
}
216-
217-
.el-input-group--append .el-input__inner {
218-
border-top-left-radius: 20px;
219-
border-bottom-left-radius: 20px;
220-
border-right: none;
221-
width: 150px;
222-
transition: all 0.2s linear;
223-
224-
&:focus {
225-
width: 250px;
226-
transition: all 0.3s linear;
227-
}
228-
}
229-
230-
.el-input-group__append,
231-
.el-input-group__prepend {
232-
padding: 0 8px;
233-
border-top-right-radius: 20px;
234-
border-bottom-right-radius: 20px;
235-
background: $theme;
236-
color: #ffffff;
237-
border: 1px solid $theme;
238-
239-
.el-icon-search {
240-
font-size: 18px;
241-
}
242-
}
243-
244-
.el-input .el-input__inner {
245-
border: 1px solid #c4c0d2 !important;
246-
}
247-
248-
.input-with-select > input.el-input__inner {
249-
border-right: none !important;
219+
border:1px solid $theme;
220+
color:#fff;
250221
}
251222

252223
// table
@@ -455,11 +426,6 @@ thead tr {
455426
top: 53%;
456427
}
457428

458-
.el-input__inner{
459-
height: 32px;
460-
line-height: 32px;
461-
}
462-
463429
.app-sidebar .el-menu-item-group .el-menu-item {
464430
padding-left: 60px !important;
465431
}

‎src/components/base/icon/lin-icon.vue‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<svg class="l-icon" :style="{ width, height }" @click="$emit('click', $event)">
3+
<use :xlink:href="`#${name}`" :fill="color"></use>
4+
</svg>
5+
</template>
6+
<script>
7+
export default {
8+
name: 'LIcon',
9+
props: {
10+
name: {
11+
type: String,
12+
default: '',
13+
},
14+
color: {
15+
type: String,
16+
default: '',
17+
},
18+
width: {
19+
type: String,
20+
default: '1.2em',
21+
},
22+
height: {
23+
type: String,
24+
default: '1.2em',
25+
},
26+
},
27+
}
28+
</script>
29+
<style lang="scss" scoped>
30+
.l-icon {
31+
&:hover,
32+
&:focus {
33+
color: #fff;
34+
}
35+
}
36+
</style>

‎src/components/base/search/lin-search.vue‎

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
<template>
2-
<div>
3-
<el-input
4-
:placeholder="placeholder"
5-
clearable
6-
v-model="keyword"
7-
class="input-with-select">
2+
<div class="lin-search">
3+
<el-input :placeholder="placeholder" clearable v-model="keyword" class="input-with-select">
84
<el-button slot="append" icon="el-icon-search"></el-button>
95
</el-input>
106
</div>
@@ -27,9 +23,12 @@ export default {
2723
},
2824
created() {
2925
// 节流搜索
30-
this.$watch('keyword', Utils.debounce((newQuery) => {
31-
this.$emit('query', newQuery)
32-
}, 1000))
26+
this.$watch(
27+
'keyword',
28+
Utils.debounce((newQuery) => {
29+
this.$emit('query', newQuery)
30+
}, 1000),
31+
)
3332
},
3433
methods: {
3534
clear() {
@@ -38,3 +37,27 @@ export default {
3837
},
3938
}
4039
</script>
40+
<style lang="scss" scoped>
41+
.lin-search /deep/ .el-input-group__append {
42+
border-top-right-radius: 20px;
43+
border-bottom-right-radius: 20px;
44+
padding: 0 8px;
45+
color: #ffffff;
46+
border: 1px solid $theme;
47+
.el-icon-search {
48+
font-size: 18px;
49+
}
50+
}
51+
.lin-search /deep/ .el-input__inner {
52+
border-top-left-radius: 20px;
53+
border-bottom-left-radius: 20px;
54+
border-right: none;
55+
width: 150px;
56+
transition: all 0.2s linear;
57+
58+
&:focus {
59+
width: 250px;
60+
transition: all 0.3s linear;
61+
}
62+
}
63+
</style>

‎src/components/layout/User.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
<li class="password" @click="changePassword">
1818
<i class="iconfont icon-weibaoxitongshangchuanlogo-"></i>
1919
<span>修改登录密码</span>
20+
<l-icon name="icon-star" color="#aaa" width="20px" height="20px"></l-icon>
2021
</li>
2122
<li class="account" @click="outLogin">
2223
<i class="iconfont icon-tuichu"></i>

‎src/config/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
const Config = {
2-
baseUrl: 'http://dev.koa.7yue.pro/',
2+
baseUrl: 'localhost:5000',
33
stagnateTime: 1 * 60 * 60 * 1000, // 无操作停滞时间 默认1小时
44
openAutoJumpOut: true, // 是否开启无操作跳出
55
notLoginRoute: ['login'], // 无需登录即可访问的路由 name,

‎src/main.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Vue from 'vue'
33
import ElementUI from 'element-ui'
44

55
import StickyTop from '@/components/base/sticky-top/sticky-top'
6+
import LIcon from '@/components/base/icon/lin-icon'
67
import SourceCode from '@/components/base/source-code/source-code'
78

89
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition'
@@ -28,6 +29,7 @@ Vue.use(plugins)
2829
Vue.component(CollapseTransition.name, CollapseTransition)
2930

3031
Vue.component('sticky-top', StickyTop)
32+
Vue.component('l-icon', LIcon)
3133
Vue.component('source-code', SourceCode)
3234

3335
Vue.use(GlobalMixin)

‎src/plugins/LinCmsUi/assets/style/container.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.lin-wrap-ui /deep/ .el-card__body {
2+
padding-top: 30px;
3+
padding-bottom: 0px;
4+
}
5+
.lin-wrap-ui /deep/ .el-collapse {
6+
border-top: none;
7+
border-bottom: none;
8+
.el-collapse-item__header {
9+
border-bottom: none;
10+
color: #2f4e8c;
11+
padding-left: calc(100% - 77px);
12+
}
13+
14+
.el-collapse-item__content {
15+
background: #e9f0f8;
16+
color: #2f4e8c;
17+
border-radius: 4px;
18+
padding: 0px 20px 20px 20px;
19+
margin-bottom: 20px;
20+
}
21+
}
22+
.lin-wrap-ui {
23+
padding: 30px 40px;
24+
}

‎src/plugins/LinCmsUi/stage-config.js‎

Lines changed: 45 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const LinCmsUiRouter = {
2222
title: 'Table 表格',
2323
type: 'folder',
2424
name: null,
25-
route: '/lin-cms-ui/table/base',
25+
route: '/lin-cms-ui/table',
2626
filePath: 'plugins/LinCmsUi/views/table/',
2727
inNav: true,
2828
icon: 'iconfont icon-jiemiansheji',
@@ -31,7 +31,7 @@ const LinCmsUiRouter = {
3131
{
3232
title: '基础示例',
3333
type: 'view',
34-
name: 'LinCmsUiButtonbase',
34+
name: null,
3535
route: '/lin-cms-ui/table/base',
3636
filePath: 'plugins/LinCmsUi/views/table/Table.vue',
3737
inNav: true,
@@ -41,7 +41,7 @@ const LinCmsUiRouter = {
4141
{
4242
title: '组合示例',
4343
type: 'view',
44-
name: 'LinCmsUiButtonCombo',
44+
name: null,
4545
route: '/lin-cms-ui/table/combo',
4646
filePath: 'plugins/LinCmsUi/views/table/TableCombo.vue',
4747
inNav: true,
@@ -50,6 +50,48 @@ const LinCmsUiRouter = {
5050
},
5151
],
5252
},
53+
{
54+
title: 'Form 表单 ',
55+
type: 'folder',
56+
name: null,
57+
route: '/lin-cms-ui/form/base',
58+
filePath: 'plugins/LinCmsUi/views/form/',
59+
inNav: true,
60+
icon: 'iconfont icon-jiemiansheji',
61+
right: null,
62+
children: [
63+
{
64+
title: 'Input',
65+
type: 'view',
66+
name: null,
67+
route: '/lin-cms-ui/form/input',
68+
filePath: 'plugins/LinCmsUi/views/form/Input.vue',
69+
inNav: true,
70+
icon: 'iconfont icon-jiemiansheji',
71+
72+
},
73+
{
74+
title: 'Radio',
75+
type: 'view',
76+
name: null,
77+
route: '/lin-cms-ui/form/radio',
78+
filePath: 'plugins/LinCmsUi/views/form/Radio.vue',
79+
inNav: true,
80+
icon: 'iconfont icon-jiemiansheji',
81+
82+
},
83+
{
84+
title: 'Checkbox',
85+
type: 'view',
86+
name: null,
87+
route: '/lin-cms-ui/form/checkbox',
88+
filePath: 'plugins/LinCmsUi/views/form/Checkbox.vue',
89+
inNav: true,
90+
icon: 'iconfont icon-jiemiansheji',
91+
92+
},
93+
],
94+
},
5395
],
5496
}
5597

0 commit comments

Comments
 (0)