标签：loading false ElementUI 单选框 Element vue ui 设置 按钮
ElementUI&Vant ui
基于Vue的一套桌面端的组件库，提前封装好的UI模版，方便开发者快速搭建一个网站前端界面。
官网：https://element.eleme.cn/#/zh-CN/component/installation
先创建vue工程，然后再elemntui
安装ElementUI
1.安装vue环境
2.执行vue ui
vue -V
vue ui
1点击小房子
2.创建vue的项目
3.设置项目存放路径
4.点击按钮
5.输入工程名称---git
6.手动配置项目
- Babel
- Router
- Vuex
- history
7.等待项目创建成功
8.给项目安装ElementUI插件
9.搜索elementUI--完成安装
10.启动项目
11.导入到idea里面
npm run serve
ElementUI图标
提供了一套常用的图标集合
<i class="el-icon-edit"></i>
el-icon-iconName 官方定义的图标名称：直接官网查找对应的使用即可
ElementUI按钮
是ElementUI提供的常用组件
<el-button>默认按钮</el-button>
可以使用type、plain、round、circle属性对按钮进行修饰
type设置按钮的样式：
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
plain减弱背景颜色
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
round:按钮设置圆角
<el-button round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
circle将按钮设置成圆形：
<el-button round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
添加icon属性：
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
disabled:设置按钮的使用状态
loading属性设置加载中的效果：
<template>
<div>
<el-button type="danger" icon="el-icon-delete" circle @click="tset":loading="loading"></el-button>
</div>
</template>
<script>
export default {
name: "Test",
methods:{
tset(){
this.loading=true;
setTimeout(()=>{
this.loading=false
},3000)
}
},
data(){
return{
loading:false
}
}
}
</script>
<style scoped>
</style>
size属性设置按钮的大小：
medium small mini
ElementUI超链接
Link：文字超链接
el-link
<el-link href="https://www.baidu.com" target="_blank">Element</el-link>
disable:设置超链接不可用
underline:设置下划线
<el-link href="https://www.baidu.com" target="_blank" :underline="underline">Element</el-link>
<script>
export default {
name: "Test",
methods:{
tset(){
this.loading=true;
setTimeout(()=>{
this.loading=false
},3000)
}
},
data(){
return{
loading:false,
underline:false
}
}
}
</script>
设置图标：
<el-link href="https://www.baidu.com" target="_blank" :underline="underline" icon="el-icon-user-solid">Element</el-link>
ElementUI单选框
使用：
el-radion
使用:数据绑定
v-model:
@change=""绑定切换的事件
<template>
<div>
<el-radio v-model="radio" label="1" @change="change">备选项</el-radio>
<el-radio v-model="radio" label="2" @change="change">备选项</el-radio>
</div>
</template>
<script>
export default {
name: "Test",
methods:{
change(){
console.log("选项的序号是"+this.radio)
}
},
data(){
return{
loading:false,
underline:false,
radio:"2"
}
}
}
</script>
<style scoped>
</style>
标签：loading,false,ElementUI,单选框,Element,vue,ui,设置,按钮 来源： https://www.cnblogs.com/HJZ114152/p/16407121.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。