Vue JS中继器组件

最新推荐文章于 2024-04-21 06:12:51 发布

cuk5239

最新推荐文章于 2024-04-21 06:12:51 发布

阅读量359

点赞数

文章标签： vue website python flex migration ViewUI

原文链接：https://vuejsexamples.com/vue-js-repeater-component/

版权

Vue-Repeater 是一个 VueJS 组件，用于创建可重复的子组件，便于内容编辑。本文介绍其安装、工作原理及基本用法，包括开始、重新排序、添加、移除和复制等功能。

摘要由CSDN通过智能技术生成

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)

重新排序 (Reordering)

加 (Add)

去掉 (Remove)

重复 (Duplicate)

用法 (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>