element ui 使用说明

Posted mry6

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了element ui 使用说明相关的知识,希望对你有一定的参考价值。

element ui 简介

ElementUI是基于VUE2.0的组件库,提供了丰富的PC端组件。

element ui 官方中文文档

Icon 图标

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"  rel="stylesheet">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>


<body>

    <div id="app">
		<i class="el-icon-edit"></i>
		<i class="el-icon-share"></i>
		<i class="el-icon-delete"></i>
		<el-button type="primary" icon="el-icon-search">搜索</el-button>
	</div>
	
</body>

<script type="text/javascript">
	new Vue({
		el:'#app'
	})
</script>

</html>

运行结果:
在这里插入图片描述
此处还有许多其他图标,根据自己的实际需求查看官方文档。

Button 按钮

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"  rel="stylesheet">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

<body>

    <div id="app">
		<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><br/>

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

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

		<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><br/>
	</div>
	
</body>

<script type="text/javascript">
	new Vue({
		el:'#app'
	})
</script>

</html>

运行结果:
在这里插入图片描述
你可以使用disabled属性来定义按钮是否可用,它接受一个Boolean值。

Link 文字链接

基础用法:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"  rel="stylesheet">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app">
	  <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>
	</div>
</body>

<script type="text/javascript">
	new Vue({
		el:'#app'
	})
</script>
</html>

运行结果:
在这里插入图片描述
下划线:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"  rel="stylesheet">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

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

<script type="text/javascript">
	new Vue({
		el:'#app'
	})
</script>

</html>

运行结果:
在这里插入图片描述
在这里插入图片描述

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"  rel="stylesheet">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

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

<script type="text/javascript">
	new Vue({
		el:'#app'
	})
</script>
</html>

运行结果:
在这里插入图片描述

Radio 单选框

基础用法:
由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"  rel="stylesheet">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>


<body>

    <div id="app">
	  <template>
	    <el-radio v-model="radio" label="1">备选项</el-radio>
	    <el-radio v-model="radio" label="2">备选项</el-radio>
	  </template>
	</div>
	
</body>

<script>

  var Main = {
    data () {
      return {
        radio: '1'
      };
    }
  }
  var Ctor = Vue.extend(Main)
  new Ctor().$mount('#app')
  
</script>

</html>

执行结果:
在这里插入图片描述
单选框组:
适用于在多个互斥的选项中选择的场景

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"  rel="stylesheet">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app">
	  <template>
	    <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>
	  </template>
	</div>
</body>

<script>

  var Main = {
    data () {
      return {
        radio: 3
      };
    }
  }
  var Ctor = Vue.extend(Main)
  new Ctor().$mount('#app')
</script>

</html>

运行结果:
在这里插入图片描述

TimePicker 时间选择器

用于选择或输入日期

固定时间点:
提供几个固定的时间点供用户选择

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"  rel="stylesheet">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app">
	    <el-time-select
		  v-model="value"
		  :picker-options="{
			start: '08:30',
			step: '00:15',
			end: '18:30'
		  }"
		  placeholder="选择时间">
		</el-time-select>
	</div>
</body>

<script>
  var Main = {
    data () {
      return {
        value: ''
      };
    }
  }
  var Ctor = Vue.extend(Main)
  new Ctor().$mount('#app')
</script>

</html>

运行结果:
在这里插入图片描述

DateTimePicker 日期时间选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"  rel="stylesheet">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

<body>
    <div id="app">
		<template>
		  <div class="block">
			<span class="demonstration">默认</span>
			<el-date-picker
			  v-model="value1"
			  type="datetime"
			  placeholder="选择日期时间">
			</el-date-picker>
		  </div>
		  <div class="block">
			<span class="demonstration">带快捷选项</span>
			<el-date-picker
			  v-model="value2"
			  type="datetime"
			  placeholder="选择日期时间"
			  align="right"
			  :picker-options="pickerOptions">
			</el-date-picker>
		  </div>
		  <div class="block">
			<span class="demonstration">设置默认时间</span>
			<el-date-picker
			  v-model="value3"
			  type="datetime"
			  placeholder="选择日期时间"
			  default-time="12:00:00">
			</el-date-picker>
		  </div>
		</template>
	</div>
</body>

<script type="text/javascript">
	var Main = {
		data() {
		  return {
			pickerOptions: {
			  shortcuts: [{
				text: '今天'Selenium Xpath元素无法定位 NoSuchElementException: Message: no such element: Unable to locate element(代码片段

在vuepress中实现类似element-ui 的代码预览效果

vue中的element-ui和react的element-ui

vue中的element-ui和react的element-ui

使用绑定从片段访问父活动的 UI 元素

vue系列---vue项目如何使用element-ui?