Vue JS中继器组件

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-repeaternpm install --save vue-repeater

这个怎么运作 (How it works)

开始 (Start)

Start

重新排序 (Reordering)

Reordering

(Add)

Add

去掉 (Remove)

Remove

重复 (Duplicate)

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>

翻译自: https://vuejsexamples.com/vue-js-repeater-component/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值