2021年4月18日2021年4月18日

vue2升级到vue3，vuex调整

原来写法：vuex3版本 read more »

2021年4月18日2021年4月18日

vue-element-ui使用嵌套drawer时audio会出现收缩

我在使用vue-element-ui中的drawer组件中，使用嵌套方式，子drawer里面放入audio音频文件，音频文件会出现收缩现象。

20210418145123

解决方法：

我使用的方式是，在打开动画完成后，重新给audio的src数据赋值。

  <el-drawer
    title="历史记录"
    :visible.sync="currenthistory"
    direction="rtl"
    size="300"
  >
    <el-table :data="tableData" @row-click="handleCurrentChange">
      <el-table-column
        property="result"
        label=" 结果"
        width="100"
      ></el-table-column>
      <el-table-column
        property="create_time"
        label="日期"
        width="200"
      ></el-table-column>
    </el-table>

    <el-drawer
      title=""
      :append-to-body="true"
      :before-close="handleClose"
      :visible.sync="innerDrawer"
      @opened = "onloaddata"
    >
          <audio
              ref="audio"
              controls
              controlsList="nodownload"
              :src="currentrow.file_url"
            ></audio>

<el-drawer

title="历史记录"

:visible.sync="currenthistory"

direction="rtl"

size="300"

<el-table :data="tableData" @row-click="handleCurrentChange">

<el-table-column

property="result"

label=" 结果"

width="100"

></el-table-column>

<el-table-column

property="create_time"

label="日期"

width="200"

></el-table-column>

</el-table>

<el-drawer

title=""

:append-to-body="true"

:before-close="handleClose"

:visible.sync="innerDrawer"

@opened = "onloaddata"

<audio

ref="audio"

controls

controlsList="nodownload"

:src="currentrow.file_url"

></audio>

我们要使用drawer的opened事件，也就是Drawer 打开动画结束时调用下面方法，重新加载数据。

onloaddata(){
        this.currentrow = this.tempcurrentrow
    }

onloaddata(){

this.currentrow = this.tempcurrentrow

}

当数据重新加载后，第一次渲染出现的个别audio收缩现象解决。

2021年3月17日2021年3月17日

vue实现条件判断动态绑定样式的方法

<el-tag type="success">绿色标签</el-tag>
<el-tag type="info">灰色标签</el-tag>
写函数也好，还是直接三元表达式都行
<el-tag size="medium" :type="scope.row.is_multiple === '否' ? 'info' : 'success'" >{{
 scope.row.is_multiple }}
</el-tag>

				
					
				1
2
3

						<el-tag size="medium" :type="scope.row.is_multiple === '否' ? 'info' : 'success'" >{{
 scope.row.is_multiple }}
</el-tag>

					

			

2021年3月17日

vue 多个变量赋相同值互相影响

解决：

1.this.billItemLIsts = JSON.parse( JSON.stringify(this.billItemLIstsOriginal) );

2.或使用 ES6 的解析语法 this.billItemLIsts = { …this.billItemLIstsOriginal }

2021年3月17日

javascript 跳出（终止）forEach循环

forEach 用 break和return false都是无用的。break会报错

那怎么办？就是用try-catch

try {
    var array = ["first","second","third","fourth"];
    
    // 执行到第3次，结束循环
    array.forEach(function(item,index){
        if (item == "third") {
            throw new Error("EndIterative");
        }
        alert(item);// first,sencond
    });
} catch(e) {
    if(e.message!="EndIterative") throw e;
};
// 下面的代码不影响继续执行
alert(10);

try {

var array = ["first","second","third","fourth"];

// 执行到第3次，结束循环

array.forEach(function(item,index){

if (item == "third") {

throw new Error("EndIterative");

}

alert(item);// first,sencond

});

} catch(e) {

if(e.message!="EndIterative") throw e;

};

// 下面的代码不影响继续执行

alert(10);

2021年3月10日

vue-cli开启https

找到： vue.config.js 文件

module.exports = {
    devServer: {
        https: true
    }
}

module.exports = {

devServer: {

https: true

}

2021年3月10日2021年3月10日

VUE中加入新手引导

使用插件：https://kamranahmed.info/driver.js/

在vue-cli中搜索依赖

driver.js 安装即可 read more »

2021年3月8日

vue element ui NavMenu 导航菜单修改样式

在vue中的scss中去掉scoped 就可以修改样式了

2021年3月7日

vue-cli创建的项目复制到另一个目录问题

有时你可能复制项目到另一个机器开发，但是你发现运行npm run 出现问题。

其实很简单

我们删除\node_modules下的所有文件。运行

npm install
npm run serve

1 2	npm install npm run serve

OK，问题已解决

2021年3月6日

如何使用setInterval或setTimeOut同步执行？

function foo(args1, args2, retry) 
{ 
    return new Promise(function(resolve, reject) { 
    if (retry <= 0) 
     reject(); 

    var isDone = callAnotherFunction(args1, args2); 

    if(!isDone) { 
     setInterval(function() { 
      retry = retry - 1; 
      isDone = callAnotherFunction(args1, args2); 
      if (isDone) 
       resolve(); 
     }, 
     2000); 
    } 
    else 
     resolve(); 
    } 
} 

function useIt(args1, args2) 
{ 
    // Other code 
    let store = function() { 
    foo(args1, args2, 5).then(result => { 
      cleanStorage(args1, args2); 
      return; 
     } 
    } 
}

function foo(args1, args2, retry)

{

return new Promise(function(resolve, reject) {

if (retry <= 0)

reject();

var isDone = callAnotherFunction(args1, args2);

if(!isDone) {

setInterval(function() {

retry = retry - 1;

isDone = callAnotherFunction(args1, args2);

if (isDone)

resolve();

2000);

}

else

resolve();

}

function useIt(args1, args2)

{

// Other code

let store = function() {

foo(args1, args2, 5).then(result => {

cleanStorage(args1, args2);

return;

}

2 / 11 上一页 123 4 5...10...下一页尾页