发表于： 2020-08-06 22:45:14
1 2029
今日完成:
<span v-if="tableShow">{{progress}}%</span>
progress的max默认就是0-1,设置就根据设置的来
progress是H5新标签，主要用于显示进度条。由于他是H5新标签，因而它存在一些兼容问题
可以设置的东西
边框(高宽边框)
背景色
已完成背景色
但是需要兼容写法,边框可以直接设置
ps:如果边框有圆角,背景也需要添加圆角,以Chrome举例
.jindu{
width: 80%;
height: 20px;
border:1px solid black;
border-radius: 5px;
background: yellow;//这里直接设置是无效的,要兼容设置
// -webkit-appearance: none;
}
// ::-moz-progress-bar{
// background:deeppink;
// }
::-webkit-progress-bar{
background:white;
border-radius: 5px;
}
::-webkit-progress-value{
background:orange;
border-radius: 5px;
}
注意, vue 绑定样式,三元表达式中
在[...]中带引号它会当成类名,去css中寻找相同类名,
不带引号,浏览器会当成变量名,去js中寻找相同变量名,
三元表达式判断前面始终存在的类可以省略,只保留判断类
<p :class="[this.file ==''?'listboxp33':'listboxp3']" ref="inp" @click="shang($event)">上传</p>
目的:满足上传条件后,上传按钮自动变色
条件:
pan(){
if(this.titlec==''||this.typec==''||this.contentc==''||this.urlc==''||this.file==''||this.progress!=100)
{
this.sh = true
}
},
遇到问题:
带判断函数的样式错误
原因:
因为这判断是实时的且在页面加载时就要完成的判断,
所以在加载是判断,且在每个输入框中都运行一次这个判断函数
or直接写在html中用v-bind三元表达式实时判定
总结:要搞清楚函数什么时候运行
html...
div :class="[pan()?'listbut1':'listbut11']"
vue...
pan(){
if(this.titlec==''||this.typec==''||this.contentc==''||this.urlc==''||this.file==''||this.progress!=100)
{
return true
}
else{
return false
}
},
返回列表
评论