Before you add the comment, you can set the indicator size for the comment using the indicatorSize method or set the indicator color for the comment using the indicatorColor method. For example:
You can also get size & color of comment indicator
You should set size & color in the legal range:
If you want to set indicator color, you should set a string type data.
If this string cannot be identified as a color (like 'black' '#000' 'rgba(255, 255, 0, 0.5)' can be identified), the comments indicator will be set to the default color black.
If you want to set indicator size, you should set a number type data and make sure the data > 1.
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet />
</gc-spread-sheets>
<div class="options-container">
<div class="option-row">
<label for="color">Color:</label>
<input id="color" type="text" v-model="color" />
<input type="button" id="setColor" value="Set Comment Indicator Color" @click="setColor" />
</div>
<div class="option-row">
<label for="size">Size:</label>
<input id="size" type="text" v-model="size" />
<input type="button" id="setSize" value="Set Comment Indicator Size" @click="setSize" />
</div>
</div>
</div>
</template>
<script setup>
import '@mescius/spread-sheets-vue';
import GC from '@mescius/spread-sheets';
import { ref } from "vue";
const spreadRef = ref(null);
const color = ref("red");
const size = ref(6);
const commentText = ref("comment demo");
function initSpread(spread) {
spreadRef.value = spread;
spread.suspendPaint();
let sheet = spread.getSheet(0);
sheet.addSpan(1, 1, 1, 6);
sheet.setValue(1, 1, "there is a comment on the upper right corner of the cell");
sheet.comments.add(1, 1, "new comment!");
spread.resumePaint();
}
function setColor() {
let spread = spreadRef.value;
let sheet = spread.getSheet(0);
sheet.comments.get(1, 1).indicatorColor(color.value);
color.value = sheet.comments.get(1, 1).indicatorColor();
}
function setSize() {
let spread = spreadRef.value;
let sheet = spread.getSheet(0);
sheet.comments.get(1, 1).indicatorSize(Number(size.value));
size.value = sheet.comments.get(1, 1).indicatorSize();
}
</script>
<style scoped>
#app {
height: 100%;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
overflow: auto;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
}
label {
display: inline-block;
min-width: 90px;
margin: 6px 0;
}
input {
padding: 4px 6px;
box-sizing: border-box;
margin-bottom: 6px;
width: 100%;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script src="compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/en/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js',
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
