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項目需求實現記錄(永久更新)