vue组件转换成dom元素_一个Vue.js 2组件来克隆DOM元素

最新推荐文章于 2025-06-19 18:09:42 发布

cuk5239

最新推荐文章于 2025-06-19 18:09:42 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

文章标签： python vue react html bootstrap ViewUI

原文链接：https://vuejsexamples.com/a-vue-js-2-component-to-clone-dom-elements/

本文介绍了vue-cloneya，一个Vue.js 2组件，用于克隆DOM元素。内容包括安装、导入、使用示例、组件API，如最小和最大克隆数的属性设置，以及相关的Vue指令。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue组件转换成dom元素

维克隆尼 (vue-cloneya)

A vue component to clone DOM elements.

Vue组件，用于克隆DOM元素。

View demo 查看演示 Download Source 下载源

安装 (Install)

yarn add vue-cloneya
# or
npm i vue-cloneya

进口 (Import)

import Vue      from 'vue'
import VueCloneya from 'vue-cloneya'

Vue.use(VueCloneya)

例 (Example)

<vue-cloneya :maximum="5" :value="exampleData">
  <div class="input-group">
      <!-- Add the "v-cloneya-input" directive to elements you wish to set v-bind:value -->
      <!-- Only input, select, radio, checkbox etc. -->
      <input type="text" name="example[]" class="form-control" placeholder="Example" v-cloneya-input>
      <span class="input-group-btn">
        <!-- Add the "v-cloneya-add" directive to elements you wish to add the click listener
        that will clone the root element -->
        <button type="button" class="btn btn-success" tabindex="-1" v-cloneya-add>
            <i class="fa fa-plus"></i>
        </button>
        <!-- Add the "v-cloneya-remove" directive to elements you wish to add the click listener
        that will remove the element -->
        <button type="button" class="btn btn-danger" tabindex="-1"  v-cloneya-remove>
          <i class="fa fa-minus"></i>
        </button>
      </span>
  </div>
</vue-cloneya>

API (API)

道具 (Props)

最低 (minimum)

Type: number
类型： number
Default: 1
默认值 ： 1

The minimum number of clones allowed.

允许的最小克隆数。

最大值 (maximum)

Type: number
类型： number
Default: 1
默认值 ： 1

The maximum number of clones allowed.

允许的最大克隆数。

值 (value)

Type: array
类型： array
Default: null
默认值 ： null

The values for the v-cloneya-input.

v-cloneya-input的值。

大事记 (Events)

When minimum limit is reached:

达到最小限制时：

minimum:cloneya
minimum:cloneya

When maximum limit is reached:

达到最大限制时：

maximum:cloneya
maximum:cloneya

指令 (Directives)

cloneyaInput (cloneyaInput)

v-cloneya-input

v克隆人输入

cloneya添加 (cloneyaAdd)

v-cloneya-add

cloneya删除 (cloneyaRemove)

v-cloneya-remove

v-克隆人删除

发展历程 (Development)

# for dev
yarn dev
#or 
npm run dev

# build with parcel-bundler
yarn build
#or
npm run build

翻译自: https://vuejsexamples.com/a-vue-js-2-component-to-clone-dom-elements/

vue组件转换成dom元素