Vue中继器 (Vue-Repeater)
The VueJS repeater component allows you to create a set of sub components which can be repeated again and again whilst editing content!
VueJS转发器组件允许您创建一组子组件,这些子组件可以在编辑内容时一次又一次地重复!
安装 (Install)
yarn add vue-repeater
or npm install --save vue-repeater
yarn add vue-repeater
或npm install --save vue-repeater
这个怎么运作 (How it works)
开始 (Start)
![Start](https://i-blog.csdnimg.cn/blog_migrate/b93777b028c09edf33cb8332c5017f87.gif)
重新排序 (Reordering)
![Reordering](https://i-blog.csdnimg.cn/blog_migrate/790ad40ca9b80e01bc561fd5f02ca3c0.gif)
加 (Add)
![Add](https://i-blog.csdnimg.cn/blog_migrate/fcb233117cd3924e0a9ebc98f533da1d.gif)
去掉 (Remove)
![Remove](https://i-blog.csdnimg.cn/blog_migrate/0ee3a222122061dd84755e29005a1746.gif)
重复 (Duplicate)
![Duplicate](https://i-blog.csdnimg.cn/blog_migrate/430aed945c89fab20ea4ba686605dc88.gif)
用法 (Usage)
基本例子 (Basic example)
./main.js - entry point
./main.js-入口点
import Vue from 'vue'
import App from './App.vue'
import VueRepeater from 'vue-repeater'
import 'vue-repeater/dist/vue-repeater.css'
import address from './components/address'
Vue.config.productionTip = false
Vue.component('vue-repeater', VueRepeater)
Vue.component('test-address', address)
new Vue({
render: h => h(App)
}).$mount('#app')
./components/address.js - Component inside repeater
./components/address.js-中继器中的组件
<template>
<div class="address">
<div class="row">
<label>Street</label>
<input v-model="localAddress.street">
</div>
<div class="row">
<label>City</label>
<input v-model="localAddress.city">
</div>
<div class="row">
<label>Zip</label>
<input v-model="localAddress.zip">
</div>
</div>
</template>
<script>
export default {
name: 'test-address',
props: {
value: {
type: Object,
required: true
}
},
computed: {
localAddress: {
get () { return this.value },
set (localAddress) { this.$emit('input', localAddress) }
}
}
}
</script>
<style scoped lang="scss">
.address{
display: flex;
flex-direction: column;
}
.row{
display: flex;
flex-direction: column;
margin-bottom: 16px;
}
label{
text-align: left;
margin-bottom: 4px;
}
input{
height: 32px;
border-radius: 4px;
border: 1px solid var(--def-border-base);
}
</style>
./App.vue - application component
./App.vue-应用程序组件
<template>
<div id="app">
{{ fields }}
<vue-repeater v-model="fields"></vue-repeater>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
fields: [
{
name: 'test-address',
value: {}
}
]
}
}
}
</script>
<style lang="scss">
#app {
width: 900px;
margin: 100px auto;
}
</style>