ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

elementui,及相关知识点

2022-08-01 08:32:09  阅读:272  来源: 互联网

标签:选项 知识点 elementui value label item el 相关 model


安装

1.确保电脑上面安装有vue环境

npm i element-ui -S 

 

组件

图标

<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>

换图标,换class里面的即可

 

按钮

 <el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button round>圆角按钮</el-button>
<el-button icon="el-icon-search" circle></el-button>

第一个,是最普通的按钮

第二个,type类型,是指颜色

第三个,plain,是减轻颜色

第四个,round,方变圆

第五个,circle,是圆形,icon,是可以在里面加图标样式

size属性,可以设置大小

 

超链接

 

Radio单选框

使用el-radio标签即可,通过v-model进行对象数据的绑定,label表示该单选框的值,文本直接写入到标签内部即可。

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

单击选项,其实就是给label赋值

<el-radio-button label="上海"></el-radio-button>

将单选圆圈变成框

 

Input输入框

<el-input v-model="input" placeholder="请输入内容" show-password></el-input>

<script>
export default {
 data() {
   return {
     input: ''
  }
}
}
</script>

show-password 加上就是黑点,提高安全性。

 

select选择器(下拉框)

el-select/el-option标签进行操作,v-model进行数据的绑定

<template>
 <el-select v-model="value" placeholder="请选择">
   <el-option
     v-for="item in options"
     :key="item.value"
     :label="item.label"
     :value="item.value">
   </el-option>
 </el-select>
</template>

<script>
 export default {
   data() {
     return {
       options: [{
         value: '选项1',
         label: '黄金糕'
      }, {
         value: '选项2',
         label: '双皮奶'
      }, {
         value: '选项3',
         label: '蚵仔煎'
      }, {
         value: '选项4',
         label: '龙须面'
      }, {
         value: '选项5',
         label: '北京烤鸭'
      }],
       value: ''
    }
  }
}
</script>

 

switch开关

switch组件表示两种相互对立状态之间的切换,开关,el-switch标签完成,v-model进行数据的绑定,boolean,表示开/关的状态,active-color属性与inactive-color属性来设置开关的背景色。

<el-switch
 v-model="value"
 active-color="#13ce66"
 inactive-color="#ff4949">
</el-switch>

<script>
 export default {
   data() {
     return {
       value: true   //开,只认true
    }
  }
};
</script>

 

upload上传文件

使用el-upload组件完成,action属性为后端请求的接口。

<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-change="handleChange"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>

 

form表单

form组件,每一个表单域由一个form-item组件构成的,表单域中可以放置各种类型的表单控件,input、select、CheckBox、radio,Switch,表单域的值直接跟vue对象进行绑定。

 

 

<div style ="margin: 15px 0"></div>

margin:一般在几个输入框换行,上下间隔15像素,左右0像素

size属性这里可以修改输入框的尺寸,large/medium/small/mini

只有这几个大小可选,在其他里面也如此。这里不可以修改长度,只可以修改宽度。

修改宽度,可以在外层嵌套一个div,通过修改div的宽度来实现输入框宽度的修改,如

<div style="width:300px">
  .......
</div>

style="padding:30px" //间距,内边距

 

v-model和:model的区别?

:是v-bind的缩写

 

前后端数据交互:安装axios插件

 

vscode 运行 在终端写:npm run dev

或者 npm run serve

看你的运行在哪里,package.json 里面

 

并排布局

在外层加一个div,flex布局

<div style="display: flex">
  ...
  ...
</div>
 

标签:选项,知识点,elementui,value,label,item,el,相关,model
来源: https://www.cnblogs.com/shiyi1/p/16538888.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有