Element-ui(更新中表單最詳細的解釋)
基本用法
- 初始化專案
vue create element-test
- 安裝
npm i element-ui -S
- Vue 外掛
+ import ElementUI from 'element-ui'
+ Vue.use(ElementUI)
- 引入樣式
import 'element-ui/lib/theme-chalk/index.css'
- element-ui 案例
Message 訊息提示
常用於主動操作後的反饋提示。與 Notification 的區別是後者更多用於系統級通知的被動提醒。
https://element.eleme.cn/#/zh-CN/component/message#fang-fa
按需載入
對專案進行打包:
npm run build
發現vendors庫高達789KB
-rw-r–r-- 1sam staff 789518 10 27 20:40 chunk-vondors.cd583f5b.js
這是由於我們未使用按需載入,所以對element-ui進行全量打包的結果,按需載入的用法如下:
1. 安裝babel-plugin-component
npm install babel-plugin-component -D
2. 修改 babel.config.js:
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
"plugins": [
"component",
{
"libraryName":"element-ui", //第一步是指定我們按需載入的名稱是element-ui
"styleLibraryName":"theme-chalk" //指定樣式庫
}
]
}
main.js
import Vue from 'vue'
import App from './App.vue'
// import ElementUI from 'element-ui' //引入element
import { button, Message } from 'element-ui' //按需載入後換方式
// import 'element-ui/lib/theme-chalk/index.css'//引入element樣式 按需載入後不要了
// Vue.use(ElementUI) //使用element 按需載入後換方式
Vue.component(Button.name,Button) //Vue.component有倆個引數第一個是元件名稱 第二個是建構函式
Vue.prototype.$message = Message //在原型上加一個message方法
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
Mixed spaces and tabs no-mixed-spaces-and-tabs混合空格和製表符
翻譯:混合空格和製表符沒有混合空格和製表符
原因:這一段空白裡既有tab鍵按出的空格,又有空格鍵按出的空格
解決:把這段空白刪掉,全部用tab鍵或全部用空格鍵
/* eslint-disable*/
禁制ellint報錯
外掛引用(推薦使用)
可以通過element外掛快速整合 element-ui
vue add element //對element做了一個簡單初始化
表單基本用法
- el-form容器,通過 model 繫結資料
- el-form-item 容器,通過 label 繫結標籤
- 表單元件通過 v-model 繫結 medel 中的資料
<template>
<div id="app">
<el-form :inline="true" :model="data"> //inline排成一行
<el-form-item label="審批人">
<el-input v-model="data.user" placeholder="審批人"></el-input>
</el-form-item>
<el-form-item label="活動區域">
<el-select v-model="data.region" placeholder="活動區域">
<el-option label="區域一" value="shanghai"></el-option>
<el-option label="區域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查詢</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
data: {
user:'sam',
region:'區域二'
}
}
},
methods: {
onSubmit() {
console.log(this.data);
}
}
}
</script>
表單的校驗
- 定義校驗規則,可以繫結到 el-form 或 el-form-item
export default {
data() {
const userValidator = (rule,value,callback) => {
if (value.leng >3) {
callback()
}else {
callback(new Error('使用者名稱長度必須大於3'))
}
}
return {
data : {
user :'sam',
region:'區域二'
},
rules: {
user: [
{ required:true,trigger:'change',message:'使用者名稱必須錄用' },
{ validator: userValidator,trigger:'change' }
]
}
}
}
}
兩種方法 (非空校驗)
- 第一種方法繫結rules來做自動的監聽
// el-form 提供了一個rules屬性
<el-form :inline="true" :model="data" :rules="rules" ref="form">
<el-form-item label="審批人" prop="user">
rules: {
// user裡可以是陣列也可以是物件,陣列代表有多條校驗項
user: [ //與data裡的user無關 與 el-form-item 的 prop 屬性一一對應 就會找prop為user的表單項裡面的內容,會直接去v-model裡面的內容進行校驗
// 必須輸入 change當文字傳送變化觸發/blur輸出時不會觸發當移除輸入框就會觸發 提示資訊
{ required:true,trigger:'change',message:'使用者名稱必須錄用' },
// 手動校驗 validator 需要繫結到一個方法
{ validator: userValidator,trigger:'change' }
]
}
// 觸發校驗規則會有3個引數,第一個引數是當前的校驗規則,第二個是value就是我們輸入的值
const userValidator = (rule,value,callback) => {
if (value.leng >3) {
callback() // 當leng大於3的時候呼叫callback()表示通過
}else {
callback(new Error('使用者名稱長度必須大於3'))
}
- 第二種方法通過ref繫結form的物件上,通過直接呼叫el-form的api:validate來實現手動的校驗
<el-form :inline="true" :model="data" :rules="rules" ref="form">
onSubmit() {
console.log(this.data);
this.$refs.form.validate((isValid,errors) => {
console.log(isValid,errors)
})
}
推薦兩種一起使用
<template>
<div id="app">
<el-form :inline="true" :model="data" :rules="rules" ref="form">
<el-form-item label="審批人" prop="user">
<el-input v-model="data.user" placeholder="審批人"></el-input>
</el-form-item>
<el-form-item label="活動區域">
<el-select v-model="data.region" placeholder="活動區域">
<el-option label="區域一" value="shanghai"></el-option>
<el-option label="區域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查詢</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
const userValidator = (rule,value,callback) => {
if (value.leng >3) {
callback()
}else {
callback(new Error('使用者名稱長度必須大於3'))
}
}
return {
data : {
user :'',
region:''
},
rules: {
user: [
{ required:true,trigger:'change',message:'使用者名稱必須錄用' },
{ validator: userValidator,trigger:'change' }
]
}
}
},
methods: {
/* eslint-disable */
onSubmit() {
console.log(this.data);
this.$refs.form.validate((isValid,errors) => {
console.log(isValid,errors)
})
}
}
}
</script>
表單校驗的高階用法
用法一: 動態改變校驗規則
- rules 只包含一個校驗規則
{
rules: {
user: [
{ required : true,trigger: 'change',message:'使用者名稱必須錄用' }
]
}
}
- 動態新增 rules
addRule() {
const userValidator = (rule,value,callback) => {
if (value.length > 3) {
this.inputError = ''
this.inputValidateStatus = ''
callback()
} else {
callback(new Error('使用者名稱長度必須大於3'))
}
}
//他會動態的將我們倆個校驗規則拼起來,拼起來之後會去改變rules
const newRule = [
...this.rules.user,
{ validator: userValidator,trigger: 'change' }
]
// 一定要使用Object.assign重新生成一個物件,將新的物件賦值給rules
this.rules = Object.assign({},this.rules, { user : newRule })
}
validate-on-rule-change
當我們新增校驗規則他會預設立即做一個校驗
加上validate-on-rule-change這個屬性當rules中發生變化時他會立即做一次校驗
:validate-on-rule-change="false"我們新增新的屬性時不會立即校驗
this.rules
//this.rules 必須要使用新物件複製的方法,因為在實現過程中el-form是用wacth監聽這個this.rules發生變化
this.rules = Object.assign({},this.rules, { user : newRule })
//錯誤示範
//如果你這樣寫把你新的規則push進去的話,是不會產生效果的,因為watch是監聽不到this.rules下面user的變化的,他只能監聽rules本身的變化
this.rules.user.push(newRule)
用法二:手動控制校驗狀態
validate-status:驗證狀態,列舉值,共四種:
success:驗證成功
error:驗證失敗
validating:驗證中
(空):未驗證
error:這隊友錯誤提示
- 設定el-form-item 屬性
<el-form=item
label="使用者名稱"
prop="user"
:error="error"
:validate-status="status"
>
<!-- ... -->
</el=form-item>
//第一步要建立兩個狀態於data平級
error:'',
status:'',
data : {
user :'',
region:'',
}
//第二不在el-form-item下增加兩個狀態繫結
//:validate-status="status" //表示當前的驗證狀態,改變validate-status的值就會變成不同狀態(上面有)
//error //自定義錯誤 如果驗證失敗error裡有文字的話就會顯示出來
// 要想看出這一步的效果,我們就要加一個status-icon (下面演示)
<el-form-item label="審批人" prop="user" :validate-status="status" status-icon:error="error">
status-icon
status-icon 對我們校驗過程中加一些圖示的提示
- 自定義 status 和 error
showError () {
this.status = 'error'
this.error = '使用者名稱輸入有誤'
},
showSuccess () {
this.status = 'success'
this.error = ''
},
showValidating () {
this.status = 'va;odating'
this.error = ''
}
全文
<template>
<div id="app">
<el-form
:inline="true"
:model="data"
:rules="rules"
ref="form"
validate-on-rule-change
status-icon
>
<el-form-item
label="審批人"
prop="user"
:validate-status="status"
:error="error"
>
<el-input v-model="data.user" placeholder="審批人"></el-input>
</el-form-item>
<el-form-item label="活動區域">
<el-select v-model="data.region" placeholder="活動區域">
<el-option label="區域一" value="shanghai"></el-option>
<el-option label="區域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查詢</el-button>
<el-button type="success" @click="showSuccess">成功校驗</el-button>
<el-button type="danger" @click="showError">失敗校驗</el-button>
<el-button type="warning" @click="showValidating">校驗中</el-button>
<el-button type="primary" @click="addRule">新增校驗規則</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
error: "這是一個自定義的錯誤",
status: "error",
data: {
user: "",
region: "",
},
rules: {
user: [
{ required: true, trigger: "change", message: "使用者名稱必須錄用" },
],
},
};
},
methods: {
/* eslint-disable */
onSubmit() {
console.log(this.data);
this.$refs.form.validate((isValid, errors) => {
console.log(isValid, errors);
});
},
addRule() {
const userValidator = (rule, value, callback) => {
if (value.length > 3) {
callback();
} else {
callback(new Error("使用者名稱長度必須大於3"));
}
};
const newRule = [
...this.rules.user,
{ validator: userValidator, trigger: "change" },
];
this.rules = Object.assign({}, this.rules, { user: newRule });
},
showError() {
this.status = "error";
this.error = "使用者名稱輸入有誤";
},
showSuccess() {
this.status = "success";
this.error = "";
},
showValidating() {
this.status = "va;odating";
this.error = "";
},
},
};
</script>
相關文章
- vue的事件冒泡 最詳細解釋版本Vue事件
- mysql 5.7配置項最詳細的解釋MySql
- python中yield的用法詳解——最簡單,最清晰的解釋Python
- JavaScript 的 Date 最詳細解讀JavaScript
- tar命令的詳細解釋
- 最詳細的JVM&GC講解JVMGC
- 最詳細的JavaScript和事件解讀JavaScript事件
- 工作流Activiti框架中表單的使用!詳細解析內建表單和外接表單的渲染框架
- 自己封裝的瀑布流外掛,含最詳細註釋,簡單易懂。封裝
- docker 命令詳細解釋Docker
- top命令詳細解釋
- Servlet、HTTP詳細解釋!ServletHTTP
- 可能是最詳細的字元編碼詳解字元
- 一些sql語句的詳細解釋[更新:2006.5.23]SQL
- JPS 命令詳細解釋
- Nginx location配置詳細解釋Nginx
- resin配置檔案的詳細解釋
- 史上最詳細的一線大廠Mysql面試題詳解MySql面試題
- 【超詳細】解釋BigDecimal精度的坑Decimal
- Application.Caller詳細解釋APP
- openstack完整的部署(最詳細)
- 全網最詳細的負載均衡原理圖解負載圖解
- Semaphore最詳細解析
- 最詳細的hadoop2.2.0叢集的HA高可靠的最簡單配置Hadoop
- EventBus 3.0+ 原始碼詳解(史上最詳細圖文講解)原始碼
- MySQL relay log 詳細引數解釋MySql
- ORACLE 跟蹤檔案詳細解釋Oracle
- mysqldump匯出引數詳細解釋MySql
- php.ini安全配置詳細解釋PHP
- 教科書級講解,秒懂最詳細Java的註解Java
- 最全面最詳細的字符集講解來了!
- 史上最詳細的webpack 講解2 (DefinePlugin中的淫技巧)WebPlugin
- 最詳細版圖解優先佇列(堆)圖解佇列
- webpack4.x最詳細入門講解Web
- 全網最!詳!細!Tarjan演算法講解。演算法
- 引數session_cached_cursors的詳細解釋(zt)Session
- 生動詳細解釋javascript的冒泡和捕獲JavaScript
- MongoDB啟動命令mongod引數的詳細解釋MongoDB