# vue-notes

**Repository Path**: fqcto/vue-notes

## Basic Information

- **Project Name**: vue-notes
- **Description**: vue开发中的实战经验笔记
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-08-02
- **Last Updated**: 2021-11-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue开发笔记

# gitlab上克隆远程分支到本地
``` 
修改配置
git config --global user.name
git config --global user.email
如：git config --global user.name "yang"
    git config --global user.email "yang@XX.com"
看我的操作：
进入到想要放项目的目录，例中的git_out目录就是我放项目的目录克隆远程项目 git clone
如：git clone http://XXX.XXX/sq-group/XXX.git克隆完成之后，可以看见项目名称，进去项目之后，可以看见一些git相关文件进入项目所在（即.git所在文件夹）内

查看远程分支
git branch -r
如：建立本地对应分支
git checkout --track 或者 git checkout -b
如：git checkout --track origin/yang
```
## el-table表格自适应高度
```
 <el-table
      :data="dataList"
      ref="table"
      :height="tableHeight"
      style="width:100%"
      v-loading="Loading"
      :default-sort="{ prop: 'date', order: 'descending' }"
      @sort-change="sortColumn"
    >

 tableHeight: 50

 this.$nextTick(function() {
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 150;
      console.log("1")
      console.log(this.tableHeight)
      console.log("2")

      // 监听窗口大小变化
      let self = this;
      window.onresize = function () {
        self.tableHeight = window.innerHeight - self.$refs.table.$el.offsetTop - 150;
      }
    }) 
 
```

## css3 置灰filter: grayscale(100%)
```
.gray { 
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);

  filter: grayscale(100%);
//上面代码是兼容火狐与谷歌的样式
//下面代码是兼容ie9以下浏览器的样式，包括ie9
  filter: gray;
}
```

## input只能输入正整数
```
<input size="small ml-10" v-model="form.people" type="number" style="width:50px;" oninput="if(this.value=='00'){this.value='0';}else{this.value=this.value.replace(/[^0-9]/g,'')}" />

```
# Vue 复制到粘贴板
> 使用 vue-clipboard2 复制到粘贴板
## 1.安装vue-clipboard2
> npm install --save-dev vue-clipboard2
## 2.main.js中添加
> 复制到粘贴板插件
## import VueClipboard from 'vue-clipboard2'
> VueClipboard.config.autoSetContainer = true
## Vue.use(VueClipboard)

### 好多代码其实用重复无用浪费资源,记住所有块级元素的div都要写  overflow: hidden 不然影响文本流


## 3.文件中使用
```
<template>
   <div>
        <input type="text"  v-model="copyUrl" />
        <button type="button" class="btn" 
            v-clipboard:copy="copyUrl" 
            v-clipboard:success="onCopy" 
            v-clipboard:error="onError">
            复制链接
        </button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                copyUrl:'http://baidu.com'
            };
        },
        methods: {
            onCopy(e) {
                console.log(复制成功！);
            },
            onError(e) {
                console.log(复制失败！);
            }
        }
    };
</script>
```


## 插槽
 ```
 <el-table-column label="性别">
    <template slot-scope="props">
        <span>{{props.row.sex == 1?'男':'女'}}</span>
    </template>
</el-table-column>
```


#### 插槽--可以任意调取值到指定行进行判断操作
```
<el-table-column label="状态" > 
    <template slot-scope="props" >
        <span>{{props.row.status}}</span>
    </template>
</el-table-column>
<el-table-column label="操作" class="operation">
    <template slot-scope="props">
        <div class="operation">
        <span @click="dialogFormVisible = true" v-if="props.row.status == 'PASS'?false:true">审核 /</span>
        <span @click="del">删除</span>
        </div>
    </template>
</el-table-column>
```

#### 2
```
<el-table-column label="性别">
    <template slot-scope="props">
        <span>{{props.row.sex == 1?'男':'女'}}</span>
    </template>
</el-table-column>
```


###3 还可以插入过滤器
```
<el-table-column label="等级">
    <template slot-scope="props">
        <span>{{props.row.level | levelFilter}}</span>
    </template>
</el-table-column>
```


### vue中如何传参--aa(props.row.id,props.row.adviserId)--
```
<el-table-column label="操作" class="operation">
    <template slot-scope="props">
        <span @click="aa(props.row.id,props.row.adviserId)" v-if="props.row.status == 'PASS'?false:true">审核 /</span>
    </template>
</el-table-column>
```


#### 判断为何值时，审核显示或隐藏
```
<template slot-scope="props">
    <div class="operation">
        <span @click="aa(props.row.id,props.row.adviserId)" v-if="(props.row.status == 'FAIL' || props.row.status=='PASS')?false:true">审核 /</span>
        <span @click="del">删除</span>
    </div>
</template>
```

#### 4过滤器案例
```
filters:{
    levelFilter(val){
      switch(val){
        case 'BDY':return "北斗音";break;
        case 'CITY':return "城市合伙人";break;
        case 'AREA':return "区域合伙人";break;
        case 'ALONE':return "独立合伙人";break;
        case 'NORMAL':return "NORMAL";break;
      }
    }
  }
```
#### 禁止缩放
```
在APP.vue里面写
<script>
window.onload = function() {
  document.addEventListener('touchstart', function(event) {
    if (event.touches.length > 1) {
      event.preventDefault()
    }
  })
  document.addEventListener('gesturestart', function(event) {
    event.preventDefault()
  })
}
```
#### Vue移动端项目中，页面限制用户缩放【防止页面被缩小和放大】

```
用vue脚手架【vue-cli】生成的项目中，在index.html页面的head标签中，有一条mate标签是：
<meta name="viewport" content="width=device-width,initial-scale=1.0">
```
### vue使用路由之跳转
```
1.需求：点击按钮，跳转到任意页面（不传参）
声明式：<router-link :to="{name:'index'}}">    或者    <router-link to='/index'>
编程式：router.push(...)

方法一: this.$router.push({path:'路径')};
方法二：this.$router.push({name:'组件名')};
```

### 分页操作案例
```<div class="block">
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryForm.current"
        :page-size="queryForm.size"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        background
        >
    </el-pagination>
</div>
```
### 根据值判断得出 想对应的字体颜色
```
<el-table-column label="状态" > 
    <template slot-scope="props" >
        <span v-bind:class="{PASS:'pass',PENDING:'wait',FAIL:'fail'}[props.row.status]">{{props.row.status | statusFilter}}</span>
    </template>
</el-table-column>
```
#### git一些更新代码操作
> git fetch 

> git add .

> git commit 

> git pull 

#### 回退 
> git reset --hard HEAD

> git diff .\src\views\publicWelfare\publicWelfare.vue

#### 回滚代码
> git checkout 661c36cadb2781140aa90a033c00664bb4e6639f  .\src\views\publicWelfare\publicWelfare.vue



#### axios操作
```
http：axios 
	import axios from  "./http.js";
	Vue.prototype.$http = axios;
```

#### axios操作案例
```
created(){
    this.queryMember();
  },
methods: {
queryMember(){
    this.$http.get('/member/applyList',
    {params: removeEmptyVal({...this.queryForm})})
    .then(data=>{
    this.total=data.total;
    this.tableData=data.records;
    }).catch(()=>{
    this.$message.error("获取数据失败");
    })
}
}
```

####  ...this.queryForm 加的时候是要在需要查询的情况下使用，否则不需要添加
> {params: removeEmptyVal({...this.queryForm})})

#### axios--get请求 使用 ` 模板字符串 get方式可以使用{params: removeEmptyVal({id:this.orderId,adviserId:this.adviserId})})
```
this.$http.get(`/member/applyPass`,
{params: removeEmptyVal({id:this.orderId,adviserId:this.adviserId})})
    .then(data=>{
    console.log(data);
    data.records.status=this.form.radio;   //修改其中某字段的数据
    this.queryMember();
})
```

#### axios--post请求 使用 ` 模板字符串 post方式直接带参数，不需要params--{id:this.orderId,adviserId:this.adviserId}  
```
this.$http.post(`/member/applyRefuse`,
        {id:this.orderId,adviserId:this.adviserId})
          .then(data=>{
            console.log(data);
            data.records.status=this.form.radio;    //修改其中某字段的数据
            this.queryMember();
        })

定义全局的过滤器---在main.js中定义，直接可在vue实例中引用，无需加载导入

Vue.filter("dateFormat", function(dataStr, pattern = "YYYY-MM-DD HH:mm:ss") {
  return moment(dataStr).format(pattern);
});

Vue.filter("levelFilter",function(val){
  switch(val){
    case 'BDY':return "北斗音";break;
    case 'CITY':return "城市合伙人";break;
    case 'AREA':return "区域合伙人";break;
    case 'ALONE':return "独立合伙人";break;
    case 'NORMAL':return "NORMAL";break;
  }
})
```

#### option 选择框
```
<select v-model="level">
    <option value="">请选择邀请合伙人的等级</option>
    <option :key="item.val" :value="item.val" v-for="item in levelList">
        {{ item.desc }}
    </option>
</select>
```

#### 清楚缓存方法
> sessionStorage.clear();

#### 单选框默认地址
```
<div class="row">
    <label><input type="radio" v-model="data.isDefault" name="radio" value="1"  @click="isDefault(data.id)"/><span
    >默认地址</span
    ></label
    >
    <label>
    <label @click="edit(data.id)"><i class="iconfont iconbianji1"></i>编辑 </label>
    <label @click="del(data.id)"><i class="iconfont iconshanchu"></i>删除 </label>
    </label>
</div>```


import VDistpicker from "v-distpicker";

/**
 * area code 转中文
 * @param {*} code 
 */
 ```
export const areaCode2Value = code => {
  return [/^\d\d/, /^\d\d\d\d/, /^\d\d\d\d\d\d/]
    .filter(reg => reg.test(code))
    .map(reg => "000000".replace(reg, code.match(reg)[0]))
    .map(code => VDistpicker.methods.getCodeValue(code * 1));
};
```

VUE 全局变量有好几种实现方式，

/*
现在只记录项目中用到的一个，
将全局变量挂载到Vue.prototype 里，
在程序入口的main.js里加下面代码：


1
挂载之后，在需要引用全局量的模块处，不需再导入全局变量，直接用this就可以引用了，如下 */
```
Vue.prototype.permissionValue = pms;

export default {
    name: 'roleList',
    data() {
        return {
            author: this.permissionValue,
}
}
}
<el-button v-if="author.indexOf('sys_role_edit') != -1" size="small"
           @click="showModifyPanel(scope.row)">编辑
</el-button>
vue页面的按钮控制也是通过此方法实现的
```


#### areaCode   v-distpicker  --- 省市区编号转对应中文省市区-api
/**
 * area code 转中文
 * @param {*} code 
 */
```
export const areaCode2Value = code => {
  return [/^\d\d/, /^\d\d\d\d/, /^\d\d\d\d\d\d/]
    .filter(reg => reg.test(code))
    .map(reg => "000000".replace(reg, code.match(reg)[0]))
    .map(code => VDistpicker.methods.getCodeValue(code * 1));
}```


#### 替代瞄点
```
this. $router. push( {path:"/partner/billingDetails",query:{activeTabVal:3}} );
```


#### 身份证验证 规则reg
```
let reg = /(^[1-9]\d{5}(18|19|2([0-9]))\d{2}(0[0-9]|10|11|12)([0-2][0-9]|30|31)\d{3}[0-9Xx]$)/;
    if (reg.test(this.form.identity) === false) {
        Toast("身份证输入不合法");
        return false;
    }
```
#### 手机号验证 规则reg
```
let phoneValidate = /^1[3456789]\d{9}$/;
    if (!phoneValidate.test(phone)) {
    Toast({
        message: "请输入正确的手机号"
    });
    return;
    }
```

#### 图片上传 
```
import { upload } from "@/fs";
data(){
    return{
        // 上传图片列表
        imageList:[],
        //服务器图片链接
        imgUrl:"http://img.130.gdzsyc.cn/"
    }
}
<div class="title">上传支付凭证或支付截图:</div>
    <div class="img_list">
        <div class="divimg" 
            v-for="(item,index) in imageList" 
            :key="index">
        <img :src="imgUrl+item+`-100x100.png`" alt="gyinfo"/>
        <i class="iconfont iconai54" @click="cancelUpload(item)"></i>
        </div>
        <div class="upload" v-show="imageList.length != 9">
            <i class="iconjiahao iconfont"></i>
            <input
            type="file"
            class="file-id-front"
            accept="image/png, image/jpeg, image/jpg"
            @change="inputChangeFront"
          />
        </div>
    </div>
inputChangeFront(e) {
      upload(e).then(json => {
        this.$data.imageList.push(json.code);
      });
      e.target.value = "";
    },
    // 点X取消已上传的图片
    cancelUpload(val){
        this.$data.imageList.pop(val)
    }
```
#### 数据中 图片数组 遍历给  指定的数组
```
.then(data => {
          this.total = data.total;
          this.tableData = data.records.map(item=>{
            item.picList = item.pic ? item.pic.split(",").filter(item=>item):[]
            item.identityImages = [];
            item.front && item.identityImages.push(item.front);
            item.reverse && item.identityImages.push(item.reverse);
            return item;
          });
        })
```


#### 搜索框+分页功能模块优化
```
<el-button @click="queryMember(queryForm)" type="primary">搜索</el-button>
queryMember() {
      this.$http
    queryMember(queryForm) {
      if(queryForm){
        this.queryForm.size=10;
        this.queryForm.current=1;
        this.queryForm=queryForm;
      }try{
        this.$http
        .get("/member/applyList", {
          params: removeEmptyVal({ ...this.queryForm })
        })
        .catch(() => {
          this.$message.error("服务器繁忙");
        });
      }catch(e){
        window.console.log(e);
      }
```

#### split 切割字符串错误提示解决方案
```
TypeError: Cannot read property 'split' of null

img.split('.') 
变成
(img || "").split('.')
不报错啦


<template>
  <div class="container">
    <!--   <Actionsheet
          :actions="actions"
          :closeOnClickModal=false
          v-model="sheetVisible">
        </Actionsheet> -->
    <mt-actionsheet :actions="data" v-model="sheetVisible"></mt-actionsheet>
    <div class="row row1" @click="actionSheet">
      <label class="left toux">头像</label>
      <label class="right"><img :src="database.headImg" class="wx" />
        <!-- <i class="iconfont iconyou next"></i> -->
        <img src="../../assets/img/right.png" class="next" />
      </label>
    </div>
  </div>
</template>
<script>
import { MessageBox, Actionsheet } from 'mint-ui';
export default {
  data() {
    return {
      database: [],
      data: [{
        name: '拍照',
        method: this.takePhoto
      }, {
        name: '从相册中选择',
        method: this.openAlbum
      }],
      sheetVisible: false
    }
  },
  components: {
    Actionsheet
  },
  mounted() {
    this.$http.get(`/member/getMember`).then(data => {
      console.log(data);
      this.database = data;
    });
  },
  methods: {
    EditName() {
      MessageBox.prompt("请输入姓名").then(({ value }) => {
        this.database.name = value;
      })
    },
    actionSheet() {
      // 打开action sheet
      this.sheetVisible = !this.sheetVisible;
    },
    takePhoto() {
      console.log("打开照相机");
    },
    openAlbum() {
       console.log("打开相册");
    },
  }
};
```


####  element_ui 表格 table  排序

#### HTML 部分
```
 <el-table
      :data="tableData"
      ref="singleTable"
      height="578"
      highlight-current-row
      @current-change="handleCurrent"
      sortChange
    >
  <el-table>
<el-table-column label="库存" sortable="custom" prop="inventory"></el-table-column>
```
#### JS部分
```
queryMember(queryForm) {
  if(queryForm){
    this.queryForm.size=10;
    this.queryForm.current=1;
    this.queryForm=queryForm;
  }try{
    if(this.sortMethod == "descs"){
      this.$http.get("/member/getMemberList", {
          params: removeEmptyVal({descs:this.sortCode, ...this.queryForm })
        })
        .then(data => {
          this.total = data.total;
          this.tableData = data.records.map(item=>{
            item.area=areaCode2Value(item.area+"").join("");
            return item
          })
        })
    }else if(this.sortMethod == "ascs"){
      this.$http.get("/member/getMemberList", {
          params: removeEmptyVal({ascs:this.sortCode, ...this.queryForm })
        })
        .then(data => {
          this.total = data.total;
          this.tableData = data.records.map(item=>{
            item.area=areaCode2Value(item.area+"").join("");
            return item
          })
        })
    }
  }catch(e){
    window.console.log(e);
  }
}

sortChange(column, prop, order){
  if(column.prop == null){
    return false;
  }else{
    //确认是升序还是降序
    this.sortMethod = column.order.startsWith("a") ? "ascs" : "descs";
    this.sortCode = column.prop;
    if(this.sortCode == "passTime"){
      this.sortCode = "pass_time"
    }
    if(this.sortCode == "accreditExpireTime"){
      this.sortCode = "accredit_expire_time"
    }
    if(this.sortCode == "freezeInventory"){
      this.sortCode = "freeze_inventory"
    }
    if(this.sortCode == "freezeWallet"){
      this.sortCode = "freeze_wallet"
    }
    this.queryMember();
  }
}
```

#### date日期选择器  ---显示的时间都是从此刻开始的.
```
<el-form-item :label-width="formLabelWidth">
  <span class="demonstration" style="margin-right:15px;">授权时间</span>
  <el-date-picker
    v-model="datePicker"
    style="margin-top:20px;"
    unlink-panels
    :editable="false"
    type="date"
    @change="datechange"
    value-format="yyyy-MM-dd HH:mm:ss"
    :picker-options="pickerOptions1"
    placeholder="选择日期">
  </el-date-picker>
</el-form-item>

    // 编辑里的时间
      datePicker:"",
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      }



<!-- 地区选择器 -->
  <v-distpicker
  style="margin-left:10px;"
    @selected="selected"
  ></v-distpicker>
```


#### js数组和集合互转可用于去重：
``` 
数组转集合  
var arr = [55, 44, 65];
var set = new Set(arr);
console.log(set.size === arr.length);
console.log(set.has(65));
 
集合转数组
var set = new Set([1, 2, 3, 3, 4]);
Array.from(set) //输出[1,2,3,4]


数组转字符串
arr.toString();/arr.join(',')

字符串转数组
arr.split(',')
```

### 公众号开发--根据不同页面修改对应标题

####  title.js
```
export default {
  dayincome: "今日收益",
  home: "合伙人中心",
  monthincome: "本月收益",
  incomeinfo: "收益详情",
  repository: "库存",
  mydonation: "我的捐献",
  orderDetails: "订单管理",
  addressManager: "地址管理",
  setting: "设置",
  mywallet: "我的钱包",
  mywallet2: "我的钱包",
  billingDetailsPutfunc: "提现",
  accredit: "合伙人授权书",
  invitedBuyInfo: "邀请购买",
  invitedPartner: "邀请合伙人"
};
```
####  router.js
```
import {constants} from "@/title";

router.afterEach((to, from) => {
	window.document.title = constants[to.name];
})
```


#### 自定义加载更多
```
dat:=> pageInd: 1,

getInfo(isFirst) {
  this.$http.get('publicWelfare/getDonateRecord', {
    params: {
      current: this.pageInd,
      size: 3,
      id: 1
    }
  }).then(data => {
    this.total = data.total;
    data.records.forEach(item => {
      this.infoList.push(item)
    });
    if (isFirst) this.getCount();
  })
},

// 加载更多方法
findMore() {
  this.pageInd++;
  this.getInfo();
}
```


#### 多次请求多次数据 ===》 tab栏
```
<template>
  <div>
    <div class="navTab">
      <!--标签行-->
      <div class="navTabTitle">
        <div class="tabcontent">
          <div class="spanitem">
            <div
              v-for="(navitem, navindex) in navList"
              :key="navindex"
              @click="checkTab(navindex)"
              class="tabitem"
              :class="[{ blueslideBorder: activeTab == navindex }]"
            >
              <span :class="[{ active: navindex == activeTab }]">{{
                navitem
              }}</span>
            </div>
          </div>
        </div>
      </div>
      <!--标签内容-->

      <div class="navTabContent">
        <transition-group name="card" mode="out-in">
          <div
            class="contents"
            v-for="(contitem, contindex) in contentList"
            :key="contindex"
            v-show="activeTab == contindex"
          >
            <!--主要数据条-->
            <div
              class="loadbox"
              v-if="contitem.length > 0"
              :style="[{ height: windowheight - 40 + 'px' }]"
            >
              <div
                class="incomeItem"
                v-for="(listitem, listindex) in contitem"
                :key="listindex"
                @click="toInfo(listitem)"
              >
                <div>
                  <p>{{ navList[typeCode.indexOf(listitem.type)] }}</p>
                  <p>{{ listitem.createTime }}</p>
                </div>
                <div>
                  <p>
                    {{ listitem.changeWallet | moneyFilter }}
                  </p>
                </div>
                <div>
                  <img src="../../assets/img/right-arrow.png" />
                </div>
              </div>
            </div>
            <div
              class="loadMore"
              v-if="contitem.length % 10 == 0 && contitem.length != 0"
              @click="loadMore(contindex)"
            >
              加载更多
            </div>
            <img
              src="../../assets/img/noAccounts.png"
              class="warning"
              v-if="contentList[contindex].length == 0"
            />
          </div>
        </transition-group>
      </div>
    </div>
  </div>
</template>
<script>
import { removeEmptyVal } from "@/util";
import {Toast} from "mint-ui";
export default {
  data() {
    return {
      navList: [
        "提现",
        "进货",
        "零售",
        "众筹",
        "邀请奖",
        "增加",
        "减少",
        "奖励",
        "罚款",
        "扣税",
        "退款",
        "联盟奖励",
        "个人联盟奖励"
      ],
      typeCode:['WITHDRAW', 'STOCK', 'SELL', 'CROWD_FUNDING', 'BOUNTY', 'ADD', 'REDUCE', 'AWARD', 'FINE', 'TAX',
          'REFUND', 'ALLIANCE_AWARD', 'MEMBER_AWARD'
        ],
      api: "/member/getWalletRecord",
      activeTab: 0,
      contentList: [[],[],[],[],[],[],[],[],[],[],[],[],[]],
      windowheight: 0,
      types: ['WITHDRAW', 'STOCK', 'SELL', 'CROWD_FUNDING', 'BOUNTY', 'ADD', 'REDUCE', 'AWARD', 'FINE', 'TAX',
          'REFUND', 'ALLIANCE_AWARD', 'MEMBER_AWARD'
        ],
      pages:[1,1,1,1,1,1,1,1,1,1,1,1,1]
    };
  },
  mounted() {
    this.checkTab(0);
    this.windowheight = document.documentElement.clientHeight;
    for(let i=0;i<this.typeCode.length;i++){
      this.query(i);
    }
  },
  methods: {
    checkTab(navindex) {
      this.activeTab = navindex;
    },
    query(idx){
      this.$http.get(this.api,{params:removeEmptyVal({
        current:this.pages[idx],
        size:10,
        type:this.typeCode[idx]
      })}).then(data=>{
        data.records.forEach(item=>this.contentList[idx].push(item))
      }).then((err)=>{
        return false
      })
    },
    toInfo(listitem) {
      Toast({
        message:"详情暂且无法正常开放",
        duration:3000
      })
      // if (listitem.id) {
      //   this.$router.push({
      //     path: "/partner/billingDetailsPutinfo",
      //     query: { id: listitem.id }
      //   });
      // } 
    },
    loadMore(idx) {
      this.pages[idx]++;
      this.query(idx);
    }
  },
  filters: {
    moneyFilter(str) {
      let strResult = str > 0 ? "+" + str / 100 : str / 100;
      return strResult;
    }
  }
};
</script>
```


#### 子组件和全局组件
### 子组件
* 父组件中引入和声明 
* import xxx from 'xxxx';    ---引入
* components:{ 'xx':xx }     ---声明

### 全局组件
* 全局组件，使用更为方便，不需要声明，直接使用
* 在main.js 中引入一次，在main.js 中使用 `vue.component('组件名','组件对象');`
* 所有的组件就可以直接通过组件名使用

#### 父传子
* 父组件通过子组件的属性将值进行传递
  -- 方式有2:
          + 常量:  prop1="常量值"
          + 变量:  :prop2="变量名"
* 子组件需要声明
  -- 根属性props:['prop1','prop2']
  -- 在页面中直接使用{{prop1}}
  -- 在js中如何使用?--  this.prop1获取

#### vueBus的通信使用实现子组件通信父组件
* 通过new Vue()这样的一个vueBus对象,来$on('事件名',fn(prop1,prop2))
* 另一个组件引入同一个vueBus,来$emit('事件名',prop1,prop2)

#### 看文档的对象分类
*  1：全局的代表Vue.的
*  2: 实例的代表this.或者new Vue().
*  3: 选项代表 new Vue()的参数
*  或者 export default 里边的属性



### vue 登陆时回车键和点击都可以触发登陆事件

### vue 登陆时回车键和点击都可以触发登陆事件

### vue 登陆时回车键和点击都可以触发登陆事件

### 在表单最后的输入框添加（是最后的输入框） @keyup.enter.native="submitForm(‘ruleForm2’) 事件
``` 
 <el-input
    type="password"
    autocomplete="new-password"
    show-password
    v-model="ruleForm2.password"
    placeholder="密码"
    @keyup.enter.native="submitForm('ruleForm2')"
  ></el-input>
```
#### 登陆按钮添加 @click="submitForm(‘ruleForm2’)"事件
```
  <el-button
    type="primary"
    style="width:100%;"
    @click="submitForm('ruleForm2')"
    :loading="logining"
  >登录</el-button>
```



#### 表单 prop写法 可适用于修改项

```
<el-form
    :model="roleForm"
    ref="roleForm"
    label-width="120px"
    :rules="rules">
    <el-form-item label="姓名：" prop="stockName">
    <el-input
      v-model="roleForm.stockName"
      placeholder="请输入姓名"
    ></el-input>
    </el-form-item>
</el-form>

this.roleForm = {
  stockName: row.stockName,
  id: row.id,
  idCard: row.idCard,
  phone: row.phone
};
```


#### el-table-column的筛选 下拉框
```
<el-table-column
    prop="isSale"
    label="是否售卖单位"
    align="center"
    :filters="[
      { text: '非售卖单位', value: '0' },
      { text: '售卖单位', value: '1' }
    ]"
    :filter-method="filterIsSale"
    filter-placement="bottom-end"
  >
  <template slot-scope="scope">
    <el-tag
      :type="scope.row.isSale === 1 ? 'success' : 'danger'"
      disable-transitions
  > {{ scope.row.isSale == 0 ? "非售卖单位" : "售卖单位" }}</el-tag>
  </template>
</el-table-column>
```

  ##### 获取标签内容
```
filterIsSale(value, row) {
      return row.isSale == value;
  },
```



#### el-upload
```
if (!(this.shopForm.picture instanceof Array)) {
        this.shopForm.picture = this.shopForm.picture
          .split(",")
          .filter(Boolean);
      }
      let selectCode = this.filterAdcode(this.shopForm.adcode);
      this.$nextTick(() => {
        this.$refs.cascaderForm.currentValue = selectCode;
        this.shopForm.picture.forEach(item =>
          this.fileList.push({ url: this.imgUrl + item })
        );
      });
```


#### el-upload 总结
```
<el-form-item label="营业执照：" prop="picture">
  <el-upload
    :action="upLoadUrl"
    :on-preview="handlePictureCardPreview"
    :on-success="handleAvatarSuccess"
    :on-remove="removeHandle"
    ref="uploadPictures"
    list-type="picture-card"
    :fileList="fileList"
  >
  <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</el-form-item>
```

##### 在编辑的时候

###### 编辑店铺
```
  editStore() {
    if (!this.multipleSelection) {
      return this.$message.warning("请选择操作对象");
    }else{
      this.isShopForm = true
      this.shopForm = this.multipleSelection
    }
    if (!(this.shopForm.picture instanceof Array)) {
      this.shopForm.picture = this.shopForm.picture
        .split(",")
        .filter(Boolean);
    }
    let selectCode = this.filterAdcode(this.shopForm.adcode);
    this.$nextTick(() => {
      this.$refs.cascaderForm.currentValue = selectCode;
      this.shopForm.picture.forEach(item =>
        this.fileList.push({ url: this.imgUrl + item })
      );
    });
  },

  /* 对城市编码进行分割 */
    filterAdcode(val) {
      let length = `${val}`.length;
      val = val.toString();
      let arr = [];
      if (length < 2) {
        arr.push(val);
      } else if (length > 2 && length <= 4) {
        arr.push(val.substring(0, 2), val);
      } else if (length > 4 && length <= 6) {
        arr.push(val.substring(0, 2), val.substring(0, 4), val);
      } else {
        arr.push(
          val.substring(0, 2),
          val.substring(0, 4),
          val.substring(0, 6),
          val
        );
      }
      return arr;
    },

/*
      图片上传成功
    */
    handleAvatarSuccess(res) {
      if (res.errorCode == 0) {
        if (!this.shopForm.picture) {
          this.shopForm.picture = [];
        }
        this.$message.success("上传图片成功");
        this.shopForm.picture.push(res.bizContent.code);
      } else {
        this.$message.error("图片上传失败");
        this.$nextTick(() => {
          this.$refs.uploadPictures.uploadFiles.pop();
        });
      }
    },
    /*
      图片预览
    */
    handlePictureCardPreview(res) {
      this.preImg = res.url;
      this.imgDialogVisible = true;
    },
    /*   图片移除 */
    removeHandle(res) {
      let data = res.response;
      if (data) {
        this.shopForm.picture.forEach((item, i) => {
          if (item == data.bizContent.code) {
            this.shopForm.picture.splice(i, 1);
            this.$message.success("图片删除成功");
            return;
          }
        });
      } else {
        this.shopForm.picture.forEach((item, i) => {
          if (this.imgUrl + item == res.url) {
            this.shopForm.picture.splice(i, 1);
            this.$message.success("图片删除成功");
            return;
          }
        });
      }
    },
```

### expand 展开子表

#### 一级数据接口请求 得出一级数据后  遍历该数据强塞想要的字段格式并格式化--- 强塞 字段
``` records.forEach(item=>{
    item.children = []
  })
```

#### 一级自带事件  @expand-change="expand()"
```
	async expand() {
      if (this.$refs.table.store.states.expandRows.length > 1) {
        this.$refs.table.store.states.expandRows[0] = this.$refs.table.store.states.expandRows[1];
        this.$refs.table.store.states.expandRows.pop();
      }
      if (this.$refs.table.store.states.expandRows.length > 0) {
        try {
        const {
          data: {
            bizContent: { records, total }
          }
        } = await this.$http.get(
          "/goodsAttributeValue/getGoodsAttributeValueList?size=10000",
          {
            params: {
              id: this.$refs.table.store.states.expandRows[0].attrKey
            }
          }
        );
 
        this.keyTableData.forEach(item=>{
            if(item.attrKey === this.$refs.table.store.states.expandRows[0].attrKey){
              item.children = records
            }
          })
          // console.log(this.$refs.table)
        console.log(this.keyTableData)
          // this.attrTableData = records;
        } catch (e) {
          window.console.log(e);
        }
      } 
    },
```

### :row-class-name="tableRowClassName"

#### 列的颜色   ---外部引入单独css文件
```
@import '../../assets/css/common.css
    tableRowClassName({row, rowIndex}) {
      switch((rowIndex+1)%2){
        case 1:
          return 'warning-row';
        case 0:
          return 'success-row';
      }
    },

.el-table .warning-row {
    background: oldlace;
  }

.el-table .success-row {
  background: #f0f9eb;
}
```


### 单独独有文件 级联地址选择器

> import Address from "../../assets/data/data.json";
> import { cityFilter} from "../../assets/js/cityFilter";

```
<el-form-item v-if="switchBool == 1">
    <label style="margin-right:20px;"> 地址选择:</label>
    <el-cascader
    placeholder="请选择地址"
    @change="getAddressCode"
    :options="Address"
    change-on-select
    style="width:250px"
    separator="-"
    ref="cascader"
    ></el-cascader>
</el-form-item>
```
###   // 地址选择
```  
getAddressCode(e) {
    console.log(e)
  let code = e[e.length - 1];
  // if (this.queryForm.adCode == code) return;
  // this.queryForm.adCode = code;
  console.log(code)
  this.getAddrCode = code
  }
```
### computed监听
```
computed: {
      Address(){
        return cityFilter(Address)
      },
      globalStoreId() {
        return this.$store.state.globalStoreId;
      }
    },
```

#### 设置form表内部的值（另一种写法）
```
 let _this = this;

.then(function(response) {
  _this.$set( _this.form,"costPrice",response.data.bizContent.costPrice);
  _this.$set(_this.form, "price", response.data.bizContent.price);
  _this.$set(_this.form, "vipPrice", response.data.bizContent.vipPrice);
  _this.$set(_this.form,"total", response.data.bizContent.total);
})
```


#### 富文本框-
```<quill-editor
    v-model="editForm.description"
    ref="QuillEditor"
    :options="editorOption"
  ></quill-editor>
```

### 富文本工具栏配置
> 富文本工具栏配置
```const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // toggled buttons
  ["blockquote", "code-block"],

  [{ header: 1 }, { header: 2 }], // custom button values
  [{ list: "ordered" }, { list: "bullet" }],
  [{ script: "sub" }, { script: "super" }], // superscript/subscript
  [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
  [{ direction: "rtl" }], // text direction

  [{ size: ["small", false, "large", "huge"] }], // custom dropdown
  [{ header: [1, 2, 3, 4, 5, 6, false] }],

  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
  [{ font: [] }],
  [{ align: [] }],
  ["link", "image", "video"],
  ["clean"] // remove formatting button
];
```

### 配置参数
```
editorOption: {
        modules: {
          toolbar: {
            container: toolbarOptions, //工具栏
            handlers: {
              image: function(value) {
                if (value) {
                  // 调用element图片上传
                  document.querySelector("#upLoadBtn").click();
                } else {
                  this.quill.format("image", false);
                }
              }
            }
          }
        }
      },
```


#### 全局注册组件  
> const pagination =()=>import('./components/pagination')
##### Vue.component('pagination',pagination)
> <pagination :total="total" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"></pagination>

##### element的表单验证清楚--防止下次提交表单验证规则缓存 - clearValidate() -

#####  记住，要渲染页面后再执行，不然找不到虚拟dom，最好用this.$nextTick( () => this.$refs.baseInfoInitConfig.clearValidate())

##### 表格列的时候-加:key 可消除表格抖动改变样式
```
<el-table-column
  v-if="queryForm.isTrue == 1"
  :key="Math.random()"
	label="班委名称"
	width="160px"
	prop="committeeName"
	:formatter="textmatter"
  ></el-table-column>
```


### 全屏事件
```
handleFullScreen() {
	let element = document.documentElement;
	if (this.fullscreen) {
		if (document.exitFullscreen) {
			document.exitFullscreen();
		} else if (document.webkitCancelFullScreen) {
			document.webkitCancelFullScreen();
		} else if (document.mozCancelFullScreen) {
			document.mozCancelFullScreen();
		} else if (document.msExitFullscreen) {
			document.msExitFullscreen();
		}
	} else {
		if (element.requestFullscreen) {
			element.requestFullscreen();
		} else if (element.webkitRequestFullScreen) {
			element.webkitRequestFullScreen();
		} else if (element.mozRequestFullScreen) {
			element.mozRequestFullScreen();
		} else if (element.msRequestFullscreen) {
			// IE11
			element.msRequestFullscreen();
		}
	}
	this.fullscreen = !this.fullscreen;
}
```

### echart 另一种导入方式，script方式
```
    oneEcharts: '',
    twoEcharts: '',
    threeEcharts: '',

created()
    window.onresize = () => {
      if (this.oneEcharts) this.oneEcharts.resize();
      if (this.twoEcharts) this.twoEcharts.resize();
      if (this.threeEcharts) this.threeEcharts.resize();
    };

mounted()
    const s = document.createElement('script');
    s.type = 'text/javascript';
    s.onload = () => {
      this.getEchartsData();
    };
    s.src = 'https://resource.oss.yatiku.com/activity/answerFile/echarts.common.min.js';
    document.body.appendChild(s);

    initEcharts () {
      let dom = document.querySelector('#dom');
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        title: {
          text: '考试分类统计(总计)',
          left: 'center',
          textStyle: {
            color: 'white'
          }
        },
        legend: {
          textStyle: {
            color: 'white'
          },
          data: ['', '', '', '提问量', '超时量', '满意量']
        },
        grid: {
          left: '3%',
          right: '10%',
          containLabel: true
        },
        xAxis: {
          show: false
        },
        yAxis: {
          type: 'category',
          data: this.putQuestionsData.yDataLable,
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          }
        },
        series: [
          {
            name: '提问量',
            type: 'bar',
            data: this.putQuestionsData.questionsNumber,
            barGap: '0',
            label: {
              show: true,
              color: '#fff',
              position: 'right',
              formatter: '{c}'
              // offset: [10, 10]
            },
            itemStyle: {
              normal: {
                color: '#ff7e00'
              }
            }
          },
          {
            name: '超时量',
            type: 'bar',
            data: this.putQuestionsData.timesOutNumber,
            itemStyle: {
              normal: {
                color: '#9933cc',
                label: {
                  show: true,
                  color: '#fff',
                  position: 'right',
                  formatter: '{c}'
                }
              }
            }
          },
          {
            name: '满意量',
            type: 'bar',
            data: this.putQuestionsData.satisfiedNumber,
            itemStyle: {
              normal: {
                color: '#ff33ff',
                label: {
                  show: true,
                  color: '#fff',
                  position: 'right',
                  formatter: '{c}'
                }
              }
            }
          }
        ]
      };
      this.oneEcharts = echarts.init(dom);
      this.oneEcharts.setOption(option);
    },

    initTop () {
      let dom = document.querySelector('#topDom');
      this.twoEcharts = echarts.init(dom);
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        title: {
          text: '教师收益排行(TOP10)',
          left: 'center',
          textStyle: {
            color: 'white'
          }
        },
        grid: {
          left: '0%',
          right: '4%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.teacherData.yDataLable,
          axisTick: {
            alignWithLabel: true
          },
          'axisLabel': {
            interval: 0,
            rotate: 45,
            margin: 15,
            textStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '余额',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'inside',
                formatter: function (a, b, c) {
                  let value = a.value > 1000 ? `${(a.value / 1000).toFixed(1)}K` : a.value.toFixed(0);
                  return value;
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#999900'
              }
            },
            data: this.teacherData.balanceList
          },
          {
            name: '提现',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'inside',
                formatter: function (a, b, c) {
                  let value = a.value > 1000 ? `${(a.value / 1000).toFixed(1)}K` : a.value.toFixed(0);
                  return value;
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#66ff33'
              }
            },
            data: this.teacherData.withdrawMoney
          }
        ]
      };
      this.twoEcharts.setOption(option);
    },

    initBottom () {
      let dom = document.querySelector('#bottomDom');
      let option = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        title: {
          text: '教师抢答量排行(TOP10)',
          left: 'center',
          textStyle: {
            color: 'white'
          }
        },
        grid: {
          left: '0%',
          right: '4%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.answerData.yDataLable,
          axisTick: {
            alignWithLabel: true
          },
          'axisLabel': {
            interval: 0,
            rotate: 45,
            margin: 15,
            textStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '抢答量',
            type: 'bar',
            data: this.answerData.answerNumber,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  color: '#fff',
                  position: 'top',
                  formatter: '{c}'
                }
              }
            }
          }
        ]
      };
      this.threeEcharts = echarts.init(dom);
      this.threeEcharts.setOption(option);
    },

```