文章目录
- 前言
- 一、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作为一个流行的Vue.js组件库，提供了丰富多样的组件，其中包括Link文字链接和Radio单选框。Link文字链接可以帮助我们实现文字的跳转和引导，而Radio单选框则是让用户在多个选项中做出选择的重要工具。本文将深入介绍这两个组件的用法和特性，帮助你更好地理解并运用它们，提升前端界面的设计和交互性。
一、Link 文字链接
文字超链接
1.1 基础用法
基础的文字链接用法。
咱们和使用我们的html里面的a标签是一样的，如下：
<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 禁用状态
文字链接不可用状态。
<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时有下划线
<el-link :underline="false">无下划线</el-link>
<el-link>有下划线</el-link>
1.4 图标
带图标的文字链接可增强辨识度。
<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。
<el-radio v-model="radio" label="1">备选项</el-radio>
<el-radio v-model="radio" label="2">备选项</el-radio>
他们是互斥的。
2.2 禁用状态
单选框不可用的状态。
<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。
<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属性。
<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属性可以渲染为带有边框的单选框。
<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 值
<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单选框有所帮助。
