elementui 能用ui库水印吗 element ui有什么用

转载

编程梦想家 2024-04-22 21:13:51

文章标签 elementui 能用ui库水印吗栅格 ico 可选值 文章分类 机器学习人工智能

ElementUi实战

引言

网站快速成型工具 桌面端组件库 一切皆组件

定义

element ui就是基于vue的一个ui框架,该框架基于vue开发了很多相关的组件,方便我们快速开发.

由来

饿了么的前端团队基于vue进行开发的并且进行了开源 element中提供全部都是封装好的组件.

安装Element ui

# 1 创建vue cli项目
	vue-cli init webpack element

在vue项目中安装element ui

# 1 下载elementui的依赖
	npm i element-ui -S
	
# 2 指定当前项目中使用element ui
	在main.js中引入
	import ElementUI from 'element-ui';
	import 'element-ui/lib/theme-chalk/index.css';
	并且
	//在vue脚手架中使用element ui
	Vue.use(ElementUI);

按钮组件

默认样式按钮

# 1 默认按钮样式
<!--  使用默认按钮组件-->
  <el-row>
    <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>
  </el-row>
# 2 简洁按钮 鼠标移上去才会显示背景颜色
<!--  使用朴素按钮-->
  <el-row>
    <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>
  </el-row>
# 圆角按钮
<!--使用圆角按钮-->
  <el-row>
    <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>
  </el-row>
# 图标按钮
<!--  图标按钮-->
  <el-row>
    <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>
  </el-row>

效果如图:

elementui 能用ui库水印吗 element ui有什么用_栅格

详细使用

📑总结

日后使用element ui的相关组件时需要注意的是所有的组件都是ul-组件名称开头.

创建按钮

<el-button >默认按钮</el-button>

按钮属性使用

<el-button type="primary" 属性名=属性值>默认按钮</el-button>

<el-button type="warning" plain round circle  size="mini">主要按钮</el-button>

📑总结

在element中所有组件的属性全部写在组件标签上

Attributes

参数	说明	类型	可选值	默认值
size	尺寸	string	medium / small / mini	—
type	类型	string	primary / success / warning / danger / info / text	—
plain	是否朴素按钮	boolean	—	false
round	是否圆角按钮	boolean	—	false
circle	是否圆形按钮	boolean	—	false
loading	是否加载中状态	boolean	—	false
disabled	是否禁用状态	boolean	—	false
icon	图标类名	string	—	—
autofocus	是否默认聚焦	boolean	—	false
native-type	原生 type 属性	string	button / submit / reset	button

注意❗

在element ui中所有组件哦都是el-组件名称方式进行命名
在element ui中组建的属性使用都是直接将属性名=属性值的方式写在标签上

Link 文字链接组件

<el-link href="#">文字链接</el-link>

连接属性使用

Attributes

参数	说明	类型	可选值	默认值
type	类型	string	primary / success / warning / danger / info	default
underline	是否下划线	boolean	—	true
disabled	是否禁用状态	boolean	—	false
href	原生 href 属性	string	—	-
icon	图标类名	string	—	-

注意❕

对于属性值需要Boolean类型的属性需要进行绑定,如下 :underline

<el-link href="#" type="warning" :underline="false">文字链接</el-link>

Layout(栅格)布局组件的使用

通过基础的 24 分栏，迅速简便地创建布局。

在element ui中布局组件将页面划分为多个行 row,每行最多分为24栏(列)

使用Layout组件

<el-row>
	<el-col :span="8">占用8份</el-col>
    <el-col :span="8">占用8份</el-col>
    <el-col :span="8">占用8份</el-col>
</el-row>

为什么element ui或者bootstrap要分成12份或24份呢?

:因为12 24是2 3 4 6的公倍数,布局的时候可以有更多选择,更好的去布局.

⚠️注意

在一个布局组件中,是由row和col组合而成
在使用时要区分row属性和clo属性

Row Attributes

参数	说明	类型	可选值	默认值
gutter	栅格间隔	number	—	0
type	布局模式，可选 flex，现代浏览器下有效	string	—	—
justify	flex 布局下的水平排列方式	string	start/end/center/space-around/space-between	start
align	flex 布局下的垂直排列方式	string	top/middle/bottom	top
tag	自定义元素标签	string	*	div

⚠️注意

通过tag属性可以把el-row的标签属性换成别的,例如:🔽

<el-row tag="span"></el-row>

Col Attributes

参数	说明	类型	可选值	默认值
span	栅格占据的列数	number	—	24
offset	栅格左侧的间隔格数	number	—	0
push	栅格向右移动格数	number	—	0
pull	栅格向左移动格数	number	—	0
xs	`<768px` 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—
sm	`≥768px` 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—
md	`≥992px` 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—
lg	`≥1200px` 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—
xl	`≥1920px` 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—
tag	自定义元素标签	string	*	div

⚠️注意

push和offset的不同

push类似于向右浮动,他会跟右边的元素重叠(如果有的话)
offset类似于margin,他会把右边的元素挤到下一行(如果有的话)

Container 布局容器使用

创建布局容器

<el-container>

</el-container>

容器中包含的子元素

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

容器的嵌套使用

<el-container>
      <!--    header-->
      <el-header><div><h1>我是标题</h1></div></el-header>
      <el-container>
        <!-- asider-->
        <el-aside><div><h1>我是菜单</h1></div></el-aside>
        <!--main-->
        <el-main><div><h1>main</h1></div></el-main>
      </el-container>
      <el-footer><div><h1>footer</h1></div></el-footer>
    </el-container>

效果如下🔽

elementui 能用ui库水印吗 element ui有什么用_ico_02

Container Attributes

参数	说明	类型	可选值	默认值
direction	子元素的排列方向	string	horizontal / vertical	子元素中有 `el-header` 或 `el-footer` 时为 vertical，否则为 horizontal

Header Attributes

参数	说明	类型	可选值	默认值
height	顶栏高度	string	—	60px

Aside Attributes

参数	说明	类型	可选值	默认值
width	侧边栏宽度	string	—	300px

Footer Attributes

参数	说明	类型	可选值	默认值
height	底栏高度	string	—	60px

Form相关组件

Radio单选框

单选框的创建

<el-radio v-model="label" label="male"></el-radio>
  <el-radio v-model="label" label="female"></el-radio>

<script>
export default {
  name: "Radio",
  data(){
    return{
      label: ""
    }
  }
}
</script>

⚠️注意

在使用radio单选按钮时至少加入v-model和label属性.

Radio Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	string / number / boolean	—	—
label	Radio 的 value	string / number / boolean	—	—
disabled	是否禁用	boolean	—	false
border	是否显示边框	boolean	—	false
size	Radio 的尺寸，仅在 border 为真时有效	string	medium / small / mini	—
name	原生 name 属性	string	—	—

📑总结

属性使用直接写在对应组件标签上 属性名=属性值

Radio事件的使用

<el-radio @change="f" border v-model="label" label="male"></el-radio>
  <el-radio @change="f" size="small" border v-model="label" label="female"></el-radio>

<script>
export default {
  name: "Radio",
  data(){
    return{
      label: ""
    }
  },
  methods: {
    f() {   //定义的事件处理函数
      alert("change")
      console.log(this.label);
    }
  }
}
</script>

📑总结

事件的使用也是和属性使用是一致的都是直接写在组件的标签
事件在使用时必须使用vue中绑定事件的方式进行使用如@事件名=事件处理函数(绑定在vue方法中)

Radio按钮组

<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>

<script>
  export default {
    data () {
      return {
        radio: 3
      };
    }
  }
</script>

Radio-group Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	string / number / boolean	—	—
size	单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效	string	medium / small / mini	—
disabled	是否禁用	boolean	—	false
text-color	按钮形式的 Radio 激活时的文本颜色	string	—	#ffffff
fill	按钮形式的 Radio 激活时的填充色和边框色	string	—	#409EFF

Checkbox多选框的使用

多选框创建

<el-checkbox v-model="city">北京</el-checkbox>
  <el-checkbox>天津</el-checkbox>
  <el-checkbox>乌鲁木齐</el-checkbox>

<script>
export default {
name: "Checkbox",
  data(){
    return{
      city: true
    }
  }
}
</script>

Checkbox Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	string / number / boolean	—	—
label	选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）	string / number / boolean	—	—
true-label	选中时的值	string / number	—	—
false-label	没有选中时的值	string / number	—	—
disabled	是否禁用	boolean	—	false
border	是否显示边框	boolean	—	false
size	Checkbox 的尺寸，仅在 border 为真时有效	string	medium / small / mini	—
name	原生 name 属性	string	—	—
checked	当前是否勾选	boolean	—	false
indeterminate	设置 indeterminate 状态，只负责样式控制	boolean	—	false

多选框组与事件

<el-checkbox-group @change="f2" v-model="checkList">
    <el-checkbox label="复选框 A"></el-checkbox>
    <el-checkbox label="复选框 B"></el-checkbox>
    <el-checkbox label="复选框 C"></el-checkbox>
    <el-checkbox label="禁用" disabled></el-checkbox>
    <el-checkbox label="选中且禁用" disabled></el-checkbox>
</el-checkbox-group>


<script>
export default {
name: "Checkbox",
  data(){
    return{
      checkList: []
    }
  },
  methods: {
    f2(){
      alert(this.checkList)
    }
  }
}
</script>

Input输入框

<el-input v-model="Name"></el-input>

Input Attributes

参数	说明	类型	可选值	默认值
type	类型	string	text，textarea 和其他原生 input 的 type 值	text
value / v-model	绑定值	string / number	—	—
maxlength	原生属性，最大输入长度	number	—	—
minlength	原生属性，最小输入长度	number	—	—
show-word-limit	是否显示输入字数统计，只在 `type = "text"` 或 `type = "textarea"` 时有效	boolean	—	false
placeholder	输入框占位文本	string	—	—
clearable	是否可清空	boolean	—	false
show-password	是否显示切换密码图标	boolean	—	false
disabled	禁用	boolean	—	false
size	输入框尺寸，只在 `type!="textarea"` 时有效	string	medium / small / mini	—
prefix-icon	输入框头部图标	string	—	—
suffix-icon	输入框尾部图标	string	—	—
rows	输入框行数，只对 `type="textarea"` 有效	number	—	2
autosize	自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，	boolean / object	—	false
autocomplete	原生属性，自动补全	string	on, off	off
auto-complete	下个主版本弃用	string	on, off	off
name	原生属性	string	—	—
readonly	原生属性，是否只读	boolean	—	false
max	原生属性，设置最大值	—	—	—
min	原生属性，设置最小值	—	—	—
step	原生属性，设置输入字段的合法数字间隔	—	—	—
resize	控制是否能被用户缩放	string	none, both, horizontal, vertical	—
autofocus	原生属性，自动获取焦点	boolean	true, false	false
form	原生属性	string	—	—
label	输入框关联的label文字	string	—	—
tabindex	输入框的tabindex	string	-	-
validate-event	输入时是否触发表单的校验	boolean	-	true

Input Events

事件名称	说明	回调参数
blur	在 Input 失去焦点时触发	(event: Event)
focus	在 Input 获得焦点时触发	(event: Event)
change	仅在输入框失去焦点或用户按下回车时触发	(value: string \| number)
input	在 Input 值改变时触发	(value: string \| number)
clear	在点击由 `clearable` 属性生成的清空按钮时触发	—

方法的使用

<el-input v-model="username" ref="inputs"></el-input><el-button @click="focusInput">focus</el-button>


<script>
export default {
  name: "Input",
  data(){

    return {
      username: ''
    }
  },
  methods: {
    focusInput(){
        //调用获得焦点的方法
      this.$refs.inputs.focus();
      this.$refs.selects.select();
    }
  }
}
</script>

📑总结

在使用组件的方法时需要在对应的组件中加入ref=组件别名
在调用方法时直接使用this.$refs.组件别名.方法名()调用

注意:在element ui中所有组件都存在属性事件和方法
属性:直接写在对应的组件标签上使用方式:属性名=属性值方式
事件:直接使用vue绑定事件方式卸载对应的组件标签上使用方式: @事件名=vue中事件处理函数
方法:1 在对应组件上使用ref=组件别名 2 通过使用this.$refs.组件别名.方法名()进行调用

select选择器组件的使用

组件创建

# 1 数据写死在页面上
<el-select v-model="cityName">
    <el-option value="北京">北京</el-option>
    <el-option value="天津">天津</el-option>
    <el-option value="乌鲁木齐">乌鲁木齐</el-option>
</el-select>
	注意:要求下拉列表中必须存在option的value值  2 要求select中必须绑定值
# 2 动态获取数据
<el-select >
    <el-option v-for="option in options" :label="option.name" :value="option.id" :key="option.id"></el-option>
  </el-select>
  
<script>
export default {
name: "Select",
  data(){
  return {
    options: [
      {id:1,name: "longda"},
      {id:2,name: "lina"},
      {id:3,name: "xiaoming"},
      {id:4,name: "dachui"},
    ]
  }
  }
}
</script>
# 3 获取下拉列表选中的数据
 <el-select v-model="city.id">
    <el-option v-for="option in options" :label="option.name" :value="option.id" :key="option.id"></el-option>
  </el-select>
</div>


<script>
export default {
name: "Select",
  data(){
  return {
    options: [
      {id:'1',name: "longda"},
      {id:'2',name: "lina"},
      {id:'3',name: "xiaoming"},
      {id:'4',name: "dachui"},
    ],
    city:{
      id : ['1']
    }
  }
  }
}
</script>

Select Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	boolean / string / number	—	—
multiple	是否多选	boolean	—	false
disabled	是否禁用	boolean	—	false
value-key	作为 value 唯一标识的键名，绑定值为对象类型时必填	string	—	value
size	输入框尺寸	string	medium/small/mini	—
clearable	是否可以清空选项	boolean	—	false
collapse-tags	多选时是否将选中值按文字的形式展示	boolean	—	false
multiple-limit	多选时用户最多可以选择的项目数，为 0 则不限制	number	—	0
name	select input 的 name 属性	string	—	—
autocomplete	select input 的 autocomplete 属性	string	—	off
auto-complete	下个主版本弃用	string	—	off
placeholder	占位符	string	—	请选择
filterable	是否可搜索	boolean	—	false
allow-create	是否允许用户创建新条目，需配合 `filterable` 使用	boolean	—	false
filter-method	自定义搜索方法	function	—	—
remote	是否为远程搜索	boolean	—	false
remote-method	远程搜索方法	function	—	—
loading	是否正在从远程获取数据	boolean	—	false
loading-text	远程加载时显示的文字	string	—	加载中
no-match-text	搜索条件无匹配时显示的文字，也可以使用`slot="empty"`设置	string	—	无匹配数据
no-data-text	选项为空时显示的文字，也可以使用`slot="empty"`设置	string	—	无数据
popper-class	Select 下拉框的类名	string	—	—
reserve-keyword	多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词	boolean	—	false
default-first-option	在输入框按下回车，选择第一个匹配项。需配合 `filterable` 或 `remote` 使用	boolean	-	false
popper-append-to-body	是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false	boolean	-	true
automatic-dropdown	对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单	boolean	-	false

事件,方法的使用同之前的

Switch组件的使用

Switch组建的创建

<el-switch v-model="value"></el-switch>

<script>
export default {
name: "Switchs",
  data(){
  return{
    value:false,
  }
  }
}
</script>

Attributes

参数	说明	类型	可选值	默认值
disabled	是否禁用	boolean	—	false
width	switch 的宽度（像素）	number	—	40
active-icon-class	switch 打开时所显示图标的类名，设置此项会忽略 `active-text`	string	—	—
inactive-icon-class	switch 关闭时所显示图标的类名，设置此项会忽略 `inactive-text`	string	—	—
active-text	switch 打开时的文字描述	string	—	—
inactive-text	switch 关闭时的文字描述	string	—	—
active-value	switch 打开时的值	boolean / string / number	—	true
inactive-value	switch 关闭时的值	boolean / string / number	—	false
active-color	switch 打开时的背景色	string	—	#409EFF
inactive-color	switch 关闭时的背景色	string	—	#C0CCDA
name	switch 对应的 name 属性	string	—	—

DatePicker组件

datePicker创建

<el-date-picker v-model="createDate">

  </el-date-picker>


<script>
export default {
name: "Date_Picker",
  data(){
  return{
    createDate: '',
  }
  }
}
</script>

Picker Options和Shortcuts的使用

Shortcuts用来增加日期组件的快捷面板
Picker Options:用来对日期控件做自定义配置

Shortcuts使用

<el-date-picker
      v-model="updateDate"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions2">
    </el-date-picker>

<script>
export default {
name: "Date_Picker",
  data(){
  return{
    createDate: '',
    updateDate:'',
    pickerOptions2: {
      shortcuts: [{
        text: '最近一周',
        onClick(picker) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          picker.$emit('pick', [start, end]);
        }
      }, {
        text: '最近一个月',
        onClick(picker) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          picker.$emit('pick', [start, end]);
        }
      }, {
        text: '最近三个月',
        onClick(picker) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          picker.$emit('pick', [start, end]);
        }
      }]
    },
  }
  }
}
</script>

elementui 能用ui库水印吗 element ui有什么用_可选值_03

Picker Options

<el-date-picker
      v-model="updateDate"
      type="daterange"
      :picker-options="pickerOptions2">
    </el-date-picker>


<script>
export default {
name: "Date_Picker",
  data(){
  return{
    createDate: '',
    updateDate:'',
    pickerOptions2: {
      disabledDate(time){   //用来对日期进行控制
        return time.getTime() >Date.now();
      },      
    },
  }
  }
}
</script>

elementui 能用ui库水印吗 element ui有什么用_ico_04

Upload组件

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

<script>
export default {
name: "UploadEL",
  data() {
    return {
      fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
    };
  },
}
</script>

⚠️注意

在使用upload组件时必须设置action属性,action属性为必要参数不能省略

table表格组件

<el-table :data="tableData">
    <el-table-column prop="id" label="编号"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
  </el-table>

<script>
export default {
name: "ELForm",
  data(){
  return {
    tableData: [
      {id: '1',name: 'longda',age: 12},
      {id: '1',name: 'longda',age: 12},
      {id: '1',name: 'longda',age: 12},
      {id: '1',name: 'longda',age: 12}
    ]
  }

  }
}
</script>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：动态规划基础题目 python 动态规划算法 python

下一篇：kafka代理抛出异常错误 80041017 kafka expired record

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯