【Element-ui】Link 文字链接与 Radio 单选框

文章目录

前言
[一、Link 文字链接](#一、Link 文字链接)
- [1.1 基础用法](#1.1 基础用法)
- [1.2 禁用状态](#1.2 禁用状态)
- [1.3 下划线](#1.3 下划线)
- [1.4 图标](#1.4 图标)
[二、Radio 单选框](#二、Radio 单选框)
- [2.1 基础用法](#2.1 基础用法)
- [2.2 禁用状态](#2.2 禁用状态)
- [2.3 单选框组](#2.3 单选框组)
- [2.4 按钮样式](#2.4 按钮样式)
- [2.5 带有边框](#2.5 带有边框)
- [2.6 Radio Events](#2.6 Radio Events)
- - input事件
- [2.7 Radio-group Attributes](#2.7 Radio-group Attributes)
总结

前言

在前端开发中，用户界面的元素设计和交互方式对于用户体验至关重要。Element-ui作为一个流行的Vue.js组件库，提供了丰富多样的组件，其中包括Link文字链接和Radio单选框。Link文字链接可以帮助我们实现文字的跳转和引导，而Radio单选框则是让用户在多个选项中做出选择的重要工具。本文将深入介绍这两个组件的用法和特性，帮助你更好地理解并运用它们，提升前端界面的设计和交互性。

一、Link 文字链接

文字超链接

1.1 基础用法

基础的文字链接用法。

咱们和使用我们的html里面的a标签是一样的，如下：

html 复制代码

<el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
<el-link type="primary">主要链接</el-link>
<el-link type="success">成功链接</el-link>
<el-link type="warning">警告链接</el-link>
<el-link type="danger">危险链接</el-link>
<el-link type="info">信息链接</el-link>

1.2 禁用状态

文字链接不可用状态。

html 复制代码

<el-link disabled>默认链接</el-link>
<el-link type="primary" disabled>主要链接</el-link>
<el-link type="success" disabled>成功链接</el-link>
<el-link type="warning" disabled>警告链接</el-link>
<el-link type="danger" disabled>危险链接</el-link>
<el-link type="info" disabled>信息链接</el-link>

1.3 下划线

文字链接下划线。

underline属性为true时有下划线

html 复制代码

<el-link :underline="false">无下划线</el-link>
<el-link>有下划线</el-link>

1.4 图标

带图标的文字链接可增强辨识度。

html 复制代码

<el-link icon="el-icon-edit">编辑</el-link>
<el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link>

二、Radio 单选框

在一组备选项中进行单选

2.1 基础用法

由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。

要使用 Radio 组件，只需要设置v-model绑定变量，选中意味着变量的值为相应 Radio label属性的值，label可以是String、Number或Boolean。

html 复制代码

<el-radio v-model="radio" label="1">备选项</el-radio>
<el-radio v-model="radio" label="2">备选项</el-radio>

他们是互斥的。

2.2 禁用状态

单选框不可用的状态。

html 复制代码

<el-radio disabled v-model="radio" label="禁用">备选项</el-radio>
<el-radio disabled v-model="radio" label="选中且禁用">备选项</el-radio>

label属性的含义为他的值，就像1、2、3、true、false、"a"这样，他可以为boolean、number、string类型.

用来标识哪个选中

2.3 单选框组

适用于在多个互斥的选项中选择的场景

结合el-radio-group元素和子元素el-radio可以实现单选组，在el-radio-group中绑定v-model，在el-radio中设置好label即可，无需再给每一个el-radio绑定变量，另外，还提供了change事件来响应变化，它会传入一个参数value。

html 复制代码

<el-radio-group v-model="radio">
  <el-radio :label="3">备选项</el-radio>
  <el-radio :label="6">备选项</el-radio>
  <el-radio :label="9">备选项</el-radio>
</el-radio-group>

2.4 按钮样式

按钮样式的单选组合。

只需要把el-radio元素换成el-radio-button元素即可，此外，Element 还提供了size属性。

html 复制代码

<div>
  <el-radio-group v-model="radio1">
    <el-radio-button label="上海"></el-radio-button>
    <el-radio-button label="北京"></el-radio-button>
    <el-radio-button label="广州"></el-radio-button>
    <el-radio-button label="深圳"></el-radio-button>
  </el-radio-group>
</div>
<div style="margin-top: 20px">
  <el-radio-group v-model="radio2" size="medium">
    <el-radio-button label="上海" ></el-radio-button>
    <el-radio-button label="北京"></el-radio-button>
    <el-radio-button label="广州"></el-radio-button>
    <el-radio-button label="深圳"></el-radio-button>
  </el-radio-group>
</div>
<div style="margin-top: 20px">
  <el-radio-group v-model="radio3" size="small">
    <el-radio-button label="上海"></el-radio-button>
    <el-radio-button label="北京" disabled ></el-radio-button>
    <el-radio-button label="广州"></el-radio-button>
    <el-radio-button label="深圳"></el-radio-button>
  </el-radio-group>
</div>
<div style="margin-top: 20px">
  <el-radio-group v-model="radio4" disabled size="mini">
    <el-radio-button label="上海"></el-radio-button>
    <el-radio-button label="北京"></el-radio-button>
    <el-radio-button label="广州"></el-radio-button>
    <el-radio-button label="深圳"></el-radio-button>
  </el-radio-group>
</div>

2.5 带有边框

设置border属性可以渲染为带有边框的单选框。

html 复制代码

<div>
  <el-radio v-model="radio1" label="1" border>备选项1</el-radio>
  <el-radio v-model="radio1" label="2" border>备选项2</el-radio>
</div>
<div style="margin-top: 20px">
  <el-radio v-model="radio2" label="1" border size="medium">备选项1</el-radio>
  <el-radio v-model="radio2" label="2" border size="medium">备选项2</el-radio>
</div>
<div style="margin-top: 20px">
  <el-radio-group v-model="radio3" size="small">
    <el-radio label="1" border>备选项1</el-radio>
    <el-radio label="2" border disabled>备选项2</el-radio>
  </el-radio-group>
</div>
<div style="margin-top: 20px">
  <el-radio-group v-model="radio4" size="mini" disabled>
    <el-radio label="1" border>备选项1</el-radio>
    <el-radio label="2" border>备选项2</el-radio>
  </el-radio-group>
</div>

他是单独设置的，如果是按钮组也需要单独设置

2.6 Radio Events

input事件

input 绑定值变化时触发的事件选中的 Radio label 值

html 复制代码

<template>
  <div>
    <div>
    <el-radio v-model="radio1" label="1" border @input="handleSizeChange">备选项1</el-radio>
    <el-radio v-model="radio1" label="2" border>备选项2</el-radio>
  </div>
  <div style="margin-top: 20px">
    <el-radio v-model="radio2" label="1" border size="medium">备选项1</el-radio>
    <el-radio v-model="radio2" label="2" border size="medium">备选项2</el-radio>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio3" size="small">
      <el-radio label="1" border @input="handleSizeChange">备选项1</el-radio>
      <el-radio label="2" border disabled>备选项2</el-radio>
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio4" size="mini" disabled>
      <el-radio label="1" border>备选项1</el-radio>
      <el-radio label="2" border>备选项2</el-radio>
    </el-radio-group>
  </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleSizeChange(val) {
      console.log(val);
      // 在需要的情况下，通过触发事件通知父组件更新数据
      // this.$emit('update:radio', val);
    },
  },
  data() {
    return {
      radio1: '1',
        radio2: '1',
        radio3: '1',
        radio4: '1'
    };
  },
};
</script>


<style>
  .App{
    width: 600px;
    height: 700px;
    background-color: #87ceeb;
    margin: 50 auto;
    padding: 100px;
  }
</style>

2.7 Radio-group Attributes

参数说明类型可选值默认值

text-color 按钮形式的 Radio 激活时的文本颜色 string --- #ffffff

fill 按钮形式的 Radio 激活时的填充色和边框色 string --- #409EFF

总结

本文详细介绍了Element-ui中的Link文字链接和Radio单选框的用法和特性。Link文字链接不仅可以帮助我们实现文字的链接跳转，还能美化页面并提供更好的导航功能，增强用户体验；而Radio单选框作为让用户在多个选项中选择的工具，具有清晰的界面展示和良好的交互性。熟练掌握这两个组件的用法，将有助于提升界面的可用性和用户体验，为用户提供更加友好和便捷的界面操作。希望本文对于你理解和运用Element-ui中的Link文字链接和Radio单选框有所帮助。

【Element-ui】Link 文字链接 与 Radio 单选框

文章目录

前言

一、Link 文字链接

1.1 基础用法

1.2 禁用状态

1.3 下划线

1.4 图标

二、Radio 单选框

2.1 基础用法

2.2 禁用状态

2.3 单选框组

2.4 按钮样式

2.5 带有边框

2.6 Radio Events

input事件

2.7 Radio-group Attributes

总结

【Element-ui】Link 文字链接与 Radio 单选框