VUE-Element UIカスタムLoading図操作
13044 ワード
必要:
element ui loading図は自分のloading図しか使えません。
しかし、多くの場面では、自分のgif図に切り替える必要があります。
文書にはいくつかありますが、element-loading-spinner=「el-inon-loading」はカスタム図を指定できます。
しかし、テストしても、もうelemenuiのアイコンライブラリの中の図だけです。私たちが考えているカスタム図類の意味ではありません。
カスタム図の方法:
1）カスタムelement UI loadingスタイルを追加する
astertsの下でCSSフォルダとCSSファイルを新規作成します。たとえば、mys.cssです。
また、カスタムのelement類CSSスタイルを書き込みます。
2）main.jsはカスタムスタイルを導入する。
ここでは、element UIを導入してから、自分のスタイルを導入します。そうでないと、element UIに上書きされます。
4）ロードロジック対応
理由は、VUE項目を包装した後、スタイルディレクトリ構造がstatic/cssになります。
解決
build->utils.jsプロファイル追加
publicPath:'./''
カスタムloading図の効果
追加知識：vue+element UIカスタム共通tableコンポーネント
共通のテーブルコンポーネントをカスタマイズして、改ページ、バックエンドの順序付け、ルートのパラメータジャンプ、複数の選択ボックス、フィールドのフォーマットがあります。
1.テーブルListコンポーネント
element ui loading図は自分のloading図しか使えません。
しかし、多くの場面では、自分のgif図に切り替える必要があります。
文書にはいくつかありますが、element-loading-spinner=「el-inon-loading」はカスタム図を指定できます。
しかし、テストしても、もうelemenuiのアイコンライブラリの中の図だけです。私たちが考えているカスタム図類の意味ではありません。
カスタム図の方法:
1）カスタムelement UI loadingスタイルを追加する
astertsの下でCSSフォルダとCSSファイルを新規作成します。たとえば、mys.cssです。
また、カスタムのelement類CSSスタイルを書き込みます。
.el-loading-spinner{
/* gif */
background-image:url('../img/loading.gif');
background-repeat: no-repeat;
background-size: 200px 120px;
height:100px;
width:100%;
background-position:center;
/* element-ui 50% height:100%, ， ， top */
top:40%;
}
.el-loading-spinner .circular {
/* element-ui loading */
display: none;
}
.el-loading-spinner .el-loading-text{
/* loading */
margin:85px 0px;
}2）main.jsはカスタムスタイルを導入する。
ここでは、element UIを導入してから、自分のスタイルを導入します。そうでないと、element UIに上書きされます。
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI); //element
// element UI loading
import './assets/css/myCss.css'
<el-container
v-loading="loading"
element-loading-background="rgba(255, 255,255, 0.5)"
element-loading-text=" ..."
>4）ロードロジック対応
data () {
return {
loading: true
}
},
startLoading()
{
this.loading=true;
},
endLoading(){
this.loading=false;
},
Ajx_GetClassList()
{
this.startLoading();
this.$axios(
{
url: url,
method:'POST',
}
).then(res=>{
this.endLoading();
})
},理由は、VUE項目を包装した後、スタイルディレクトリ構造がstatic/cssになります。
解決
build->utils.jsプロファイル追加
publicPath:'./''
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath:'../../', // element-ui
fallback: 'vue-style-loader'
})
カスタムloading図の効果
追加知識：vue+element UIカスタム共通tableコンポーネント
共通のテーブルコンポーネントをカスタマイズして、改ページ、バックエンドの順序付け、ルートのパラメータジャンプ、複数の選択ボックス、フィールドのフォーマットがあります。
1.テーブルListコンポーネント
<!-- -->
<template>
<div class="table-temp">
<el-table
:data="tableData"
border
size="mini"
fit
highlight-current-row
height="500"
v-loading="loading"
@selection-change="handleSelectionChange"
@sort-change="sortChange"
>
<el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table-column type="index" label=" " align="center" fixed></el-table-column>
<!-- prop: name, label: , fixed: (left, right), minWidth: ( ), active:
active.name: , active.clickFun: , formatData: -->
<el-table-column
v-for="(item, key) in tableHeader"
:key="key"
:prop="item.prop"
:label="item.label"
:fixed="item.fixed"
:min-widitem="item.minWidth"
align="center"
:sortable="item.sortable"
>
<template slot-scope="scope">
<div v-if="item.active">
<el-button
v-for="(o, key) in item.active"
:key="key"
@click="handleActive(scope.row, o.router, o.routerId)"
type="text"
size="small"
>{{o.name}}</el-button>
</div>
<div v-else>
<a class="btn-a"
v-if="item.router"
@click="handleActive(scope.row,item.router, item.routerId)"
>
<span v-if="!item.formatData">{{ scope.row[item.prop] }}</span>
<span v-else>{{ scope.row[item.prop] | formatters(item.formatData) }}</span>
</a>
<div v-else>
<span v-if="!item.formatData">{{ scope.row[item.prop] }}</span>
<span v-else>{{ scope.row[item.prop] | formatters(item.formatData) }}</span>
</div>
</div>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
layout="total, prev, pager, next"
:current-page="pagination.pageIndex"
:page-size="pagination.pageSize"
:total="pagination.pageTotal"
@current-change="handlePageChange"
></el-pagination>
</div>
</div>
</template>
<script>
var _ = require('lodash');
export default {
props: {
tableData: {
type: Array,
default: function() {
return [];
}
},
tableHeader: {
type: Array,
default: function() {
return [];
}
},
loading: {
type: Boolean,
default: false
},
pagination: {
type: Object,
default: {
pageIndex: 0,
pageSize: 15,
pageTotal: 0
}
}
},
data() {
return {
multipleSelection: [],
newPagination: {
pageIndex: 0,
pageSize: 15,
pageTotal: 0
}
};
},
methods: {
//
handleSelectionChange(val) {
this.multipleSelection = val;
this.$emit('selectFun', { backData: this.multipleSelection });
},
//
handlePageChange(val) {
console.log('handlePageChange:', val);
this.$set(this.pagination, 'pageIndex', val);
//
this.$emit('pageChange', { backData: this.pagination});
},
// row: ，route： ， routeId
handleActive(row, route, routeId) {
console.log(row);
this.$router.push({
path: '/' + route,
query: {
id: row[routeId]
}
});
},
//
sortChange(column) {
//console.log('sortChange:', column);
//
this.$emit('sortChange', { backData: column });
}
},
watch: {
}
},
computed: {
},
created() {
}
};
</script>
<style scoped>
.btn-a{
color: #409EFF
}
</style>
<template>
<div>
<!-- -->
<table-List
:tableData="tableData"
:tableHeader="tableHeader"
:loading="loading"
:pagination="pagination"
@pageChange="pageChange"
@selectFun="selectFun"
@sortChange="sortChange"
></table-List>
</div>
</template>
<script>
import appMain from '../../../utils/app_main';
export default {
data() {
return {
//
loading: false,
//
pagination: {
pageIndex: 1,
pageSize: 10,
pageTotal: 60
},
tableHeader: [
//
{ prop: 'id', label: ' ', minWidth: '100px', router: 'quitDetail', routerId: 'id', sortable: 'custom' },
{
prop: 'resignationUserName',
label: ' ',
router: 'employeeDetail',
routerId: 'resignationUserId',
sortable: 'custom'
},
{ prop: 'departName', label: ' ', minWidth: '100px', sortable: 'custom' },
{ prop: 'jobRole', label: ' ', sortable: 'custom' },
{
prop: 'onbordingTime',
label: ' ',
formatData: function(val) {
let date = new Date(val);
return appMain.formatDate(date, 'yyyy-MM-dd');
},
sortable: 'custom'
},
{
prop: 'resignationTime',
label: ' ',
formatData: function(val) {
let date = new Date(val);
return appMain.formatDate(date, 'yyyy-MM-dd');
},
minWidth: '100px',
sortable: 'custom'
},
{ prop: 'resignationReason', label: ' ', minWidth: '100px', sortable: 'custom' },
{ prop: 'status', label: ' ', minWidth: '100px', sortable: 'custom' }
],
tableData: [],
multipleSelection: [],
};
},
methods: {
//
selectFun(data) {
this.multipleSelection = data.backData;
},
//
sortChange(data) {
let column = data.backData;
//
if (column.order) {
//
if (column.order === 'descending') {
// this.query.sortColumn = column.prop + ' ' + 'desc';
} else {
// this.query.sortColumn = column.prop;
}
} else {
//
// this.query.sortColumn = '';
}
//
},
//
pageChange(data) {
this.pagination = data.backData;
console.log('pageChange:', this.pagination);
// --
},
}
};
</script>
class appMain {
}
//
formatDate(date, fmt) {
var date = new Date(date)
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
};
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + '';
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str));
}
}
return fmt;
};
padLeftZero(str) {
return ('00' + str).substr(str.length);
}
export default new appMain()