Transition khá ít, chỉ gồm 3 hiệu ứng
Chữ to như viết báo.
Select dạng menu.
Upload element-ui custom lại.
Đánh giá dạng sao.
Chuyển qua lại giữa hai khung dữ liêu.
Thanh tiến trình.
Cây thư mục.
Phân trang dữ liệu
Dạng dữ liệu đang load.
Thanh tiến trình dạng step by step.
Dòng thời gian.
Thanh ngang phân cách nội dung.
Lịch.
Di chuyển lên trên.
Scroll xuống tự động load thêm nội dung.
Avatar.
Dạng popup nhưng một phần bên phải. Kiểu notify của windows 10.
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>
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);
// import sau file vuejs <script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.3.4/index.js"></script>
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);
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);
Demo: https://element.eleme.io/#/en-US/component/upload#upload
<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>
handleChangeUploadCV(file, fileList) {
// trả về file, chứa thông tin name, size, ... của file
},
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);
},
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)
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'
}]
};
},
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.
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);
}
