Vue-element开发 实战项目总结一

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;}

参考 https://www.cnblogs.com/big-snow/p/5718728.html 感谢博主