新后台遇到的问题

最新推荐文章于 2023-02-13 23:32:21 发布

dianaie2303

最新推荐文章于 2023-02-13 23:32:21 发布

阅读量233

点赞数

原文链接：http://www.cnblogs.com/shuran/p/10644664.html

版权

1、element UI的select multiple是设置默认值

默认值需要是数组格式

2、element UI的table 传参数2种

@click="handleDelete(scope.$index, scope.row)"    //写法

 handleDelete(scope.$index, scope.row)            //调用

@click="handleEdit(scope.row)"    //写法
handleDelete({ $index, row })     //调用

3、回调函数传参数的方法（闭包）

使用回调函数的方法

function A(param) {
  console.log(param)       
}

function B(param, cb) {
  console.log(param)        
  cb(param)
}

B(1, A);    //调用

现在的需求是，回调函数需要传入参数，且参数的个数不确定，这个时候就需要使用闭包

function A1(param) {
  console.log(param)       
}

function A2(param1, param2) {
  console.log(param)       
}

function B(cb) {      
  cb()
}

B(function() {A1(1)})
B(function() {A2(1, 2)})

4、ES6扩展运算符...

1）函数调用

function add(x, y) {
　　return x + y;
}
var numbers = [4, 38];
add(...numbers) // 42

将一个数组变成参数序列

2）替代数组的apply方法

// ES5 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])
//  等同于
Math.max(14, 3, 77);

3）合并数组

// ES5 的合并数组
arr1.concat(arr2, arr3);

// ES6 的合并数组
[...arr1, ...arr2, ...arr3]

5、vue 音频的播放和暂停

需求是在列表中播放音频

<audio
       :ref="'wordaudio'+ scope.$index"
        :src="scope.row.sound_am_uri"
        @ended="wordAudioEnd(scope.$index)"
/>
<div class="horn-box"><svg-icon icon-class="horn" /></div>

动态设置 ref属性，下边播放按钮，点击播放按钮，获取dom元素， this.$refs[name].play() 播放音频， this.$refs[item].pause() 暂停音频，ended是监控事件。往往需要点击其中一个的时候，让其他的暂停掉

        Object.keys(this.$refs).forEach(item => {
            if (item.indexOf('wordaudio') !== -1) {
              wordPlaying[item.slice(9)] = false  //标志播放暂停this.$refs[item].pause()
            }
          })

6、内容列表的显示和隐藏

判断内容是否发生截断，判断有超出隐藏和无超出隐藏（操作类class）的时候，高度是否一致，一致或小于的话就是没有发生截断，不用出现"全部"按钮。

点击全部的时候取消隐藏的类即可

7、element动态添加表格

动态添加表格只能使用v-for，点击添加的时候数组push空数据

 1 　　　　　　　<el-col v-for="(item, index) in wordData.translation" :key="index" :span="23" style="margin-bottom: 10px;">
 2               <el-input v-model="item.means" placeholder="请输入释义" class="input-with-select" style="width: 350px;">
 3                 <el-select slot="prepend" v-model="item.part" placeholder="词性" style="width: 100px;">
 4                   <el-option
 5                     v-for="item in partList"
 6                     :key="item.type"
 7                     :label="item.name"
 8                     :value="item.type"
 9                   />
10                 </el-select>
11               </el-input>
12               <el-button v-if="index>0" type="danger" size="small" icon="el-icon-delete" @click.prevent="removeTrans(index)" />
13             </el-col>

点击添加事件的时候

addTrans() { // 添加常用释义
      this.wordData.translation.push({
        part: 'n.',
        means: ''
      })
    },

8、单张图片的上传和预览

用elementui 上传图片，点击图片后并不是立即上传到服务器，要预览图片的话需要先转为base64格式

（限制上传文件的类型 accept="image/gif, image/jpeg, image/png" ）

 1 <el-upload
 2   ref="upload"
 3   class="avatar-uploader"
 4   action="123"   //随便写
 5   :http-request="uploadImage"
 6   :auto-upload="false"   //选择图片后不会立即上传
 7   :show-file-list="false"
 8   :on-change="handleWordImgChange"
 9 >
10   <img v-if="wordData.img_uri" :src="wordData.img_uri" class="avatar">
11   <i v-else class="el-icon-plus avatar-uploader-icon" />
12 </el-upload>

 1 // 当上传图片后，调用onchange方法，获取图片本地路径
 2     handleWordImgChange(file, fileList) {
 3       this.imgFile = file.raw
 4       var _this = this
 5       var myfile = file.raw
 6       var reader = new FileReader()   //html5读文件
 7       reader.onload = function(e) {
 8         _this.wordData.img_uri = e.target.result // 将图片路径赋值给src
 9       }
10       reader.readAsDataURL(myfile)     //转BASE64
11     },

9、上传文件formdata的使用

文件上传到服务器的时候就需要是form格式，

 1 const formData = new FormData()
 2 formData.append('name', this.wordData.name)
 3 formData.append('sound_am', this.wordData.sound_am)
 4 
 5 //提交
 6 request({
 7       url: '/ma/company/word_update/',
 8       method: 'post',
 9       formData
10     }).then(res => {}）

FormData 对象的用法：

 1 //表单示例
 2 <form id="myForm" action="" method="post">
 3     <input type="text" name="name">名字
 4     <input type="password" name="psw">密码
 5     <input type="submit" value="提交">
 6 </form>
 7 
 8 //方法示例
 9 // 获取页面已有的一个form表单
10 var form = document.getElementById("myForm");
11 // 用表单来初始化
12 var formData = new FormData(form);
13 // 我们可以根据name来访问表单中的字段
14 var name = formData.get("name"); // 获取名字
15 var psw = formData.get("psw"); // 获取密码
16 // 当然也可以在此基础上，添加其他数据
17 formData.append("token","kshdfiwi3rh");

//添加数据 formData.append("k1", "v1"); //获取数据 formData.get("k1"); // "v1" //判断有没有数据 formData.has("k1"); // true //删除数据 formData.delete("k1");

当需要上传多个文件的时候，formData.append("k1", "v1"); formData.append("k1", "v2");往同一个key里添加数据即可

10、移动端 ios页面滑动卡顿

来源：https://blog.csdn.net/qq_39635302/article/details/79477596

<div class="containBox no-scrollbar">
  <div>
      滚动的内容
  </div>
</div>

//清除滚动条
.no-scrollbar::-webkit-scrollbar{
    width: 0;
    height: 0;
}

//滚动容器
.containBox{
    width: 100%;
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 50px;
    overflow-x: hidden;
    /*overflow-y:auto;//不能写,会和下面的产生冲突*/
    -webkit-overflow-scrolling: touch;
}

11、在局域网访问vue-cli项目

开发vue-cli项目，因为其他人也要测试使用，或者是手机端也要访问的话，就需要指定端口，在项目根目录的package.json文件里进行配置，改变绑定的ip，打开package.json,找到scripts下的dev 结尾增加一个参数 --host 192.168.191.1（自己电脑的ip地址）

"scripts": {
    "dev": "cross-env BABEL_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 192.168.191.1",
  },

12、合并表格

https://blog.csdn.net/qq_29468573/article/details/80742646

官网示例

 1     if (columnIndex === 0) {
 2           if (rowIndex % 2 === 0) {
 3             return {
 4               rowspan: 2,   //合并两行
 5               colspan: 1
 6             };
 7           } else {
 8             return {
 9               rowspan: 0,
10               colspan: 0     //0就是不用显示
11             };
12           }
13         }

要合并表格需要判断出哪一行需要合并，要合并几行。

因为已经把相同类的合并在一起，参考上述文章，根据每个类里边的数组条数判断应该合并几行，例如要合并3行，每行对应的合并数组就是[3, 0, 0]

13、keep-alive的使用 https://juejin.im/post/5b407c2a6fb9a04fa91bcf0d

现在每个页面都设置了缓存，但是多级目录的时候是有问题的

14、vue带参数打开新的页面

 <router-link tag="a" target="_blank" :to="{ path: '/route', query:{a: 1 }}"> </router-link>

网上搜出来的结果五花八门，其实只用router-link标签就能跳转，target设为_blank就行

15、props default 数组／对象的默认值应当由一个工厂函数返回

https://segmentfault.com/q/1010000009467326

子组件的数据设置默认值得时候需要用工厂函数返回

 1 props: {
 2     filterObj: {
 3       type: Object,
 4       default: () => ({
 5          
 6       })
 7     },
 8     statusList: {
 9       type: Array,
10       default: () => []
11     },
12   },

而且这个值不能在子组件中修改，就是子组件不能修改父组件的值，要修改的话可以通过事件触发父组件来修改

this.$emit('reset');

16、移动端H5页面

点击按钮的时候文字不能选中 user-select:none;

a标签为block时会有点击态 border: none;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;outline: none;

17、表单的验证

现在表单上定义 ref="formDom"

1 this.$refs['formDom'].clearValidate();  //清除表单样式  
2  
3 //提交的时候验证表单 
4 this.$refs.formDom.validate((valid) => {
5 　　if (valid) {
6 　　　　//验证通
7 　　}
8 }）

18、两层遮罩的时候遮罩层在弹出层上面

<el-dialog title="收货地址" :visible.sync="dialogFormVisible" :modal-append-to-body="false">
添加 :modal-append-to-body="false"

19、表格排序（版本）

20、http缓存

Cache-Control 通用消息头字段，被用于在http请求和响应中，通过指定指令来实现缓存机制。缓存指令是单向的，这意味着在请求中设置的指令，不一定被包含在响应中。

转载于:https://www.cnblogs.com/shuran/p/10644664.html

dianaie2303

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
新后台遇到的问题

1、element UI的select multiple是设置默认值默认值需要是数组格式2、element UI的table 传参数2种@click="handleDelete(scope.$index, scope.row)" //写法 handleDelete(scope.$index, scope.row) //调用...
复制链接

扫一扫