vue+elementUI $message

女爷i 2022-04-03 09:46 946阅读 0赞

element-ui,$message显示倒计时信息

  • element-ui,$message显示倒计时信息

    element-ui 提供的message组件,文字是写死的,没有提供动态变化的方法。 但是作为一个vue组件,他的message属性是双向绑定的。

    下面是实现倒计时显示的例子

    1. var a = this.$message({
    2. showClose: false,
    3. message: '你已经被管理员禁用,5s后将自动退出',
    4. type: "error",
    5. duration:5000
    6. });
    7. //倒计时函数
    8. function coutTime(index){
    9. setTimeout(function() {
    10. if(index == 0){
    11. //5s结束后的操作
    12. }else{
    13. a.message = "你已经被管理员禁用,"+index+"s后将自动退出" ;
    14. coutTime(--index) ;
    15. }
    16. }, 1000);
    17. };
    18. coutTime(4) ;
<2>

Element-UI消息提示组件Message在Vuex中的调用实现

在最近的项目开发中,前端部分使用 Vue 开发,整个页面基于 Element-UI 实现。

由于是单页面多组件应用,使用了 Vuex 做状态管理。

为了页面交互的友好和风格的统一,消息提醒使用 Element-UIMessage消息提示, 不使用 window.alert

  1. this.$message({
  2. showClose: true,
  3. message: '警告哦,这是一条警告消息',
  4. type: 'warning'
  5. });

然而,系统使用了 Vuex 做状态管理,在 actions 中的方法中,this 并没有 $message 的引用,后续还需研究下相关的对象之间的关系,但是这次从另外一个角度,对这个问题进行了考虑。

通过这个思路,便于我们更灵活的控制js脚本。这里通过 Message消息提示 组件来演示。

我们知道 Vuex 的状态管理是通过数据进行页面管理的,也就是说所有的页面变化其实都是数据的变化引起的。

state 中添加属性:

  1. const state = {
  2. msg:{type:"success", content:"", count:0},
  3. //其他属性...
  4. }

新建一个 Msg.vue 的组件:

  1. <template>
  2. <div id="msg-dependencies" v-if="msgCount == 0">
  3. </div>
  4. </template>
  5. <script>
  6. export default {
  7. data(){
  8. return {
  9. }
  10. },
  11. computed:{
  12. msgCount(){
  13. var type = this.$store.state.msg.type;
  14. var msg = this.$store.state.msg.content;
  15. if(msg !== "") {
  16. var param = { "type":type, message:msg };
  17. console.log("message param:",param)
  18. this.$message(param);
  19. }
  20. return this.$store.state.msg.count;
  21. }
  22. }
  23. }
  24. </script>

组件内的属性 msgCountcomputed 属性,仅仅是为了跟踪 statemsg.count 的变更,并无实际意义。

mutations 中定义消息触发方法:

  1. export const showInfoMsg = (state, content) => {
  2. console.log("show info msg:", content);
  3. state.msg.type = "info";
  4. state.msg.content = content;
  5. state.msg.count = state.msg.count + 1;
  6. }

每次调用都会触发 msg.count 的变更,进行反馈到 Msg.vue 组件中,算是vue为我们提供的一种回调函数。

组件内调用

  1. this.$store.commit("showInfoMsg","删除成功!");

或者actions内执行类似调用

  1. context.commit("showInfoMsg","删除成功!");
<3>

vue element-ui的$notify注意点

2018年02月22日 15:40:58 chiuwingyan 阅读数:5654

我的初衷是把element-ui的$notify通知封装成一个组件,登录成功后调用获取低库存接口,如果获取接口的列表当中库存大于0,则显示这个通知,并且在文本当中提供点击事件。

因此,首先想到的就是使用dangerouslyUseHTMLString属性,可以插入html字符串

  1. export default {
  2. methods: {
  3. open12() {
  4. this.$notify({
  5. title: 'HTML 片段',
  6. dangerouslyUseHTMLString: true,
  7. message: '<strong>这是 <i id="show">HTML</i> 片段</strong>'
  8. });
  9. }
  10. }
  11. }

但是,message里面的html字符串其实是脱离了vue,例如不能用@click方法绑定事件,因此,应该用js的操作dom来绑定。

首先,我想到的是在该组件的mounted方法里面获取

  1. document.querySelector('#show');

但是这样获取到的是null,为什么呢?

mounted的时候是该组件模板里面的dom挂载完毕,然而我这个组件里面并没有模板,只在方法里使用了this.$notify,挂载完后这个notify并不在app里面,

20180222152639222

role=“alert”就是该通知框,因此我们不能把它当做普通组件操作。而且,它的挂载时机有可能在该组件的mounted之后,就是mouted方法时只是该组件挂载了,但是里面的这个motify可能还没有,因此就是null。

如果要在里面添加js方法如绑定事件,应该要在html里面添加监听,但是要掌握好时机。

notify应该是偏向于文本展示的通知类,我这里使用notify可能就会有点不妥。

发表评论

表情:
评论列表 (有 0 条评论,946人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Android Message

    好长时间 没写博客了。发现浏览量增长的变慢了。从我笔记里面 拿一篇出来 关于 Android Message 的 public int what; //用户定义的消息代码