directory title
Understanding of Vue
Vue [pronunciation /vjuː/, similar to view] is a progressive framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up.
Vue's core library only focuses on the view layer, which is not only easy to use, but also easy to integrate with third-party libraries or existing projects.
On the other hand, when combined with a modern toolchain and various supporting libraries, Vue is also fully capable of powering complex single-page applications.
Vue directory structure
├── build # Build related
├── mock # Project mock simulation data
├── plop-templates # Basic template
├── node_modules # All dependencies of the current project, not portable
├── public # Static resource
│ │── favicon. ico # favicon icon
│ └── index.html # html template
├── src # source code
│ ├── api # all requests
│ ├── assets # static resources such as theme fonts
│ ├── components # global public components
│ ├── directive # Global directive
│ ├── filters # Global filter
│ ├── icons # All svg icons of the project
│ ├── lang # Internationalization language
│ ├── layout # Global layout
│ ├── router # Routing
│ ├── store # Global store management
│ ├── styles # Global style
│ ├── utils # Global public method
│ ├── vendor # Public vendor
│ ├── views # views all pages
│ ├── App.vue # entry page
│ ├── main.js # Entry file loading component initialization, etc.
│ └── permission.js # Authority management
├── tests # Test
├── .env.xxx # Environment variable configuration
├── .eslintrc.js # eslint Configuration item
├── .babelrc # babel-loader configuration
├── .travis.yml # automatic CI configuration
├── vue.config.js # vue-cli configuration
├── postcss.config.js # postcss configuration
└── package.json # package.json
- Start local operation: npm run dev
Vue common syntax
①Search criteria
<!-- 搜索条件 -->
<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>
Front-end page display effect:
②table form
<!-- 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>
Front-end page display effect:
③Pagination component
<!-- 分页组件 -->
<pagination
v-show="page.total>0"
:total="page.total"
:page.sync="page.pageNum"
:limit.sync="page.pageSize"
@pagination="queryList"
/>
Front-end page display effect:
④Add/edit modal box
<!-- 新增/编辑模态框 -->
<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>
<!-- 新增/编辑模态框 -->
Front-end page display effect:
⑤ Calculated attribute method
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' }
]
}
}
}
Front-end page display effect:
⑥You can copy events with one click
// 复制手机号到剪切板事件
clipPhoneSuccess() {
this.$message({
message: this.$t('global.message.clipPhone'),
type: 'success',
duration: 1500
})
}
Note:
Likes, comments, and reprints are welcome. Please give the link to the original text in an obvious place on the article page
. Those who know, thank you for reading my article in the vast crowd.
Where is the signature without personality!
For details, please follow me
and continue to update
| © 2021 12 - Guyu.com | 【Copyright All Rights Reserved】 |