Skip to content

Commit 932d7fb

Browse files
kouchaokouchao
committed
tabs
1 parent fccbbee commit 932d7fb

8 files changed

Lines changed: 137 additions & 115 deletions

File tree

‎build/webpack.base.conf.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,16 @@ module.exports = {
2929
},
3030
module: {
3131
rules: [
32-
...(config.dev.useEslint? [{
33-
test: /\.(js|vue)$/,
34-
loader: 'eslint-loader',
35-
enforce: 'pre',
36-
include: [resolve('src'), resolve('test')],
37-
options: {
38-
formatter: require('eslint-friendly-formatter'),
39-
emitWarning: !config.dev.showEslintErrorsInOverlay
40-
}
41-
}] : []),
32+
// ...(config.dev.useEslint? [{
33+
// test: /\.(js|vue)$/,
34+
// loader: 'eslint-loader',
35+
// enforce: 'pre',
36+
// include: [resolve('src'), resolve('test')],
37+
// options: {
38+
// formatter: require('eslint-friendly-formatter'),
39+
// emitWarning: !config.dev.showEslintErrorsInOverlay
40+
// }
41+
// }] : []),
4242
{
4343
test: /\.vue$/,
4444
loader: 'vue-loader',

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,11 @@
7777
<layui-block color="red">引用区域的文字1</layui-block>
7878
<layui-block color="red" title="标题">引用区域的文字2</layui-block>
7979
<layui-block color="red" title="标题" border>引用区域的文字3</layui-block>
80+
layui-tabs
81+
<layui-tabs>
82+
<layui-tab-pane name="tab1">tab1</layui-tab-pane>
83+
<layui-tab-pane name="tab2">tab2</layui-tab-pane>
84+
</layui-tabs>
8085
</div>
8186
</template>
8287

‎src/components/auxiliary/block.vue‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,37 @@
11
<template>
2-
<div style="margin: 10px">
3-
<blockquote v-if="!title" class="layui-elem-quote" :style="'border-left: 5px solid ' + color">
4-
<slot></slot>
5-
</blockquote>
6-
<fieldset v-if="title"
7-
class="layui-elem-field"
8-
:class="border ? '' : 'layui-field-title'"
9-
:style="styleName">
10-
<legend>{{title}}</legend>
11-
<div class="layui-field-box">
12-
<slot></slot>
13-
</div>
14-
</fieldset>
15-
</div>
2+
<div style="margin: 10px">
3+
<blockquote v-if="!title" class="layui-elem-quote" :style="'border-left: 5px solid ' + color">
4+
<slot></slot>
5+
</blockquote>
6+
<fieldset v-if="title"
7+
class="layui-elem-field"
8+
:class="border ? '' : 'layui-field-title'"
9+
:style="styleName">
10+
<legend>{{title}}</legend>
11+
<div class="layui-field-box">
12+
<slot></slot>
13+
</div>
14+
</fieldset>
15+
</div>
1616

1717
</template>
1818

1919
<script>
20-
export default {
21-
name: 'layui-block',
22-
props: {
23-
color: String,
24-
title: String,
25-
border: Boolean
26-
},
27-
data: function () {
28-
return {
29-
styleName: {
30-
'border-color': this.color
20+
export default {
21+
name: 'layui-block',
22+
props: {
23+
color: String,
24+
title: String,
25+
border: Boolean
26+
},
27+
data: function () {
28+
return {
29+
styleName: {
30+
'border-color': this.color
31+
}
32+
}
3133
}
32-
}
3334
}
34-
}
3535
</script>
3636

3737
<style scoped>

‎src/components/tabs/tab-pane.vue‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<div class="layui-tab-item">
3+
<slot></slot>
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: 'layui-tab-pane'
10+
}
11+
</script>
12+
13+
<style scoped>
14+
15+
</style>

‎src/components/tabs/tab.vue‎

Lines changed: 0 additions & 49 deletions
This file was deleted.

‎src/components/tabs/tabs.vue‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<div class="layui-tab">
3+
<!--<ul class="layui-tab-title">-->
4+
<!--<li class="layui-this">权限分配</li>-->
5+
<!--<li>网站设置</li>-->
6+
<!--<li>网站设置</li>-->
7+
<!--</ul>-->
8+
<!--<div class="layui-tab-content">-->
9+
<!--<div class="layui-tab-item layui-show">内容1</div>-->
10+
<!--<div class="layui-tab-item">内容2</div>-->
11+
<!--<div class="layui-tab-item">内容3</div>-->
12+
<!--<div class="layui-tab-item">内容4</div>-->
13+
<!--<div class="layui-tab-item">内容5</div>-->
14+
<!--</div>-->
15+
<!--{{$slots.default}}-->
16+
</div>
17+
18+
</template>
19+
20+
<script>
21+
export default {
22+
name: 'layui-tabs',
23+
props: {
24+
item: {
25+
item: String,
26+
default: 'default'
27+
},
28+
size: String,
29+
radius: Boolean,
30+
icon: String,
31+
right: Boolean,
32+
type: String
33+
},
34+
created: function () {
35+
console.log(this.$slots.default)
36+
}
37+
}
38+
</script>
39+
40+
<style scoped>
41+
i.right{
42+
padding-left: 4px;
43+
}
44+
45+
i.left{
46+
padding-right: 4px;
47+
}
48+
49+
</style>

‎src/index.js‎

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -18,39 +18,41 @@ import checkbox from './components/form/checkbox'
1818
import select from './components/form/select'
1919
import textarea from './components/form/textarea'
2020

21-
import tab from './components/tabs/tab'
21+
import tabs from './components/tabs/tabs'
22+
import tabPane from './components/tabs/tab-pane'
2223

2324
import hr from './components/auxiliary/hr'
2425
import block from './components/auxiliary/block'
2526

2627
const layui = {
27-
config: {},
28-
install: function (Vue) {
29-
Vue.prototype.testLayui = function () {
30-
console.log('ok')
28+
config: {},
29+
install: function (Vue) {
30+
Vue.prototype.testLayui = function () {
31+
console.log('ok')
32+
}
33+
let components = [
34+
row,
35+
col,
36+
container,
37+
btn,
38+
btnGroup,
39+
form,
40+
formItem,
41+
radio,
42+
input,
43+
checkbox,
44+
select,
45+
textarea,
46+
tabs,
47+
tabPane,
48+
hr,
49+
block
50+
]
51+
components.forEach(function (component) {
52+
Vue.component(component.name, component)
53+
})
54+
console.log('install layui ok')
3155
}
32-
let components = [
33-
row,
34-
col,
35-
container,
36-
btn,
37-
btnGroup,
38-
form,
39-
formItem,
40-
radio,
41-
input,
42-
checkbox,
43-
select,
44-
textarea,
45-
tab,
46-
hr,
47-
block
48-
]
49-
components.forEach(function (component) {
50-
Vue.component(component.name, component)
51-
})
52-
console.log('install layui ok')
53-
}
5456
}
5557

5658
export default layui

0 commit comments

Comments
 (0)