一博科技 发表于 2022-4-20 18:40:33

【v15.0.2】【按钮hover提示文案】(40981)

本帖最后由 Derrick.Jiao 于 2022-4-21 10:53 编辑

场景:鼠标悬停在按钮上,有一个提示的文案,类似常规button标签的title的效果;
如:<button title="提交">submit</button>

按钮生成方法代码:
const inlineBtn = new GC.Spread.Sheets.Style();inlineBtn.cellButtons=[
{
    imageSrc: b64_keep,
    imageSize:this.imageSize,
    imageType: GC.Spread.Sheets.ButtonImageType.custom,
    command: (sheet, row, col, option) => {
      this.handleEdit(row,col,this.tableData)
    },
}, {
    imageSrc: b64_model,
    imageSize:this.imageSize,
    imageType: GC.Spread.Sheets.ButtonImageType.custom,
    command: (sheet, row, col, option) => {
      this.searchModel(row,col,this.tableData)
    }
}, {
    imageSrc: b64_refresh,
    imageSize:this.imageSize,
    imageType: GC.Spread.Sheets.ButtonImageType.custom,
    command: (sheet, row, col, option) => {
      this.handleRefresh(row,col,this.tableData)
    }
}, {
    imageSrc: b64_mark,
    imageSize:this.imageSize,
    imageType: GC.Spread.Sheets.ButtonImageType.custom,
    command: (sheet, row, col, option) => {
      this.handleMark(row,col,this.tableData,'self')
    }
}
]onlineBtn.cellButtons=[{
    imageSrc: b64_online,
    imageSize:this.imageSize,
    imageType: GC.Spread.Sheets.ButtonImageType.custom,
    command: (sheet, row, col, option) => {
      this.handleOnlinePrice(row,col,this.tableData)
    }
}
]
outBtn.cellButtons=[
{
    imageSrc: b64_price,
    imageSize:{width:24, height:24},
    imageType: GC.Spread.Sheets.ButtonImageType.custom,
    command: (sheet, row, col, option) => {
      this.handlePrice(row,col,this.tableData)
    }
}, {
    imageSrc: b64_edit,
    imageSize:{width:22, height:22},
    imageType: GC.Spread.Sheets.ButtonImageType.custom,
    command: (sheet, row, col, option) => {
      this.handleRevise(row,col,this.tableData)
    }
}, {
    imageSrc: b64_mark,
    imageSize:{width:20, height:20},
    imageType: GC.Spread.Sheets.ButtonImageType.custom,
    command: (sheet, row, col, option) => {
      this.handleMark(row,col,this.tableData,'all')
    }
}
]
this.tableData.map((val,i)=>{
sheet.getCell(i, 0).wordWrap(true); // 设置换行
sheet.getCell(i, 2).wordWrap(true); // 设置换行
// 溢出单元格省略号替代
sheet.setStyle(i, 4, style, GC.Spread.Sheets.SheetArea.viewport);
sheet.setStyle(i,10,style,GC.Spread.Sheets.SheetArea.viewport);
sheet.setStyle(i,22,style,GC.Spread.Sheets.SheetArea.viewport);
// 添加批注(复投编码)
if(val.recode){sheet.comments.add(i,3,"复投编码 :"+val.recode);}

// 是否存在电商价格
this.hasOnline.map(t=>{
    sheet.setStyle(t, 29, onlineBtn)
})

// 设置按钮
sheet.setStyle(i, 28, inlineBtn)
sheet.setStyle(i, 30, outBtn)
})
图例:(鼠标悬停于灰色背景的icon上)


期望效果:


谢谢解答

Derrick.Jiao 发表于 2022-4-21 10:53:20

你好,目前我们的单元格按钮暂不支持悬浮提示,这边已将本帖的场景描述做了补充并提交做为产品需求。(40981)评估通过后,有具体实现的版本这边也会更贴告知。
页: [1]
查看完整版本: 【v15.0.2】【按钮hover提示文案】(40981)