Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit d028f1f

Browse files
DakerHubDakerHub
committed
增加金额过滤器,增加node-waves效果
1 parent 6d4a5c8 commit d028f1f

File tree

11 files changed

+150
-3
lines changed

11 files changed

+150
-3
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"dependencies": {
1212
"core-js": "^2.6.5",
1313
"dayjs": "^1.8.14",
14+
"node-waves": "^0.7.6",
1415
"normalize.css": "^8.0.1",
1516
"vue": "^2.6.10",
1617
"vue-i18n": "^8.0.0",

‎src/components/base-card/base-card-item.vue‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<template>
2+
<div class="base-card-item">
3+
<span class="base-card-item__label" :style="labelStyle">{{ label }}</span>
4+
<span class="base-card-item__content">
5+
<slot></slot>
6+
</span>
7+
</div>
8+
</template>
9+
10+
<script>
11+
export default {
12+
name: 'BaseCardItem',
13+
props: {
14+
label: {
15+
type: String,
16+
default: ''
17+
}
18+
},
19+
computed: {
20+
baseCard() {
21+
let parent = this.$parent
22+
let parentName = parent.$options.componentName
23+
while (parentName !== 'BaseCard') {
24+
if (!parent.$parent) break
25+
parent = parent.$parent
26+
parentName = parent.$options.componentName
27+
console.log(parentName)
28+
}
29+
return parent
30+
},
31+
labelStyle() {
32+
if (!this.baseCard) {
33+
return {}
34+
}
35+
const labelWidth = this.baseCard.labelWidth
36+
return labelWidth ? { width: labelWidth } : {}
37+
}
38+
}
39+
}
40+
</script>
41+
42+
<style lang="scss" scoped>
43+
.base-card-item {
44+
font-size: 14px;
45+
&:not(:last-of-type) {
46+
margin-bottom: 10px;
47+
}
48+
}
49+
.base-card-item__label {
50+
font-weight: bold;
51+
display: inline-block;
52+
color: #333;
53+
}
54+
</style>

‎src/components/base-card/index.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,15 @@
88
<script>
99
export default {
1010
name: 'BaseCard',
11+
componentName: 'BaseCard',
1112
props: {
1213
title: {
1314
type: String,
1415
default: ''
16+
},
17+
labelWidth: {
18+
type: String,
19+
default: '60px'
1520
}
1621
}
1722
}
@@ -28,7 +33,7 @@ export default {
2833
margin-bottom: 15px;
2934
}
3035
h1 {
31-
font-size: 18px;
36+
font-size: 20px;
3237
color: #2196f3;
3338
background-color: rgba(33, 150, 243, 0.18);
3439
padding: 5px;

‎src/directives/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import Vue from 'vue'
2+
import waves from './waves'
3+
4+
Vue.directive('waves', waves)

‎src/directives/waves.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// http://fian.my.id/Waves/#api
2+
import Waves from 'node-waves'
3+
import 'node-waves/dist/waves.css'
4+
5+
export default {
6+
inserted: function (el, arg) {
7+
console.log(arg)
8+
const config = {
9+
duration: 500,
10+
delay: 0
11+
}
12+
Waves.attach(el, arg.value)
13+
Waves.init(config)
14+
}
15+
}

‎src/filters/currency.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export default function toThousandFilter(num, prefix = '¥') {
2+
let numFormatted = ''
3+
4+
const cent = num % 100
5+
const integer = Number.parseInt(num / 100)
6+
7+
const integerSplitted = (+integer || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
8+
9+
numFormatted = `${prefix}${integerSplitted}.${cent.toString().padEnd(2, '0')}`
10+
11+
return numFormatted
12+
}

‎src/filters/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import Vue from 'vue'
22
import date from './date'
3+
import currency from './currency'
34

45
Vue.filter('date', date)
6+
Vue.filter('currency', currency)

‎src/main.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import router from './router'
44
import store from './store'
55
import i18n from './i18n'
66
import './filters'
7+
import './directives'
8+
import './utils/ios.hack'
79
import 'normalize.css'
810

911
Vue.config.productionTip = false

‎src/utils/ios.hack.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// 微信ios系统上键盘收起后布局不重置的bug
2+
3+
window.addEventListener('focusout', function () {
4+
setTimeout(() => {
5+
window.scrollTo(0, document.documentElement.scrollTop || document.body.scrollTop)
6+
})
7+
})

‎src/views/Features.vue‎

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,42 @@
88
<p>{{ $t('hello') }}</p>
99
</BaseCard>
1010

11-
<BaseCard title="内置过滤器"></BaseCard>
11+
<BaseCard title="内置过滤器">
12+
<h3>日期过滤器 - date</h3>
13+
<BaseCardItem label="原值">2018-12-1</BaseCardItem>
14+
<BaseCardItem label="过滤值">{{'2018-12-1'|date('YYYY年MM月DD日')}}</BaseCardItem>
15+
<h3>金额过滤器 - currency</h3>
16+
<BaseCardItem label="原值">430000（分）</BaseCardItem>
17+
<BaseCardItem label="过滤值">{{'430000'|currency}}</BaseCardItem>
18+
</BaseCard>
19+
20+
<BaseCard title="用户反馈">
21+
<h3>波纹效果</h3>
22+
<div>
23+
<div v-waves="['rounded-btn', 'waves-circle']">←</div>
24+
<div v-waves="['dark-btn', 'waves-light']">●</div>
25+
</div>
26+
<h3>状态改变(TODO)</h3>
27+
<div>成功失败图标</div>
28+
</BaseCard>
29+
30+
<BaseCard title="用户体验">
31+
<h3>骨架屏(TODO)</h3>
32+
</BaseCard>
33+
<BaseCard title="权限校验体系（TODO）">带用户系统的页面权限校验存储</BaseCard>
34+
<BaseCard title="Axios封装以及接口Mock(TODO)"></BaseCard>
1235
</div>
1336
</template>
1437

1538
<script>
1639
import BaseCard from './../components/base-card'
40+
import BaseCardItem from './../components/base-card/base-card-item'
1741
1842
export default {
1943
name: 'Features',
2044
components: {
21-
BaseCard
45+
BaseCard,
46+
BaseCardItem
2247
},
2348
data() {
2449
return {
@@ -38,6 +63,21 @@ export default {
3863
box-shadow: 3px 4px 12px 1px rgba(56, 132, 192, 0.53);
3964
}
4065
}
66+
67+
.rounded-btn {
68+
background-color: blanchedalmond;
69+
color: #666;
70+
font-size: 12px;
71+
padding: 4px;
72+
}
73+
.dark-btn {
74+
padding: 10px;
75+
background-color: #334a55;
76+
color: #fff;
77+
border-radius: 4px;
78+
margin-left: 10px;
79+
vertical-align: top;
80+
}
4181
</style>
4282

4383
<i18n>

0 commit comments

Comments
 (0)