Skip to content

Commit 4650616

Browse files
JuneAndGreenJuneAndGreen
committed
update: upgrade kbone-ui
1 parent d218dab commit 4650616

File tree

19 files changed

+420
-511
lines changed

19 files changed

+420
-511
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# kbone-ui
1+
# vue-kbone-ui
22

3-
基于 kbone，利用 Vue 语法，实现一套跨平台开发的 UI 库内容。
3+
使用 vue 多端开发(小程序和Web)，基于 [kbone](https://github.com/wechat-miniprogram/kbone) 的 element 和 render。
44

55
## 特性
66

‎build/miniprogram.config.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,12 @@ module.exports = {
88
router: {
99
home: [
1010
'/(home|index)?',
11-
'/index.html'
11+
'/index.html',
12+
'/test/(home|index)',
13+
],
14+
other: [
15+
'/test/list/:id',
16+
'/test/detail/:id',
1217
],
1318
},
1419
redirect: {
@@ -17,6 +22,8 @@ module.exports = {
1722
},
1823
generate: {
1924
autoBuildNpm: 'npm',
25+
appWxss: 'display',
26+
weui: true,
2027
},
2128
app: {
2229
backgroundTextStyle: 'dark',
@@ -44,7 +51,7 @@ module.exports = {
4451
attrValueReduce: 5000,
4552
},
4653
projectConfig: {
47-
projectname: 'kbone-template-vue',
48-
appid: '',
54+
projectname: 'kbone-template-vue-ui',
55+
appid: 'wx14c7c4cd189644a1',
4956
},
5057
}

‎build/webpack.mp.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ module.exports = {
1818
entry: {
1919
// js 入口
2020
home: path.resolve(__dirname, '../src/mp/home/main.mp.js'),
21+
other: path.resolve(__dirname, '../src/mp/other/main.mp.js'),
2122
},
2223
output: {
2324
path: path.resolve(__dirname, '../dist/mp/common'), // 放到小程序代码目录中的 common 目录下

‎package.json‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,16 @@
1111
"scripts": {
1212
"start": "npm run mp",
1313
"web": "cross-env NODE_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.config.js",
14-
"mp": "cross-env NODE_ENV=development webpack --config build/webpack.mp.config.js --progress --hide-modules",
14+
"mp": "rimraf dist/mp/common && cross-env NODE_ENV=development webpack --config build/webpack.mp.config.js --progress --hide-modules",
1515
"lint": "eslint --ext .js,.vue src --fix",
1616
"build": "rimraf dist/web && cross-env NODE_ENV=production webpack --config build/webpack.prod.config.js --progress --hide-modules",
17-
"build:mp": "cross-env NODE_ENV=production webpack --config build/webpack.mp.config.js --progress --hide-modules"
17+
"build:mp": "rimraf dist/mp/common && cross-env NODE_ENV=production webpack --config build/webpack.mp.config.js --progress --hide-modules"
1818
},
1919
"dependencies": {
20-
"kbone-ui": "^0.5.8",
21-
"vue": "^2.5.2",
22-
"vue-router": "^3.0.1",
23-
"vuex": "^3.1.2",
24-
"vuex-router-sync": "^5.0.0"
20+
"kbone-ui": "^1.0.8",
21+
"vue": "^2.6.11",
22+
"vue-router": "^3.3.2",
23+
"vuex": "^3.4.0"
2524
},
2625
"devDependencies": {
2726
"autoprefixer": "^7.1.2",
@@ -57,14 +56,14 @@
5756
"optimize-css-assets-webpack-plugin": "^5.0.3",
5857
"portfinder": "^1.0.25",
5958
"postcss-loader": "^2.0.8",
60-
"reduce-loader": "^0.1.1",
59+
"reduce-loader": "^0.3.1",
6160
"rimraf": "^2.7.1",
6261
"terser-webpack-plugin": "^2.3.0",
6362
"thread-loader": "^2.1.3",
6463
"ts-loader": "^6.2.1",
6564
"typescript": "^3.7.3",
6665
"url-loader": "^0.5.8",
67-
"vue-improve-loader": "^0.1.1",
66+
"vue-improve-loader": "^0.3.5",
6867
"vue-loader": "^15.7.2",
6968
"vue-style-loader": "^4.1.2",
7069
"vue-template-compiler": "^2.6.10",

‎src/App.vue‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,3 @@ export default Vue.extend({
1111
name: 'App',
1212
})
1313
</script>
14-
15-
<style lang="less">
16-
@import "./example.less";
17-
18-
.homeIcon{
19-
position: absolute;
20-
z-index: 2;
21-
}
22-
</style>

‎src/common/Footer.vue‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<div class="footer">
3+
<p>wechat-miniprogram</p>
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: 'Footer',
10+
}
11+
</script>
12+
13+
<style lang="less">
14+
.footer {
15+
margin-top: 10px;
16+
width: 100%;
17+
text-align: center;
18+
}
19+
</style>

‎src/common/Header.vue‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<template>
2+
<div class="header">
3+
<p>{{headerTips}} {{input}}</p>
4+
</div>
5+
</template>
6+
7+
<script>
8+
import { mapState, mapActions } from 'vuex'
9+
10+
export default {
11+
name: 'Header',
12+
computed: {
13+
...mapState(['headerTips', 'input']),
14+
},
15+
mounted() {
16+
this.FAKE_ACTION('june')
17+
},
18+
methods: {
19+
...mapActions(['FAKE_ACTION']),
20+
},
21+
}
22+
</script>
23+
24+
<style lang="less">
25+
.header {
26+
margin-bottom: 10px;
27+
width: 100%;
28+
text-align: center;
29+
}
30+
</style>

‎src/common/KboneUI.vue‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<template>
2+
<div class="ui-cnt">
3+
<div class="item">
4+
<div class="title">wx-button</div>
5+
<div class="comp-cnt">
6+
<wx-button class="wx-button" type="primary">页面主操作 Normal</wx-button>
7+
<wx-button class="wx-button" type="primary" :loading="true">页面主操作 Loading</wx-button>
8+
<wx-button class="wx-button" type="primary" :disabled="true">页面主操作 Disabled</wx-button>
9+
<wx-button class="wx-button" type="default">页面次要操作 Normal</wx-button>
10+
<wx-button class="wx-button" type="default" :disabled="true">页面次要操作 Disabled</wx-button>
11+
<wx-button class="wx-button" type="warn">警告类操作 Normal</wx-button>
12+
<wx-button class="wx-button" type="warn" :disabled="true">警告类操作 Disabled</wx-button>
13+
<wx-button class="wx-button" type="primary" :plain="true">按钮</wx-button>
14+
<wx-button class="wx-button" type="primary" :disabled="true" :plain="true">不可点击的按钮</wx-button>
15+
<wx-button class="wx-button" type="default" :plain="true">按钮</wx-button>
16+
<wx-button class="wx-button" type="default" :disabled="true" :plain="true">按钮</wx-button>
17+
<div>
18+
<wx-button class="wx-button mini-btn" type="primary" size="mini">按钮</wx-button>
19+
<wx-button class="wx-button mini-btn" type="default" size="mini">按钮</wx-button>
20+
<wx-button class="wx-button mini-btn" type="warn" size="mini">按钮</wx-button>
21+
</div>
22+
</div>
23+
</div>
24+
<div class="item">
25+
<div class="title"></div>
26+
<div class="comp-cnt">
27+
<wx-scroll-view
28+
ref="wx-scroll-view"
29+
class="wx-scroll-view"
30+
:scroll-y="true"
31+
:scroll-with-animation="true"
32+
>
33+
<div>
34+
<div id="block1" class="block block1"></div>
35+
<div id="block2" class="block block2"></div>
36+
<div id="block3" class="block block3"></div>
37+
<div id="block4" class="block block4"></div>
38+
<div id="block5" class="block block5"></div>
39+
</div>
40+
</wx-scroll-view>
41+
<div class="opr-cnt opr-cnt-y">
42+
<wx-button class="wx-button opr-button" @click="setAttribute('wx-scroll-view', 'scroll-into-view', 'block3')">滑动到第三个</wx-button>
43+
<wx-button class="wx-button opr-button" @click="setAttribute('wx-scroll-view', 'scroll-top', 120)">滚动到 120px 处</wx-button>
44+
</div>
45+
</div>
46+
</div>
47+
<div class="item">
48+
<div class="title">mp-msg</div>
49+
<div class="comp-cnt">
50+
<mp-msg type="success" title="操作成功">
51+
<div slot="desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现</div>
52+
<div slot="extend">
53+
<div>1. 说明1</div>
54+
<div>2. 说明2</div>
55+
</div>
56+
<div slot="handle" style="margin: 0 20px">
57+
<wx-button class="wx-button" type="primary">主要操作</wx-button>
58+
<wx-button class="wx-button" type="default">辅助操作</wx-button>
59+
</div>
60+
</mp-msg>
61+
</div>
62+
</div>
63+
</div>
64+
</template>
65+
66+
<script>
67+
export default {
68+
name: 'KboneUI',
69+
methods: {
70+
setAttribute(ref, name, value) {
71+
this.$refs[ref].setAttribute(name, value)
72+
},
73+
}
74+
}
75+
</script>
76+
77+
<style lang="less">
78+
.ui-cnt {
79+
margin: 30px;
80+
}
81+
@media (prefers-color-scheme: dark) {
82+
html {
83+
background-color: #222;
84+
color: #fff;
85+
}
86+
.title {
87+
color: #000;
88+
}
89+
}
90+
.title {
91+
height: 40px;
92+
line-height: 40px;
93+
font-size: 16px;
94+
background-color: #b8e8ab;
95+
padding-left: 20px;
96+
}
97+
.comp-cnt {
98+
padding: 10px;
99+
}
100+
.wx-button {
101+
margin-bottom: 10px;
102+
}
103+
.mini-btn {
104+
margin-right: 10px;
105+
}
106+
.wx-scroll-view {
107+
width: 100%;
108+
height: 125px;
109+
}
110+
.block {
111+
width: 100%;
112+
height: 50px;
113+
}
114+
.block1 {
115+
background: #dff0d8;
116+
}
117+
.block2 {
118+
background: #f5f5f5;
119+
}
120+
.block3 {
121+
background: #d9edf7;
122+
}
123+
.block4 {
124+
background: #fcf8e3;
125+
}
126+
.block5 {
127+
background: #f2dede;
128+
}
129+
.opr-cnt {
130+
margin: 10px;
131+
display: flex;
132+
flex-wrap: wrap;
133+
align-items: center;
134+
}
135+
.opr-button {
136+
margin: 0 10px 10px;
137+
}
138+
</style>

‎src/common/Web.vue‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<div class="inner">
3+
<slot/>
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: 'Web',
10+
}
11+
</script>
12+
13+
<style lang="less">
14+
.inner {
15+
margin-bottom: 10px;
16+
width: 100%;
17+
text-align: center;
18+
}
19+
</style>

‎src/detail/Index.vue‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<template>
2+
<div class="cnt">
3+
<Header></Header>
4+
<button @click="onClickBack">回到上一页</button>
5+
<Footer></Footer>
6+
</div>
7+
</template>
8+
9+
<script>
10+
import Vue from 'vue'
11+
import Header from '../common/Header.vue'
12+
import Footer from '../common/Footer.vue'
13+
14+
export default Vue.extend({
15+
name: 'Detail',
16+
components: {
17+
Header,
18+
Footer
19+
},
20+
created() {
21+
window.addEventListener('wxload', query => console.log('page3 wxload', query))
22+
window.addEventListener('wxshow', () => console.log('page3 wxshow'))
23+
window.addEventListener('wxready', () => console.log('page3 wxready'))
24+
window.addEventListener('wxhide', () => console.log('page3 wxhide'))
25+
window.addEventListener('wxunload', () => console.log('page3 wxunload'))
26+
},
27+
methods: {
28+
onClickBack() {
29+
if (process.env.isMiniprogram) {
30+
wx.navigateBack()
31+
}
32+
},
33+
},
34+
})
35+
</script>
36+
37+
<style lang="less">
38+
.cnt {
39+
margin-top: 20px;
40+
}
41+
42+
a, button {
43+
display: block;
44+
width: 100%;
45+
height: 30px;
46+
line-height: 30px;
47+
text-align: center;
48+
font-size: 20px;
49+
border: 1px solid #ddd;
50+
}
51+
</style>

0 commit comments

Comments
 (0)