1. Tant qu'il y a une erreur sur la page dans ce cadre, 404 ou une interface d'erreur effrayante apparaîtra.
Par exemple, si l'attribut prop du formulaire est introuvable ou est incohérent dans l'objet de retour de la fonction de données , 404 sera signalé.
2. Utilisez un dictionnaire pour traduire le dictionnaire.
Dans le fichier plugins/methods.js, ajoutez
// traduction du dictionnaire
selectDictLabel (données, valeur, k = 'valeur', v = 'nom') {
var actions = []
Objet.keys(datas).some(key => {
if (datas[key][k] == '' + valeur) {
actions.push(données[clé][v])
retourner vrai
}
})
retourner actions.join('')
},
Cité sur la page vue :
<el-table-column label="信息" min-width="170">
<template slot-scope="{ rangée }">
<el-popover
placement = "top-start"
largeur="100"
déclencheur = "survol"
>
<div v-for="item in row.batteryList" :key="item.id">
{ { dictArrStr.BATTERY_TYPE_str }}
{ { numéro.article }}
</div>
<el-button size="small" type="text" slot="reference">{ { row.num || '-' }}</bouton-el>
</el-popover>
</template>
</el-table-colonne>
données() {
retour {
dictArr : {
BATTERY_TYPE : [], // tapez
TRADE_STATUS_RECOVERY : [],
},
dictArrStr : {
BATTERY_TYPE_str : '', // traduction de type
TRADE_STATUS_RECOVERY_str : ',
}
}
},
Dans la fonction méthodes :
_loadData() {
// Appel de l'interface de liste de dictionnaires
this.getDictData('TRADE_STATUS_RECOVERY,BATTERY_TYPE')
},
getDictData(disques) {
// Récupère l'interface de la liste des dictionnaires
Portal.dictTypes(discts).then((resp) => {
this.dictArr = resp.data
this.dictArrStr.BATTERY_TYPE_str = this.methods.selectDictLabel(this.dictArr.BATTERY_TYPE, row.batteryType)
})
},
3. Ajoutez un menu de barre latérale.
1) Créez un nouveau dossier A et les sous-fichiers associés dans les pages et nommez-les A1, A2.
2) Dans Assets/js/centerMenu.js, ajoutez le routage au fichier.
évaluer l'achat : [
{
"entité": {
"identifiant": 1,
"parentMenuId": 0,
"name": "/A/A1", // adresse de routage
"icon": "el-icon-rank",
"alias": "nom du menu",
"état": "ACTIVER",
"trier": 2,
"valeur": nul,
"type": "AUCUN",
"description": "",
"createUserId": 1
},
"enfants": nul
},
}
4. Comment utiliser la mise en page
1) Dans le dossier layouts, créez un fichier de layout dont le nom peut être ALayout.vue,
Recherchez ensuite la méthode data dans le fichier et modifiez-la ici :
données() {
retour {
modulesName: "Nom",
moduleMenu : "evalbuy" // Recherchez ce champ clé dans le fichier centerMenu.js et affichez le menu
}
}
2) Cliquez sur un menu. Si vous souhaitez ouvrir une nouvelle page en cliquant sur la page actuelle et garder le menu actuel en surbrillance , vous devez le définir dans la page layout/center/siderbar.vue.
actifMenu() {
// Les autres menus de routage qui ne sont pas affichés à gauche, mais les pages après le saut, souhaitent avoir un menu correspondant mis en évidence à gauche.
if (this.$route.path.includes('/center/evalsell/initiateRecyclepic')) {
this.active = '/center/evalsell/initiateRecycle' // menu de surbrillance
} else if (this.$route.path.includes('/center/evalsell/initiateTradepic')) {
this.active = '/center/evalsell/initiateTrade' // menu de surbrillance
} autre {
this.active = this.$route.path // Actualise la page pour afficher la sélection en surbrillance
}
},
5. TDK : C'est l'abréviation anglaise du titre (title), de la description (description) et des mots-clés (keyword) du site Web.
L'utilisation de tdk est due au fait que tdk est propice à l'optimisation SEO de la page. La première chose que les robots des moteurs de recherche voient après avoir exploré votre site Web est TDK.
Deux façons de définir tdk :
1) Définissez le TKD du responsable global dans nuxt.config.js
2) Vous pouvez définir le TKD de la tête sur une page séparée : définissez hid dans le fichier xxx.vue : 'name' signifie un identifiant unique. Et la définition du hid: 'name' de la page locale remplacera automatiquement le hid: 'name' global.
6. Utilisez des icônes.
1) Accédez à iconfont pour télécharger iconfont.js. Sélectionnez le symbole et téléchargez-le localement.
2) Créez un nouveau dossier de polices --iconfont dans le répertoire des ressources et placez le fichier suivant dans le dossier.
3. Introduisez dans le base.css du répertoire assets : @import '../fonts/iconfont/iconfont.css';
4. Utiliser sur la page :
<span><i class="iconfont icon-caidanshouqi"></i></span>
Expérience en gestion :
:label="$t('cms.announced.fields.title')", comment obtenir le label chinois ?
dans le module Paramètres système/Configuration de l'internationalisation.