Vue项目需求实现记录(永久更新)

佚名 6年前 (2019-04-11) 随笔 1675人围观抢沙发百度已收录

1.上传图片功能: 　　

接口地址需要全称;
需要单独设置请求头的token;
设置上传的文件字段名

2.表单校验功能:

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

在el-form标签中定义:rules="rules";ref="reference"
在el-form-item定义prop="name";
在选项data中定义rules校验规则;
在提交方法中检查用户行为

 1 //定义props
 2 rules: {
 3         name: [
 4           { required: true, message: "请输入企业名称", trigger: "blur" }
 5   ]}
 6 
 7 //方法
 8 submitk() {
 9       this.$refs.reference.validate(valid => {
10         if(valid) {
11           自定义操作表单数据代码;
12         }
13       })
14     },

　　注意点:①定义prop的时候,值要求是属于form绑定的model数据对象里面,同时名字要一样; 　　　　　②选项中定义rules要在表单的数据之后

3.省市县的二级联动功能:

获取到省的数据;
在省的select中定义change事件,同时将选中的省id传过去;
请求市的数据

　　教程地址:https://blog.csdn.net/liuxin_1991/article/details/81502227

 1 // 获取地区,默认id=0
 2 async getCity(id) {
 3 let _this = this;
 4 // 如果选择省,将市的select设置为空
 5 this.form.city = "";
 6 const res = await this.$axios.post(`/region/list`, { region_id: id });
 7 if (id == 0) {
 8 // 如果 id=0 得到的数据为省的
 9 _this.provinceList = res.data;
10 let id = this.form.province;
11 // 再同时获取市的数据
12 _this.$axios
13 .post(`/region/list`, { region_id: id })
14 .then(function(res) {
15 _this.cityList = res.data;
16 });
17 } else {
18 // 如果 id!=0 得到的数据为市的
19 this.cityList = res.data;
20 }
21 },

4.拖动排序功能:

　　使用Sortable.js,对vue不友好,拖拽有时候乱跳;改用vuedraggable插件,此插件依赖Sortable.js.

　　教程地址:https://blog.csdn.net/IT_HLM/article/details/79541741 　　教程地址:https://blog.csdn.net/zhaoxiang66/article/details/81003094

安装npm install vuedraggable -S(可能需要安装Sortable)
引用import draggable from 'vuedraggable'
注册组件components: { draggable },
通过draggable标签来使用
调用update方法,此方法事件对象返回新索引和旧索引,同样数据是响应式的.

5.打印页面功能:

　　使用print插件 https://github.com/xyl66/vuePlugs_printjs

教程地址::https://blog.csdn.net/peiyongwei/article/details/82460709

在min.js中引入
import Print from '@/plugs/print'
Vue.use(Print) // 注册

 1  <template>
 2 
 3  <section ref="print">
 4 
 5  　　<要打印内容/>
 6 
 7  <div class="no-print">不要打印我</div>
 8 
 9  </section>
10 
11  </template>
12 
13  this.$print(this.$refs.print) // 调用方法使用

6.vue-router 在新窗口打开页面的功能

　　1.<router-link>标签实现新窗口打开

<router-link target="_blank" :to="{path:'/home',query:{id:'1'}}">新页面打开home页</router-link>

　　2.编程式导航：

print_schedule() {
      let id = this.id;
      const { href } = this.$router.resolve({
        name: `print_schedule`,
        params: {
          id: id
        }
      });
      window.open(href, "_blank");
    },

7.Vue日历组件的功能

　　引用的是他人写好的组件: https://github.com/herozhou/vue-order-calendar

　　在他的基础上增加了功能,实现了备注功能.实现方法是:后台返回的备注数据中,要求带有数据为天数的字段,然后使用-for循环,判断,渲染

1 <!-- 遍历备注,判断日期是否一致 -->
2 <div v-for="(item,i) in remarksList" :key="i">
3   <el-tooltip placement="top">
4       <div slot="content" style="max-width:200px;">{{item.content}}</div>
5       <div class="remarks" v-if="dayobject.day.getDate() == item.day">{{item.content}}</div>
6   </el-tooltip>
7 </div>

　　未完,待续......