titre du répertoire
Compréhension de Vue
Vue [prononciation /vjuː/, similaire à view] est un framework progressif pour la création d'interfaces utilisateur. Contrairement à d'autres grands frameworks, Vue est conçu pour être appliqué couche par couche de bas en haut.
La bibliothèque principale de Vue se concentre uniquement sur la couche de vue, qui est non seulement facile à utiliser, mais également facile à intégrer à des bibliothèques tierces ou à des projets existants.
D'un autre côté, lorsqu'il est combiné avec une chaîne d'outils moderne et diverses bibliothèques de support, Vue est également entièrement capable d'alimenter des applications complexes d'une seule page.
Structure du répertoire Vue
├── build # Build Related
├── mock # Données de simulation de projet
├── plop-templates # Modèle de base
├── node_modules # Toutes les dépendances du projet en cours, non portables
├── public # Ressource statique
│ │── favicon.ico # icône favicon
│ └── index.html # modèle html
├── src # code source
│ ├── api # toutes les requêtes
│ ├── actifs # ressources statiques telles que les polices de thème
│ ├── composants # global composants publics
│ ├── directive # Directive globale
│ ├── filtres # Filtre global
│ ├── icônes # Toutes les icônes svg du projet
│ ├── lang # Langage d'internationalisation
│ ├── layout # Disposition globale
│ ├── routeur # Routage
│ ├── magasin # Gestion globale du magasin
│ ├── styles # Style global
│ ├── utils # Méthode publique globale
│ ├── fournisseur # Fournisseur public
│ ├── vues # vues toutes les pages
│ ├── Page d'entrée App.vue #
│ ├── main.js # Initialisation du composant de chargement du fichier d'entrée, etc.
│ └── permission.js # Gestion des autorités
├── tests # Test
├── .env.xxx # Configuration des variables d'environnement
├── .eslintrc.js # Élément de configuration eslint
├── .babelrc # configuration babel-loader
├── .travis.yml # configuration automatique CI
├── vue.config.js # configuration vue-cli
├── postcss.config.js # configuration postcss
└ ── package.json # package.json
- Démarrer l'opération locale : npm run dev
Syntaxe commune de Vue
①Critères de recherche
<!-- 搜索条件 -->
<el-row>
<el-col :span="20">
<el-form ref="queryForm" :inline="true" :model="queryForm">
<el-row :gutter="1">
<el-col :span="5">
<el-form-item prop="searchParam" class="search-param-input">
<el-input v-model="queryForm.searchParam" :placeholder="$t('empl.text.searchParam')" clearable />
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item prop="gender">
<el-select v-model="queryForm.gender" :placeholder="$t('global.text.gender')" clearable>
<el-option :label="$t('global.text.women')" value="0" />
<el-option :label="$t('global.text.male')" value="1" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item prop="lockStatus">
<el-select v-model="queryForm.lockStatus" :placeholder="$t('global.text.lockStatus')" clearable>
<el-option :label="$t('global.text.normal')" value="1" />
<el-option :label="$t('global.text.lock')" value="0" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item prop="workingStatus">
<el-select v-model="queryForm.workingStatus" :placeholder="$t('empl.text.workingStatus')" clearable>
<el-option :label="$t('global.text.onTheJob')" value="1" />
<el-option :label="$t('global.text.leaveOffice')" value="0" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item>
<el-button-group>
<el-button v-waves type="primary" icon="el-icon-search" @click.native="queryList">
{
{
$t('global.button.search') }}
</el-button>
<el-button v-waves type="primary" icon="el-icon-refresh-left" @click.native="resetQueryForm">
{
{
$t('global.button.reset') }}
</el-button>
</el-button-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-col>
<!-- 导出员工通讯录 -->
<el-col :span="2">
<el-form :inline="true">
<el-form-item class="fr">
<el-button v-waves type="primary" icon="el-icon-top-right" @click.native="handleExportEmpl">{
{
$t('empl.button.handleExport') }} </el-button>
</el-form-item>
</el-form>
</el-col>
<el-col :span="2">
<el-form :inline="true">
<el-form-item class="fr">
<el-button v-waves type="primary" icon="el-icon-plus" @click.native="handleInsert">{
{
$t('global.button.insert') }}
</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
Effet d'affichage de la page frontale :
②forme de tableau
<!-- table表格 -->
<el-table
v-loading="loadingStatus"
:data="tableDataList"
header-align="center"
highlight-current-row
style="width:100%;"
>
<!-- <el-table-column type="selection" align="center" width="50" /> -->
<el-table-column align="center" prop="code" :label="$t('empl.text.code')" />
<el-table-column align="center" :label="$t('empl.text.loginName')">
<template slot-scope="scope">
<el-link
v-clipboard:copy="scope.row.loginName"
v-clipboard:success="clipLoginNameSuccess"
:underline="false"
type="primary"
>
{
{
scope.row.loginName }}
</el-link>
</template>
</el-table-column>
<el-table-column align="center" prop="name" :label="$t('empl.text.name')" />
<el-table-column align="center" width="140" :label="$t('global.text.phone')">
<template slot-scope="scope">
<el-link
v-clipboard:copy="scope.row.phone"
v-clipboard:success="clipPhoneSuccess"
:underline="false"
type="primary"
>
{
{
scope.row.phone }}
</el-link>
</template>
</el-table-column>
<el-table-column
align="center"
:label="$t('global.text.gender')"
>
<template slot-scope="scope">
<i :style="scope.row.gender == 1 ? 'color:blue;':'color:red;'" :class="scope.row.gender == 1 ? 'el-icon-male' : 'el-icon-female'" />
</template>
</el-table-column>
<el-table-column
align="center"
:label="$t('global.text.workingStatus')"
>
<template slot-scope="scope">
<el-tag :type="scope.row.workingStatus == 0 ? 'danger' : 'primary'" v-text="scope.row.workingStatus == 0 ? $t('global.text.leaveOffice') : $t('global.text.onTheJob')" />
</template>
</el-table-column>
<el-table-column
align="center"
:label="$t('global.text.lockStatus')"
>
<template slot-scope="scope">
<el-tag :type="scope.row.lockStatus == 0 ? 'danger' : 'primary'" v-text="scope.row.lockStatus == 0 ? $t('global.text.lock') : $t('global.text.normal')" />
</template>
</el-table-column>
<el-table-column align="center" width="100" prop="entryDate" :label="$t('empl.text.entryDate')" />
<el-table-column align="center" fixed="right" :label="$t('global.text.operation')" width="300">
<template slot-scope="scope">
<template>
<el-button type="text" @click.native.prevent="handleUpdate(scope.row.id)">
{
{
$t('global.button.update') }}
</el-button>
<el-button
v-if="scope.row.workingStatus == 1"
v-points
type="text"
@click.native.prevent="handleUpdateWorkingStatus(0,scope.row.id)"
>
{
{
$t('global.button.unWorking') }}
</el-button>
<!-- <el-button
v-else
v-points
type="text"
@click.native.prevent="handleUpdateWorkingStatus(1,scope.row.id)"
>
<svg-icon icon-class="working" />
{
{
$t('global.button.working') }}
</el-button> -->
<el-button
v-points
type="text"
@click.native.prevent="handleUpdateLockStatus(scope.row.lockStatus == 1 ? 0 : 1,scope.row.id)"
>
{
{
scope.row.lockStatus == 1 ? $t('global.button.lock') : $t('global.button.unLock') }}
</el-button>
<el-button type="text" @click.native.prevent="handleDelete(scope.row.id)">{
{
$t('global.button.delete') }}</el-button>
</template>
</template>
</el-table-column>
</el-table>
Effet d'affichage de la page frontale :
③Composant de pagination
<!-- 分页组件 -->
<pagination
v-show="page.total>0"
:total="page.total"
:page.sync="page.pageNum"
:limit.sync="page.pageSize"
@pagination="queryList"
/>
Effet d'affichage de la page frontale :
④Ajouter/modifier une boîte modale
<!-- 新增/编辑模态框 -->
<el-dialog
width="60%"
:title="editModal.title"
:visible.sync="editModal.dialogVisible"
:before-close="handleCloseModal"
:close-on-click-modal="editModal.closeOnClickModal"
>
<el-form ref="editModalForm" :model="editModal.form" :rules="formRules">
<el-row>
<el-col :span="10">
<el-form-item :label="$t('empl.text.loginName')" prop="loginName" :label-width="editModal.formLabelWidth">
<el-input v-model="editModal.form.loginName" :placeholder="$t('user.placeholder.loginName')" :disabled="editModal.editState == 2" />
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item :label="$t('global.text.gender')" prop="gender" :label-width="editModal.formLabelWidth">
<!-- <el-input v-model="editModal.form.gender" /> -->
<el-radio-group v-model="editModal.form.gender">
<el-radio :label="1">{
{
$t('global.text.male') }}</el-radio>
<el-radio :label="0">{
{
$t('global.text.women') }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item :label="$t('empl.text.name')" prop="name" :label-width="editModal.formLabelWidth">
<el-input v-model="editModal.form.name" />
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item :label="$t('global.text.phone')" prop="phone" :label-width="editModal.formLabelWidth">
<el-input v-model="editModal.form.phone" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item :label="$t('empl.text.code')" prop="code" :label-width="editModal.formLabelWidth">
<el-input v-model="editModal.form.code" />
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item :label="$t('empl.text.entryDate')" prop="entryDate" :label-width="editModal.formLabelWidth">
<template>
<el-date-picker v-model="editModal.form.entryDate" type="date" value-format="yyyy-MM-dd" />
</template>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item :label="$t('global.text.email')" prop="email" :label-width="editModal.formLabelWidth">
<el-input v-model="editModal.form.email" />
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item :label="$t('global.text.wDesc')" prop="wDesc" :label-width="editModal.formLabelWidth">
<el-input v-model="editModal.form.wDesc" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button plain @click="handleCloseModal">{
{
$t('global.button.cancel') }}</el-button>
<el-button v-waves v-points type="primary" @click.native="handleCheckEditData">{
{
$t('global.button.confirm') }}</el-button>
</div>
</el-dialog>
<!-- 新增/编辑模态框 -->
Effet d'affichage de la page frontale :
⑤ Méthode d'attribut calculé
computed: {
formRules() {
return {
code: [
{
required: true, message: this.$t('empl.validateTips.required.code'), trigger: 'blur' },
{
max: 10, message: this.$t('empl.validateTips.max.code'), trigger: 'blur' }
],
loginName: [
{
required: true, message: this.$t('empl.validateTips.required.loginName'), trigger: 'blur' },
{
max: 10, message: this.$t('empl.validateTips.max.loginName'), trigger: 'blur' }
],
name: [
{
required: true, message: this.$t('empl.validateTips.required.name'), trigger: 'blur' },
{
max: 50, message: this.$t('empl.validateTips.max.name'), trigger: 'blur' }
],
phone: [
{
required: true, message: this.$t('global.validateTips.required.phone'), trigger: 'blur' }
],
entryDate: [
{
required: true, message: this.$t('empl.validateTips.required.entryDate'), trigger: 'blur' }
],
email: [
{
message: this.$t('global.validateTips.max.email'), trigger: 'blur' },
{
max: 30, message: this.$t('global.validateTips.max.name'), trigger: 'blur' }
]
}
}
}
Effet d'affichage de la page frontale :
⑥Vous pouvez copier des événements en un seul clic
// 复制手机号到剪切板事件
clipPhoneSuccess() {
this.$message({
message: this.$t('global.message.clipPhone'),
type: 'success',
duration: 1500
})
}
Remarque :
les likes, les commentaires et les réimpressions sont les bienvenus. Veuillez donner le lien vers le texte original à un endroit évident sur la page de l'article
. Ceux qui savent, merci d'avoir lu mon article dans la grande foule.
Où est la signature sans personnalité !
Pour plus de détails, suivez- moi
et continuez à mettre à jour
| © 2021 12 - Guyu.com | 【Copyright Tous droits réservés】 |