1. Siempre que haya un error en la página en este marco, aparecerá 404 o una interfaz de error aterradora.
Por ejemplo, si el atributo prop del formulario no se puede encontrar o es inconsistente en el objeto de retorno de la función de datos , se informará 404.
2. Utilice un diccionario para traducir el diccionario.
En el archivo plugins/methods.js, agregue
// traducción del diccionario
selectDictLabel(datos, valor, k = 'valor', v = 'nombre') {
var acciones = []
Objeto.claves(datos).algunos(clave => {
if (datos[clave][k] == '' + valor) {
acciones.push(datos[clave][v])
devolver verdadero
}
})
devolver acciones.join('')
},
Citado en la página de vue:
<el-table-column label="信息" min-width="170">
<plantilla slot-scope="{ fila }">
<el-popover
colocación = "inicio superior"
ancho="100"
disparador = "flotar"
>
<div v-for="elemento en fila.batteryList" :key="item.id">
{ { dictArrStr.BATTERY_TYPE_str }}
{ { artículo.num }}
</div>
<el-button size="small" type="text" slot="reference">{ { fila.num || '-' }}</el-botón>
</el-popover>
</plantilla>
</el-tabla-columna>
datos() {
devolver {
dictArr: {
TIPO_BATERÍA: [], // tipo
TRADE_STATUS_RECOVERY:[],
},
dictArrStr: {
BATTERY_TYPE_str: '', // escribe traducción
TRADE_STATUS_RECOVERY_str: '',
}
}
},
Dentro de la función de métodos:
_Cargar datos() {
// Llama a la interfaz de la lista del diccionario
this.getDictData('TRADE_STATUS_RECOVERY,BATTERY_TYPE')
},
getDictData(discos) {
// Obtener interfaz de lista de diccionario
Portal.dictTypes(disctos).luego((resp) => {
this.dictArr = resp.datos
this.dictArrStr.BATTERY_TYPE_str = this.methods.selectDictLabel(this.dictArr.BATTERY_TYPE, fila.batteryType)
})
},
3. Agregue un menú de barra lateral.
1) Cree una nueva carpeta A y subarchivos relacionados en las páginas y asígneles el nombre A1, A2.
2) En activos/js/centerMenu.js, agregue enrutamiento al archivo.
evaluación de compra: [
{
"entidad": {
"identificación": 1,
"parentMenuId": 0,
"nombre": "/A/A1", // dirección de enrutamiento
"icon": "el-icon-rank",
"alias": "nombre del menú",
"estado": "HABILITAR",
"ordenar": 2,
"valor": nulo,
"tipo": "NINGUNO",
"descripción": "",
"crearID de usuario": 1
},
"niños": nulo
},
}
4. Cómo utilizar el diseño
1) En la carpeta de diseños, cree un archivo de diseño cuyo nombre puede ser ALayout.vue,
Luego busque el método de datos en el archivo y modifíquelo aquí:
datos() {
devolver {
moduleName: "Nombre",
moduleMenu: "evalbuy" // Busque este campo clave en el archivo centerMenu.js y represente el menú
}
}
2) Haga clic en un menú. Si desea abrir una nueva página haciendo clic en la página actual y mantener el menú actual resaltado , debe configurarlo en la página diseño/centro/siderbar.vue.
menú activo() {
// Otros menús de enrutamiento que no se muestran a la izquierda, pero las páginas después del salto, quieren tener un menú correspondiente resaltado a la izquierda.
if (this.$route.path.includes('/center/evalsell/initiateRecyclepic')) {
this.active = '/center/evalsell/initiateRecycle' // menú resaltado
} else if (this.$route.path.includes('/center/evalsell/initiateTradepic')) {
this.active = '/center/evalsell/initiateTrade' // menú resaltado
} demás {
this.active = this.$route.path // Actualiza la página para mostrar la selección resaltada
}
},
5. TDK: Es la abreviatura en inglés del título del sitio web (title), descripción (description) y palabras clave (keyword).
El uso de tdk se debe a que tdk favorece la optimización SEO de la página. Lo primero que ven las arañas de los motores de búsqueda después de rastrear su sitio web es TDK
Dos formas de configurar tdk:
1) Configure el TKD del encabezado global en nuxt.config.js
2) Puede configurar el TKD del encabezado en una página separada: configúrelo oculto en el archivo xxx.vue: 'nombre' significa un identificador único. Y configurar el hid: 'nombre' de la página local anulará automáticamente el hid: 'nombre' global.
6. Utilice iconos.
1) Vaya a iconfont para descargar iconfont.js. Seleccione el símbolo y descárguelo localmente.
2) Cree una nueva carpeta de fuentes: carpeta iconfont en el directorio de activos y coloque el siguiente archivo en la carpeta.
3. Introducir en el base.css del directorio de activos: @import '../fonts/iconfont/iconfont.css';
4. Usar en la página:
<span><i class="iconfont icon-caidanshouqi"></i></span>
Antecedentes de gestión:
:label="$t('cms.announced.fields.title')", ¿cómo obtener la etiqueta china?
en el módulo Configuración del sistema/Configuración de internacionalización.