Skip to content

Commit 429abd5

Browse files
tangjinzhoutangjinzhou
committed
pub 1.0.0
1 parent 11c8ff3 commit 429abd5

File tree

12 files changed

+317
-1
lines changed

12 files changed

+317
-1
lines changed

‎README.md‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,28 @@
11
# vue-ref
2-
You can use the callback to get a reference like react
2+
You can use the callback to get a reference like react.
3+
4+
```bash
5+
$ npm install vue-ref --save
6+
```
7+
8+
```
9+
import ref from 'vue-ref'
10+
Vue.use(ref)
11+
```
12+
13+
```
14+
<!-- vm.dom will be the DOM node -->
15+
<p v-ref="c => this.dom = c">hello</p>
16+
17+
<!-- vm.child will be the child component instance -->
18+
<child-component v-ref="c => this.child = c"></child-component>
19+
20+
<span v-for="n in 10" :key="n" v-ref="(c, key) => {...}">{{ n }} </span>
21+
```
22+
23+
| Property | Description | Type |
24+
| -------- | ----------- | ---- |
25+
| v-ref | a callback function | function(dom \| vnode, key) |
26+
27+
###
28+
In this callback function, you should not change any reactive data. Otherwise the `render` will enter an infinite loop.

‎demo/babel.config.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/app'
4+
],
5+
"plugins": [
6+
"transform-vue-jsx",
7+
"transform-object-assign",
8+
"@babel/plugin-transform-runtime"
9+
]
10+
}

‎demo/package.json‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
{
2+
"name": "vueconf-demo",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint"
9+
},
10+
"dependencies": {
11+
"@babel/plugin-transform-runtime": "^7.1.0",
12+
"ant-design-vue": "^1.1.7",
13+
"babel-helper-vue-jsx-merge-props": "^2.0.3",
14+
"babel-plugin-syntax-jsx": "^6.18.0",
15+
"babel-plugin-transform-object-assign": "^6.22.0",
16+
"babel-plugin-transform-object-rest-spread": "^6.26.0",
17+
"babel-plugin-transform-runtime": "^6.23.0",
18+
"babel-plugin-transform-vue-jsx": "^4.0.1",
19+
"vue": "^2.5.17"
20+
},
21+
"devDependencies": {
22+
"@vue/cli-plugin-babel": "^3.0.5",
23+
"@vue/cli-plugin-eslint": "^3.0.5",
24+
"@vue/cli-service": "^3.0.5",
25+
"vue-template-compiler": "^2.5.17"
26+
},
27+
"eslintConfig": {
28+
"root": true,
29+
"env": {
30+
"node": true
31+
},
32+
"extends": [
33+
"plugin:vue/essential",
34+
"eslint:recommended"
35+
],
36+
"rules": {},
37+
"parserOptions": {
38+
"parser": "babel-eslint"
39+
}
40+
},
41+
"postcss": {
42+
"plugins": {
43+
"autoprefixer": {}
44+
}
45+
},
46+
"browserslist": [
47+
"> 1%",
48+
"last 2 versions",
49+
"not ie <= 8"
50+
]
51+
}

‎demo/public/favicon.ico‎

1.12 KB
Binary file not shown.

‎demo/public/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<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>vueconf-demo</title>
9+
</head>
10+
<body>
11+
<noscript>
12+
<strong>We're sorry but vueconf-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>

‎demo/src/App.vue‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<template>
2+
<div id="app">
3+
<img ref="img" v-ref="img=>this.img=img" alt="Vue logo" src="./assets/logo.png">
4+
<br/>
5+
<a-button @click="updateMsg">update</a-button>
6+
<br/>
7+
<HelloWorld :msg="msg" v-if="show" ref="helloWorld" v-ref="helloWorld=>this.helloWorld=helloWorld"/>
8+
<div>
9+
<a-button ref="button" v-ref="btn=>this.button=btn" @click="show = !show">{{ show ? 'hide' : 'show' }}</a-button>
10+
<transition @enter="onEnter">
11+
<div class="sidebar" v-show="show">
12+
<scrollbar ref="scrollbar" v-ref="(c)=>this.scrollbar=c"></scrollbar>
13+
</div>
14+
</transition>
15+
</div>
16+
<span v-for="n in 5" :key="n" ref="spanList" v-ref="vForRef">{{ n }} </span>
17+
<Functional ref="functional" v-ref="c=>this.functional=c"/>
18+
</div>
19+
</template>
20+
21+
<script>
22+
const Scrollbar = {
23+
methods: {
24+
updateScroll() {
25+
console.log('updateScroll called')
26+
}
27+
},
28+
render(h) {
29+
return h('div', {
30+
class: 'scrollbar'
31+
})
32+
}
33+
}
34+
import HelloWorld from './components/HelloWorld.vue'
35+
import Functional from './components/Functional.vue'
36+
export default {
37+
name: 'app',
38+
components: {
39+
HelloWorld,
40+
Scrollbar,
41+
Functional
42+
},
43+
data() {
44+
return {
45+
show: false,
46+
msg: Date.now()
47+
}
48+
},
49+
mounted() {
50+
console.log(this.$refs.spanList)
51+
console.log(this.img === this.$refs.img)
52+
console.log(this.helloWorld === this.$refs.helloWorld)
53+
console.log(this.button === this.$refs.button)
54+
console.log(this.scrollbar === this.$refs.scrollbar)
55+
console.log(this.functional === this.$refs.functional, this.$refs.functional, this.functional)
56+
},
57+
updated() {
58+
console.log(this.img === this.$refs.img)
59+
console.log(this.helloWorld === this.$refs.helloWorld)
60+
console.log(this.button === this.$refs.button)
61+
console.log(this.scrollbar === this.$refs.scrollbar)
62+
console.log(this.functional === this.$refs.functional)
63+
},
64+
methods: {
65+
onEnter() {
66+
this.scrollbar.updateScroll()
67+
},
68+
vForRef(c, key){
69+
console.log(c, key)
70+
},
71+
updateMsg(){
72+
this.msg = Date.now()
73+
}
74+
}
75+
}
76+
</script>
77+
78+
<style>
79+
#app {
80+
font-family: 'Avenir', Helvetica, Arial, sans-serif;
81+
-webkit-font-smoothing: antialiased;
82+
-moz-osx-font-smoothing: grayscale;
83+
text-align: center;
84+
color: #2c3e50;
85+
margin-top: 60px;
86+
}
87+
.sidebar {
88+
position: fixed;
89+
top: 0; right: 0; bottom: 0;
90+
width: 200px;
91+
background: #000;
92+
}
93+
.sidebar.v-enter-active,
94+
.sidebar.v-leave-active {
95+
transition: transform .2s;
96+
}
97+
98+
.sidebar.v-enter,
99+
.sidebar.v-leave-active {
100+
transform: translate3d(100%, 0, 0);
101+
}
102+
</style>

‎demo/src/assets/logo.png‎

6.69 KB
Loading

‎demo/src/components/Functional.vue‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script>
2+
export default {
3+
functional: true,
4+
render(h){
5+
return <div>Functional Components</div>
6+
}
7+
}
8+
</script>
9+

‎demo/src/components/HelloWorld.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<div class="hello">
3+
<h1>{{ msg }}</h1>
4+
<h2>Hello World</h2>
5+
</div>
6+
</template>
7+
8+
<script>
9+
export default {
10+
name: 'HelloWorld',
11+
props: ['msg'],
12+
}
13+
</script>
14+
15+
<!-- Add "scoped" attribute to limit CSS to this component only -->
16+
<style scoped>
17+
h3 {
18+
margin: 40px 0 0;
19+
}
20+
ul {
21+
list-style-type: none;
22+
padding: 0;
23+
}
24+
li {
25+
display: inline-block;
26+
margin: 0 10px;
27+
}
28+
a {
29+
color: #42b983;
30+
}
31+
</style>

‎demo/src/main.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import Vue from 'vue'
2+
import Antd from 'ant-design-vue'
3+
import App from './App.vue'
4+
import ref from '../../index.js'
5+
import 'ant-design-vue/dist/antd.css'
6+
7+
8+
Vue.config.productionTip = false
9+
10+
Vue.use(Antd)
11+
Vue.use(ref)
12+
new Vue({
13+
render: h => h(App)
14+
}).$mount('#app')

0 commit comments

Comments
 (0)