Vue-element开发 实战项目总结一
1.DatePicker 日期选择器
(使用value-format将标准时间格式转换为字符串 2018-10-15形式)
<el-date-picker
v-model="staffForm.staffBirthday"
:picker-options="pickerOptions1"
type="date"
placeholder="选择日期"
format="yyyy-MM-dd " //输入框显示格式
value-format="yyyy-MM-dd" //设置输出时间格式
/>
2.element默认英文解决方案
1.main.js
import zhLocale from ‘element-ui/lib/locale/lang/zh-CN’
2.引用
Vue.use(ElementUI, { zhLocale })
3.安装删除依赖
npm install 包名
npm uninstall 包名
4.修改element默认样式
解决办法:在选择器的前面添加一个ID选择器来限制作用范围
style标签不加 scoped ,因为在element框架中 限制style样式仅在当前页面显示无法使样式起作用,当前页面是嵌套在大的layout页面中,只是通过更改路由的方式来改变页面的显示,因此不要加 scoped,因为加了ID选择器 所以即使不加scoped 也只是对当前div起作用,不会影响其他的同类标签的显示
5.element框架中使用notification onclick事件
methods: {
showDialog() {
this.dialogVisible = true
},
open4() {
const h = this.$createElement
this.$notify({
title: '收到新语音消息',
dangerouslyUseHTMLString: true,
message: h('a', {
on: {
click: this.showDialog
}
}, '这里是a标签的内容'),
duration: 0
})
}
}
6.vue中动态添加class类名
<p :class="objectClass"></p>
data: function() {
return {
objectClass: {
m_voicePlay1: true,
m_voicePlay2: false
}
}
},
在methods 中通过函数来设置属性值为true,来动态添加类
methods: {
playVoice() {
this.objectClass.m_voicePlay2 = true
}
}
以下为样式
.m_voicePlay1{width:30PX;height:30PX;margin: 0 !important; position:absolute;right:10PX;top:8PX;background:url("../static/img/voice.png") no-repeat ;background-size:100% 100%;}
.m_voicePlay2{ background:url('../static/img/yuyin.png') no-repeat 0 0;-webkit-animation:bofang 1s steps(1) infinite;background-size:120px 30px;}