1. 程式人生 > >Vue項目需求實現記錄(永久更新)

Vue項目需求實現記錄(永久更新)

cti 友好 設置 註意點 獲取 date() true .com ida

1.上傳圖片功能:   技術分享圖片
  1. 接口地址需要全稱;
  2. 需要單獨設置請求頭的token;
  3. 設置上傳的文件字段名

2.表單校驗功能:

  技術分享圖片

  1. 在el-form標簽中定義:rules="rules";ref="reference"
  2. 在el-form-item定義prop="name";
  3. 在選項data中定義rules校驗規則;
  4. 在提交方法中檢查用戶行為
 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.省市縣的二級聯動功能:

  技術分享圖片

  1. 獲取到省的數據;
  2. 在省的select中定義change事件,同時將選中的省id傳過去;
  3. 請求市的數據
  教程地址: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
  1. 安裝npm install vuedraggable -S(可能需要安裝Sortable)
  2. 引用import draggable from ‘vuedraggable‘
  3. 註冊組件components: { draggable },
  4. 通過draggable標簽來使用
  5. 調用update方法,此方法事件對象返回新索引和舊索引,同樣數據是響應式的.

  

5.打印頁面功能:

  技術分享圖片

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

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

  1. min.js中引入
  2. import Print from ‘@/plugs/print‘
  3. 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>

  未完,待續......

Vue項目需求實現記錄(永久更新)