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.