Vue.component(グローバルコンポーネントをカプセル化する-弾窓)
37990 ワード
1.まずvueファイルを作成し、グローバルに使用したいコンポーネントを書きます.もちろん、コンポーネントの多重性や拡張性は十分に高く、ポップアップではタイトル付き背景色などをカスタマイズする必要があります.
2.vue-componentを新規作成します.jsファイルは、グローバル登録が必要なコンポーネントを導入します.
3.共通ファイルでbaseに類似する.jsはこのように他のjsファイルメソッドライブラリのjsファイルに登録します
4.baseを導入する.jsはそれから使えます
<template>
<transition name="fade">
<div
class="v-alert g-center"
:style="{zIndex}">
<div
class="v-cont"
:class="{shadow:!hideCont}"
:style="[innerWidth]">
<div
v-if="title.trim()"
:style="[{backgroundColor:bgColorTit,color:cancelCol},titleStyle]"
class="title g-font18">
{{title}}
<span class="title-data">{{titleData}}span>
div>
<div
v-if="isCancel"
class="v-cancel">
<div
class="cancel-icon"
:style="{color:cancelCol}"
@click="cancel">
div>
div>
<slot name="slot3">slot>
<div
v-if="!hideCont"
:style="styles"
class="content">
<slot>slot>
div>
<slot name="slot2">slot>
div>
<div
class="g-fixed alert-wrap"
@click="$emit('cancel')"
:style="{backgroundColor:bgWrapColor}">div>
div>
transition>
template>
<script>
export default {
name: "v-alert",
props: {
title: {default: ""},
// titFontSize:{default: '16'},
bgColorTit: {default: "#40404C"},
bgColor: {default: "#fff"}, //
bgWrapColor: {default: "rgba(42, 47, 59, 0.6)"}, //
cancelCol: {default: "#fff"}, //
width: {required: true, type: Number}, //
minWidth: {type: Number, default: 0},
isCancel: {type: Boolean, default: true}, //
titleData: {default: ""},
hideCont: {type: Boolean, default: false}, // cont
zIndex: {default: 2000},
styles: {
default() {
return {};
},
type: Object
},
titleStyle: {
default() {
return {};
},
type: Object
},
},
components: {},
computed: {
innerWidth() {
let dfu = {
backgroundColor: this.bgColor
};
this.minWidth > 0
? dfu.minWidth = `${this.minWidth}px`
: dfu.width = `${this.width}px`;
return dfu;
}
},
methods: {
cancel() {
this.$emit("cancel");
}
},
mounted() {
document.addEventListener(
"keydown",
event => {
let keyCode = this.$_lib.getKeycode(event);
if (keyCode === 'Escape' || keyCode === 27) this.$emit("cancel");
},
false
);
}
};
</script>
2.vue-componentを新規作成します.jsファイルは、グローバル登録が必要なコンポーネントを導入します.
import VAlert from './v-alert'; //
import VScrollBar from './v-scroll-bar.vue'; //
import VNodata from './v-nodata.vue'; //
import VLoding from './v-loding.vue'; //loding
import VCodeInput from './v-code-input.vue'; //
import VSearch from './v-search.vue'; //
export default {
install(Vue) {
Vue.component('VSearch', VSearch);
Vue.component('VAlert', VAlert);
Vue.component('VScrollBar', VScrollBar);
Vue.component('VNodata', VNodata);
Vue.component('VCodeInput', VCodeInput);
Vue.component('VLoding', VLoding);
}
};
3.共通ファイルでbaseに類似する.jsはこのように他のjsファイルメソッドライブラリのjsファイルに登録します
import vueComponent from "../middleware/components/vue-component";
Vue.use(vueComponent);
4.baseを導入する.jsはそれから使えます
<v-alert
v-if="is_alert"
@cancel="is_alert=false"
bg-color-tit="#40404C"
cancel-col="#fff"
:title="$_lang(' ')"
:width="680">
</v-alert>