2021年3月6日

vue获取audio总时长

  <audio ref="audio" autoplay controls src=""> </audio>

1	<audio ref="audio" autoplay controls src=""> </audio>

播放当前时间：

let currentaduioduration = this.$refs.audio.duration //获取视频的总时长

1	let currentaduioduration = this.$refs.audio.duration //获取视频的总时长

2021年3月6日

vue动态设置audio的src和自动播放

道理其实很简单：思路就是使用vue的data数据给:src动态给值，自动播放就是audio的一个属性而已

               <audio
                  ref="audio"
                  autoplay
                  controls
                  controlsList="nodownload"
                  :src="currentRow.file_path"
                  @ended="handleplaynext"
                ></audio>

<audio

ref="audio"

autoplay

controls

controlsList="nodownload"

:src="currentRow.file_path"

@ended="handleplaynext"

></audio>

只要currentRow.file_path给值后，不为空就会自动播放，换新的值，重新播放新的语音，全自动

2021年3月6日

elementUI按钮动态添加禁用

<el-button type="primary" :disabled="btnBoolean== 1 ? true : false">提交</el-button>

1	<el-button type="primary" :disabled="btnBoolean== 1 ? true : false">提交</el-button>

按钮绑定disabled并判断

2021年3月5日

vue-element-ui table获取数据index索引

  <el-table
      :data="tableData"
      :row-class-name="rouClassNameFn"
      @row-click = "onRowClick"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
    </el-table>

<el-table

:data="tableData"

:row-class-name="rouClassNameFn"

@row-click = "onRowClick"

style="width: 100%">

<el-table-column

prop="date"

label="日期"

width="180">

</el-table-column>

</el-table>

首先把index通过row-class-name灌注到数据数组中，rouClassNameFn({row,rowIndex}) 然后再获取就可以了

rouClassNameFn({row, rowIndex}) {
	//把每一行的索引放进row
	row.index = rowIndex;
},
onRowClick (row, event, column) {
	console.log(row)
}

rouClassNameFn({row, rowIndex}) {

//把每一行的索引放进row

row.index = rowIndex;

onRowClick (row, event, column) {

console.log(row)

}

2021年3月5日2021年3月5日

vue elementui table的header设置颜色

:header-row-style="headerclass"
:header-cell-style="headerclass"

1 2	:header-row-style="headerclass" :header-cell-style="headerclass"

方法：

  methods: {
    headerclass() {
      return 'background-color: rgba(242, 242, 242, 1)'
    },

methods: {

headerclass() {

return 'background-color: rgba(242, 242, 242, 1)'

2021年3月4日2021年3月4日

[Vue warn]: Invalid prop: type check failed for prop “router”. Expected Boolean, got String with value “true”.

<el-menu 
          default-active="1"
          router=true
          >
...
</el-menu>

<el-menu

default-active="1"

router=true

...

</el-menu>

改为

<el-menu 
          default-active="1"
          router
          >
...
</el-menu>

<el-menu

default-active="1"

router

...

</el-menu>

将true去掉就行了，解决！

2021年3月1日2021年3月1日

Vue.js锚定到同一组件中的div

我正在开发Vue.js应用程序，但无法将锚链接到组件中的某个div。 read more »

2021年3月1日

vue项目格式化单引号变双引号格式化去掉分号

在文件根目录下创建 .prettierrc.json 代码格式配置文件

{
    "singleQuote":true,
    "semi":false
}

{

"singleQuote":true,

"semi":false

}

2021年2月27日2021年2月27日

vue各种问题汇聚

Unnecessary escape character: \. no-useless-escape

原因：

let reg = /^([a-zA-Z]|[0-9])(\w\\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/

1	let reg = /^([a-zA-Z]\|[0-9])(\w\\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/

改为

let reg = /^([a-zA-Z]|[0-9])(\w)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/

1	let reg = /^([a-zA-Z]\|[0-9])(\w)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/

sass-loader版本过高运行错误TypeError: this.getOptions is not a function

// 卸载
npm uninstall --save less-loader
// 安装
npm install -D sass-loader@10.x

// 卸载

npm uninstall --save less-loader

// 安装

npm install -D sass-loader@10.x

Failed to resolve Loader: sass-loader

安装 sass-loader组件到开发依赖

Cannot find module ‘sass’

npm install -D sass

npm install -D node-sass

error ‘XXXX’ is defined but never used no-unused-vars

"no-unused-vars": 'off'    //.eslintrc.js文件

1	"no-unused-vars": 'off' //.eslintrc.js文件

意思就是不让eslint校验，我的定义有没有用了。虽然不报错了，但未必是最好解决办法。

2021年1月21日2021年1月21日

JS倒计时

样式

<style>
.countdown div{
float:left;
width: auto;
height: 50px;
background: #0c2345;
font-size: 60px;
color: #fff;
line-height: 50px;
text-align: center;
font-weight: bold;
border-radius: 5px;
margin-right: 10px;
padding-left:20px;
padding-right:20px;
}
</style>

<style>

.countdown div{

float:left;

width: auto;

height: 50px;

background: #0c2345;

font-size: 60px;

color: #fff;

line-height: 50px;

text-align: center;

font-weight: bold;

border-radius: 5px;

margin-right: 10px;

padding-left:20px;

padding-right:20px;

}

</style>

HTML

<div class = "countdown">
  <div id="day">00</div>
  <div id="hours">00</div>
  <div id="minutes">00</div>
  <div>分</div>
  <div id="seconds">00</div>
  <div>秒</div>
</div>

</div>

JS代码

<script>
				var countDownTime = {
					init: function(a, b, c, d, e) {
						this.t = a, this.d = b, this.h = c, this.m = d, this.s = e
					},
					start: function() {
						var a = this;
						setInterval(a.timer, 1e3)
					},
					timer: function(a) {
						var b, c, d, e, f, g, h;
						a = this.countDownTime, b = new Date, c = new Date(a.t), d = c.getTime() - b.getTime(), e = Math.floor(a.formatTime(d, "day")), f = Math.floor(a.formatTime(d, "hours")), g = Math.floor(a.formatTime(d, "minutes")), h = Math.floor(a.formatTime(d, "seconds")), a.d && (a.d.innerText = a.formatNumber(e)), a.h && (a.h.innerText = a.formatNumber(f)), a.m && (a.m.innerText = a.formatNumber(g)), a.s && (a.s.innerText = a.formatNumber(h))
					},
					formatNumber: function(a) {
						if(a<=0){a=0}
							return a = a.toString(), a[1] ? a : "0" + a
					},
					formatTime: function(a, b) {
						switch (b) {
							case "day":
								return a / 1e3 / 60 / 60 / 24;
							case "hours":
								return a / 1e3 / 60 / 60 % 24;
							case "minutes":
								return a / 1e3 / 60 % 60;
							case "seconds":
								return a / 1e3 % 60
						}
					}
				};
				var	day = document.getElementById('day');
				var	hours = document.getElementById('hours');
				var	minutes = document.getElementById('minutes');
				var seconds = document.getElementById('seconds');
				// 日 时 分 秒的dom对象
				countDownTime.init('2021/01/21 14:20:00', day, hours, minutes, seconds);
				countDownTime.start();
			</script>

var countDownTime = {

init: function(a, b, c, d, e) {

this.t = a, this.d = b, this.h = c, this.m = d, this.s = e

start: function() {

var a = this;

setInterval(a.timer, 1e3)

timer: function(a) {

var b, c, d, e, f, g, h;

a = this.countDownTime, b = new Date, c = new Date(a.t), d = c.getTime() - b.getTime(), e = Math.floor(a.formatTime(d, "day")), f = Math.floor(a.formatTime(d, "hours")), g = Math.floor(a.formatTime(d, "minutes")), h = Math.floor(a.formatTime(d, "seconds")), a.d && (a.d.innerText = a.formatNumber(e)), a.h && (a.h.innerText = a.formatNumber(f)), a.m && (a.m.innerText = a.formatNumber(g)), a.s && (a.s.innerText = a.formatNumber(h))

formatNumber: function(a) {

if(a<=0){a=0}

return a = a.toString(), a[1] ? a : "0" + a

formatTime: function(a, b) {

switch (b) {

case "day":

return a / 1e3 / 60 / 60 / 24;

case "hours":

return a / 1e3 / 60 / 60 % 24;

case "minutes":

return a / 1e3 / 60 % 60;

case "seconds":

return a / 1e3 % 60

}

};

var day = document.getElementById('day');

var hours = document.getElementById('hours');

var minutes = document.getElementById('minutes');

var seconds = document.getElementById('seconds');

// 日时分秒的dom对象

countDownTime.init('2021/01/21 14:20:00', day, hours, minutes, seconds);

countDownTime.start();

</script>

3 / 11 上一页 1 234 5...10...下一页尾页