Skip to content

Commit 9ce1d87

Browse files
weijiyangweijiyang
committed
prop验证
1 parent 948a248 commit 9ce1d87

File tree

7 files changed

+99
-27
lines changed

7 files changed

+99
-27
lines changed

‎vue-demo/public/index.html

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,23 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7-
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8-
<title>vue-demo</title>
9-
</head>
10-
<body>
11-
<noscript>
12-
<strong>We're sorry but vue-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13-
</noscript>
14-
<div id="app"></div>
15-
<!-- built files will be auto injected -->
16-
</body>
17-
</html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
8+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
9+
<title>vue-demo</title>
10+
</head>
11+
12+
<body>
13+
<noscript>
14+
<strong>We're sorry but vue-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
15+
</noscript>
16+
<div id="app"></div>
17+
<!-- <div id="app-test">
18+
<blog-post post-title="这条不生效哦"></blog-post>
19+
</div> -->
20+
<!-- built files will be auto injected -->
21+
</body>
22+
23+
</html>

‎vue-demo/src/components/HelloWorld.vue

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,9 +172,20 @@
172172
输入传入组件内容: <input type="text" v-model="notLazyText">
173173
<global-component v-model="notLazyText"></global-component>
174174

175-
175+
<hr>
176+
<h3>全局、局部组件注册&require.context多表单全局注册</h3>
177+
<base-1></base-1>&nbsp;&nbsp;
176178
<base-2></base-2>
177179

180+
<hr>
181+
<h3>prop大小写问题</h3>
182+
<blog-post postTitle="这条不生效哦"></blog-post> “”放到模板index.html文件中不生效“”
183+
<blog-post post-title="hello!"></blog-post>
184+
185+
<hr>
186+
<h3>prop验证</h3>
187+
<!-- <prop-rules :propA="123" propB="this is a string" propC="this is required" propD="this have default string" :propE="{name: '糖少'}" propF="'other' is not in arr, so there is a eroor message here"></prop-rules> -->
188+
<prop-rules :propA="123" propB="this is a string" propC="this is required" propD="this have default string" :propE="{name: '糖少'}" propF="danger"></prop-rules>
178189

179190

180191

‎vue-demo/src/components/PropRules.vue

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<template>
2+
<div>
3+
<h4>单个类型传递: {{propA}}</h4>
4+
<h4>多个类型传递: {{propB}}</h4>
5+
<h4>必填字段: {{propC}}</h4>
6+
<h4>带默认值字段: {{propD}}</h4>
7+
<h4>带默认值的对象和数组（必须从一个工厂函数中获取）: {{JSON.stringify(propE)}}</h4>
8+
<h4>自定义验证函数: {{propF}}</h4>
9+
10+
</div>
11+
</template>
12+
<style>
13+
h4 {
14+
background: skyblue;
15+
}
16+
</style>
17+
18+
<script>
19+
export default {
20+
props: {
21+
propA: Number,
22+
propB: [String, Number],
23+
propC: {
24+
type: String,
25+
required: true
26+
},
27+
propD: {
28+
type: String,
29+
default: 'hello world'
30+
},
31+
propE: {
32+
type: Object,
33+
default: function () {
34+
return {message: "hello , i'm a object "}
35+
}
36+
},
37+
propF: {
38+
validator: function (val) {
39+
return ['success', 'warning', 'danger'].indexOf(val) !== -1
40+
}
41+
}
42+
},
43+
data () {
44+
return {
45+
46+
}
47+
}
48+
}
49+
</script>
50+

‎vue-demo/src/components/tempComponents/_base-1.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,10 @@ export default {
99
}
1010
}
1111
}
12+
13+
// export const render = function(c) {
14+
// return c('el-tag',{
15+
// type:'info'
16+
// },['标签一'])
17+
// }
1218
</script>

‎vue-demo/src/components/tempComponents/_base-3.js

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

‎vue-demo/src/main.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,17 @@ import upperFirst from 'lodash/upperFirst'
66
import camelCase from 'lodash/camelCase'
77
import GlobalComponent from '@/components/GlobalComponent'
88
import TodoItem from '@/components/TodoItem'
9+
import PropRules from '@/components/PropRules'
910
Vue.use(ElementUI)
1011
Vue.config.productionTip = false
1112

1213
Vue.component('GlobalComponent', GlobalComponent)
1314
Vue.component('TodoItem', TodoItem)
14-
15+
Vue.component('blog-post', {
16+
props: ['postTitle'],
17+
template: '<h3>{{ postTitle }}</h3>'
18+
})
19+
Vue.component('prop-rules', PropRules)
1520
const requireComponent = require.context(
1621
'./components/tempComponents',
1722
false,
@@ -31,3 +36,5 @@ requireComponent.keys().forEach(fileName => {
3136
new Vue({
3237
render: h => h(App),
3338
}).$mount('#app')
39+
40+
// new Vue().$mount('#app-test')

‎vue-demo/vue.config.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
module.exports = {
22
devServer: {
33
open: true
4-
}
4+
},
5+
runtimeCompiler: true
56
}

0 commit comments

Comments
 (0)