Label 标签

示例

激活输入组件

可以使用 for 属性指定被激活组件的 ref。点击标签区域可以触发

Inline with Select

for + ref with Input

在 GitHub 上编辑此页编辑
<template>
<article>
  <section>
    <h4>Inline with Select</h4>
    <veui-label>
      Click me:
      <veui-select
        :options="protocols"
        style="width: 100px"
      />
    </veui-label>
  </section>
  <section>
    <h4><code>for</code> + <code>ref</code> with Input</h4>
    <veui-label for="origin">
      Click me:
    </veui-label>
    <veui-input
      ref="origin"
      style="width: 200px"
    />
  </section>
</article>
</template>

<script>
import { Label, Select, Input } from 'veui'

export default {
  name: 'text-input',
  components: {
    'veui-label': Label,
    'veui-select': Select,
    'veui-input': Input
  },
  data () {
    return {
      protocols: [
        { label: 'https://', value: 'https' },
        { label: 'http://', value: 'http' }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

API

属性

名称类型默认值描述
forstring=-

允许通过 ref、Vue 组件实例、HTMLElement 的方式指定目标组件或元素。如果指定的是组件，点击标签后会调用对应组件的 activate 方法（如果存在）；如果指定的是元素，点击标签后会调用对应元素的 click 方法。

类型描述
string在当前浮层组件所在上下文中，通过匹配 $refs 中的键名查找 HTML 元素或对应组件实例的根元素。
Vue如果传入的是组件实例，就直接返回该组件的根元素。
HTMLElement如果已经是一个 HTML 元素了，就直接使用该元素。

插槽

名称描述
default默认插槽。无默认内容。用于填充行内内容，不允许放入块级内容。
在 GitHub 上编辑此页编辑