Element UI
Contents
0. Element UI có những gì?
0.1 Transiton
Transition khá ít, chỉ gồm 3 hiệu ứng
0.2 Typography
Chữ to như viết báo.
0.3 Cascader
Select dạng menu.
0.4 Upload
Upload element-ui custom lại.
0.5 Rate
Đánh giá dạng sao.
0.6 Transfer
Chuyển qua lại giữa hai khung dữ liêu.
0.7 Progress
Thanh tiến trình.
0.8 Tree
Cây thư mục.
0.9 Pagination
Phân trang dữ liệu
0.10 Skeleton
Dạng dữ liệu đang load.
0.11 Step
Thanh tiến trình dạng step by step.
0.12 Timeline
Dòng thời gian.
0.13 Divider
Thanh ngang phân cách nội dung.
0.14 Calendar
Lịch.
0.15 Backtop
Di chuyển lên trên.
0.16 Infinite Scroll
Scroll xuống tự động load thêm nội dung.
0.17 Avatar
Avatar.
0.18 Drawer
Dạng popup nhưng một phần bên phải. Kiểu notify của windows 10.
1. Change locale của một page cụ thể
Add vào html
<script src="//unpkg.com/element-ui"></script> <script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script> <script> ELEMENT.locale(ELEMENT.lang.en) </script>
2. Datepicker
let param = {
v_model: 'datePicker',
placeholder: 'Please select datepicker'
};
let data = `
<el-date-picker
v-model="MODEL"
type="date"
placeholder="PLACEHOLDER">
</el-date-picker>
data() {
return {
MODEL: '',
};
}
`;
data = data.replaceAll('MODEL', param.v_model);
data = data.replaceAll('PLACEHOLDER', param.placeholder);
console.log(data);3. CDN Element ui
// import sau file vuejs <script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.3.4/index.js"></script>
4. Popup
4.1 Popup Confirm
let param = {
textMessage: 'Số lượng CV vượt quá giới hạn không thể tạo thêm mới!',
title: 'Thông báo',
textButtonOK: 'OK',
textButtonCancel: 'Cancel',
typeAlert: 'warning' //success, error, info and warning
}
let data = `
this.$confirm('TEXT_MESSAGE', 'TITLE', {
confirmButtonText: 'TEXT_BUTTON_OK',
cancelButtonText: 'TEXT_BUTTON_CANCEL',
type: 'TYPE_ALERT'
}).then(() => {
}).catch(() => {
});
`;
data = data.replaceAll('TEXT_MESSAGE', param.textMessage);
data = data.replaceAll('TITLE', param.title);
data = data.replaceAll('TEXT_BUTTON_OK', param.textButtonOK);
data = data.replaceAll('TEXT_BUTTON_CANCEL', param.textButtonCancel);
data = data.replaceAll('TYPE_ALERT', param.typeAlert);
console.log(data);4.2 Alert
let param = {
textMessage: 'Số lượng CV vượt quá giới hạn không thể tạo thêm mới!',
title: 'Thông báo',
textButtonOK: 'OK',
}
let data = `
this.$alert('TEXT_MESSAGE', 'TITLE', {
confirmButtonText: 'TEXT_BUTTON_OK',
callback: action => {
}
});
`;
data = data.replaceAll('TEXT_MESSAGE', param.textMessage);
data = data.replaceAll('TITLE', param.title);
data = data.replaceAll('TEXT_BUTTON_OK', param.textButtonOK);
console.log(data);5. Upload File
Demo: https://element.eleme.io/#/en-US/component/upload#upload
5.1 Drag or clip upload file
<el-upload
class="upload-demo"
drag
action="#"
accept="application/pdf" // sử dụng tương tự như accept của thẻ input html accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.zip"
:on-remove="handleRemoveCV"
:file-list="fileList.cv"
:on-change="handleChangeUploadCV"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">Drop file here or <em>click to upload</em></div>
</el-upload>5.1.1 Xử lý khi change file
handleChangeUploadCV(file, fileList) {
// trả về file, chứa thông tin name, size, ... của file
},5.1.2 Xử lý remove
handleRemoveCV(file, fileList) {
// trả về file, chứa thông tin name, size, ... của file
},
// tham khảo thêm, check uid file
handleRemoveOther(file, fileList) {
let indexFile = -1;
this.fileList.other.forEach( (item, index) => {
if (file.name == item.name && file.uid == item.uid) {
indexFile = index;
}
});
this.fileList.other.splice(indexFile, 1);
},5.1.3 Function validate type file
validateTypeFile(arrayType, fileName) {
if (fileName.length > 4) {
fileName = fileName.split('.');
let extension = fileName[fileName.length - 1];
let blnValid = false;
for (let j = 0; j < arrayType.length; j++) {
let sCurExtension = arrayType[j];
if (extension == sCurExtension) {
blnValid = true;
break;
}
}
return blnValid;
}
return false;
}
// sử dụng
let arrayType = ['jpg', 'jpeg', 'png', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'zip'];
this.validateTypeFile(arrayType, file.name)5.1.4 File list dạng:
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'
}]
};
},5.1.5 Xử lý backend khi send file:
Khi send file hãy truyển qua backend thuộc tính raw trong file (lấy dữ liệu lúc change file)
file: {
name: '',
size: ...,
uid: ...,
raw: .... // => thuộc tính này như thẻ input file của html
}Như vậy khi gửi qua backend sẽ xử lý như xử lý file thông thường.
5.1.5.1 Ví dụ về xử lý upload file
let formData = new FormData();
formData.append('filecv', this.fileList.cv[0].file.raw);
this.$axios.post('/api', formData, { 'Content-Type' : 'multipart/form-data' })
.then(res => {
// code
})
.catch((err) => {
// code
})
// === backend ===
if ($request->hasFile('filecv')) {
$file = $request->file('filecv');
$nameUser = "xxxxxx";
// set path
$dayCurrent = Carbon::now()->day; //
$monthCurrent = Carbon::now()->month; //
$yearCurrent = Carbon::now()->year; //
$pathSaveFileInServer = "/uploads/files/member-cv/$yearCurrent/$monthCurrent/$dayCurrent/";
// check path if not exist => create
if (!\File::exists(public_path($pathSaveFileInServer))) {
\File::makeDirectory(public_path($pathSaveFileInServer), $mode = 0777, true, true);
}
// save file
$fileName = strSlugUpperCase($nameUser) . '-' . strtotime(date("Y-m-d H:i:s")) . '-' . $file->getClientOriginalName();
$file->move(public_path($pathSaveFileInServer), $fileName);
}5.1.6 Lưu ý
- Gửi qua backend phải gửi thuộc tính raw của object file
- Gửi qua backend phải bao gồm { ‘Content-Type’ : ‘multipart/form-data’ } là tham số thứ ba của axios
- accept trong element el-upload sử dụng tương tự như accept của thẻ input html