之前一直用Jquery 然后重点是后台数据库相关开发,虽然之前有了解过Vue,但是一直没在实际工作用到。最近正好有机会使用,结合饿了么,简单总结,方便之后使用。
安装/命令
工欲善其事,必先利其器!
开发工具用的是VS code
使用之前肯定是要配置一些环境。以及一些常用的创建项目打包启动的命令
这些都可以搜一下或者去菜鸟教程看一下,照着来一边。
模板/语法
毕竟是前端框架,第一步就是了解框架的结构模板是什么样子的,有什么,写什么,写在哪。
<template>
<div></div>
//内容 只能出现一次template关键字块
</template>
<script>
// 引入组件
import ucSearch from './components/Search.vue'
import ucGridView from './components/GridView.vue'
// 声明信息
export default {
components: { ucSearch,ucGridView },
data() {
return {
grid: { list: [], index: 1, size: 10, total: 0, query: {}, ids: [], loading: false }
}
},
methods: {
}
}
</script>
<style>
//样式
</style>
样式
1.菜单标题
<div class="breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item>销售管理</el-breadcrumb-item>
<el-breadcrumb-item>线上卡册申请单</el-breadcrumb-item>
</el-breadcrumb>
</div>
<style>
.breadcrumb {
background-color: rgb(245, 245, 245);
margin-top: -10px;
margin-left: -10px;
margin-right: -10px;
margin-bottom: 10px;
padding: 16px;
}
</style>
2.行元素
<el-row :gutter="15">
gutter是指栅格间间隔,offset是指栅格左侧的间隔格数
<el-col :span="8">
span 应该是宽度间隔
3.form表单数据元素 ref validate resetFields
<el-form ref="elForm" :model="Query" size="small" label-width="100px">
Vue 为简化DOM获取方法提出了ref 属性和$ refs 对象。
一般的操作流程是:ref 绑定控件,$refs 获取控件
submitForm() {
this.$refs["elForm"].validate((valid) => {
if (!valid) return;
// TODO 提交表单
this.grid.index = 1;
this.search();
});
},
resetForm() {
this.$refs["elForm"].resetFields();
this.Query.ApplyBeginDate="";
this.Query.ApplyEndDate="";
this.Query.CardType=null;
},
调用validate()校验时,需要prop属性绑定校验项的字段名,如下所示,如果不绑定prop=“ApplyManName” 就不校验此项,如果是自定义规则 if else 一定都要写 不屑else 检验就不过去的
<el-form-item label="申请人" prop="ApplyManName">
<el-input v-model="Query.ApplyManName" clearable></el-input>
</el-form-item>
- 输入框
<el-form-item label="大客户名称" prop="BigCustomerName">
<el-input v-model="Query.BigCustomerName" clearable @keyup.native="replace1"></el-input>
</el-form-item>
replace1(){
if(this.cardnumberdata.StartNumber!=""&&this.cardnumberdata.StartNumber!="undefined")
{
this.cardnumberdata.StartNumber=this.cardnumberdata.StartNumber.replace(/\D/g,'');
}
},
clearable 属性是 输入内容后面出现 ❌清除用
keyup.native 是 输入及时校验验证
- 下拉框
<el-select v-model="Query.CardType" placeholder="请选择"
clearable
:style="{ width: '40%' }"
>
<el-option
v-for="item in CardTypeList"
:key="item.Key"
:label="item.Value"
:value="item.Key"
>
</el-option>
</el-select>
6.时间控件
<el-date-picker
v-model="Query.CreateTime"
type="daterange"
unlink-panels
range-separator="To"
start-placeholder="开始时间"
end-placeholder="截止时间"
format="yyyy-MM-dd"
:shortcuts="shortcuts"
:style="{ width: '100%' }"
></el-date-picker>
//注意日期区间 model是绑定的一个数组
if (this.Query.Time != "") {
var date1 = new Date(this.Query.Time[0]);
var date2 = new Date(this.Query.Time[1]);
var startTime =
date1.getFullYear() +
"-" +
(date1.getMonth() + 1) +
"-" +
date1.getDate();
var endTime =
date2.getFullYear() +
"-" +
(date2.getMonth() + 1) +
"-" +
date2.getDate();
}
7.按钮
<el-button
type="primary"
icon="el-icon-search"
@click="search"
>开始查询</el-button
>
<el-button icon="el-icon-delete" @click="resetForm"
>清空条件</el-button
>
8.表格 展示列表
<el-table :data="grid.list" style="width: 100%">
<el-table-column prop="SysNo" label="编号" width="80"></el-table-column>
<!-- 分页组件 -->
<div class="pagination-custom">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="grid.index"
:page-sizes="[10, 20, 30]"
:page-size="grid.size"
layout="total, sizes, prev, pager, next, jumper"
:total="grid.total"
>
</el-pagination>
</div>
.pagination-custom {
text-align: left;
background-color: rgb(245, 245, 245);
padding: 5px;
border: 1px solid #ebeef5;
border-top: 0px;
}
9.单选按钮
<el-form-item label="是否征税">
<el-radio disabled v-model="formData.IsPayTaxes" :label="true">是</el-radio>
<el-radio disabled v-model="formData.IsPayTaxes" :label="false">否</el-radio>
</el-form-item>
10.弹出框
<el-dialog title="详情" :visible.sync="dialogVisible" width="60%">
10.超链接 a标签
<el-form-item label="附件信息">
<div class="block" v-for="fit in AttachmentList" :key="fit.SysNo">
<span class="demonstration">{{ fit.Name }}</span>
<a
:href="fit.Url"
target="_blank"
:download="fit.Name"
>查看</a>
</div>
</el-form-item>
10.在表格里面 内容有条件显示不同内容 slot-scope
<el-table-column
label="是否征税"
align="center"
min-width="100"
>
<template
slot-scope="scope"
>
<span v-if="scope.row.IsPayTaxes==true">是</span>
<span v-else>否</span>
</template>
</el-table-column>
10.数组操作 场景:在页面层面操作显示 表格数组内容
需要知道1.添加往数组添加内容 2.删除找到具体信息删除
<el-table
:data="cardnumberList"
ref="multipleTable"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55"
prop="SysNo"
/>
//添加数组
this.cardnumberList.push(res.value);
//删除数组 通过方法来将选择内容映射multipleSelection
handleSelectionChange(val) {
// 获取选中的 table中的数据
this.multipleSelection = val;
},
this.multipleSelection.forEach(t=>{
this.cardnumberList.splice(this.cardnumberList.indexOf(t),1);
})
10.重复div内容 思路 其实就是 相当于数组循环 只不过对象或多或少,里面的元素还是一样,可能根据一些下拉选择来确定v-if 的条件
<div class="group">
<div
v-for="(itemdata, index) in itemsInfo"
v-bind:key="index"
style="
border: 1px solid #dcdfe6;
padding: 15px;
margin: 10px;
border-radius: 12px;
"
>
//下面就是一个个元素
showChangge() {
//广告位切换影响模板数量就对数组进行重置
if (this.savedata.ProportionType == 1) {
this.itemsInfo = [{}];
} else if (this.savedata.ProportionType == 2) {
this.itemsInfo = [{}, {}];
} else if (this.savedata.ProportionType == 3) {
this.itemsInfo = [{}, {}, {}];
}
},
10.图片上传 组件 uploadfile
<!-- 图片配置 -->
<el-row v-if="itemdata.JumpType">
<el-col :span="3">
<el-form-item label="配置图片"> </el-form-item>
</el-col>
<el-col :span="24" style="margin-bottom: 15px">
<uc-upload-file
:ref="index"
v-model="itemdata.Image"
></uc-upload-file>
</el-col>
</el-row>
info.Image = {
/* 上传按钮显示名称 */
btnlabel: "点击上传图片",
/* 服务器目录 */
pre: "erp/images/dic00001/",
/* 0:上传ftp,1:上传七牛 2:上传七牛私有云*/
uploadmode: 1,
/* 单个文件限制大小(单位:kb) */
maxsize: 300,
/* 上传文.j件类型支持 */
accepts: ".jpg,.png,.jpeg",
/* 可多选文件 */
multiple: false,
/* 上传限制文件数量 */
limit: 1,
/* 对外输出只读文件列表 */
// readOnlyFileList: [],
fileList: [
{
url: info.ImageUrl,
name: info.ImageName,
},
],
/* 文件列表显示模式, text:列表 picture: 图片列表 picture-card: 图片卡片 */
mode: "picture",
readOnly: this.readonly,
lockwidth: checkWidth, //限制宽
lockheight: checkHeight,//限制高
};
11.多选框带样式
<el-checkbox
:indeterminate="isIndeterminate"
v-model="Query.CheckAll"
@change="handleCheckAllChange"
>全选</el-checkbox
>
<el-checkbox-group
v-model="Query.SitesCodes"
@change="sitesCodesChangge"
style="margin-left: 10px"
fill="#1ab394"
>
<el-checkbox-button
v-for="(item, index) in options"
:key="index"
:label="item.value"
>{{ item.label }}</el-checkbox-button
>
</el-checkbox-group>
sitesCodesChangge(value) {
//选择自己 就看都选上了 把isIndeterminate 样式给ture
let checkedCount = value.length;
this.Query.CheckAll = checkedCount === this.options.length;
this.isIndeterminate =
checkedCount > 0 && checkedCount < this.Query.SitesCodes.length;
// console.log(value);
console.log(this.Query.SitesCodes);
},
handleCheckAllChange(val) {
//全选 就看val是ture/false 给到数组
var allSiteCodes = [];
for (let index = 0; index < this.options.length; index++) {
const element = this.options[index];
allSiteCodes.push(element.value);
}
this.Query.SitesCodes = val ? allSiteCodes : [];
this.isIndeterminate = false;
},