VUE - 使用h函数创建虚拟节点

VUE - 使用h函数创建虚拟节点

 1. 如在 antd 的 notification 组件中使用 

  参考文档:https://1x.antdv.com/components/notification-cn/

复制代码
        let h = this.$createElement;
        that.$notification.error({
          message: '上传提示',
          description: () => {
            const res = _msgArr.map((item) => {
              return h('p', { style: { 'margin-bottom': 0, 'font-size': 'small' } }, item);
            }); // 数组中每项反馈信息都转为VNode
            return h(
              'p',
              {
                style: {
                  overflow: 'scroll',
                  'max-height': '50vh',
                },
                class:'notificationMsg'
              },
              res
            ); // 返回总的VNode,子元素为所有反馈信息
          },

          // description: () => {
          //   // 将反馈信息中所有;替换为\n换行符
          //   const res = _msgArr.join('\n');
          //   return h('pre', {}, res);
          // },

          duration: null,
        });
复制代码

 

 

 

复制代码
.notificationMsg::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 0px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 0px;
  // scrollbar-arrow-color: red;
}

// .notificationMsg::-webkit-scrollbar-thumb {
//   /*滚动条里面小方块*/
//   border-radius: 5px;
//   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
//   background: #8a8a8a6b;
// }

// .notificationMsg::-webkit-scrollbar-track {
//   /*滚动条里面轨道*/
//   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
//   border-radius: 0;
//   background: rgba(0, 0, 0, 0.1);
// }
复制代码

 

 

 样例2

复制代码
        let h = that.$createElement;
        that.$confirm({
          title: '提示',
          content: () => {
            let h_conTemp = h('span', { style: { color: 'red' } }, batchNIds.length);
            let h_row1 = h('div', {}, ['您当前选择的有效节点共 ', h_conTemp, ' 条数据。']);
            let h_row2 = h('div', {}, '确认要清除后代属性,并把当前节点的属性覆盖到其后代?');
            return h('div', {}, [h_row1, h_row2]);
          },

          onOk() {
            api_CoverNodePropsAsync(batchNIds).then((res) => {
              that.$message.success('操作成功');
            });
          },
          onCancel() {},
        });
复制代码

 

 

 

 

 

 

 

 

 

 

vue3中:https://www.jb51.net/javascript/325330wow.htm

 

 

end.

 

posted @   无心々菜  阅读(90)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
历史上的今天:
2022-04-11 VUE - Python环境变量配置教程
2022-04-11 VUE - 在vue2项目中使TS语法
点击右上角即可分享
微信分享提示