You can use the built-in tool strip items: Paste, Cut, Copy, and AutoFill.
You can also customize a touch tool strip item and add it to the touch tool strip.
You can use the text method to get and set the text of the item, use the font method to get and set the font of the item text, and use the foreColor method to get and set the color of the item text.
After you add the touch tool strip item, you can use getItem and getItems to get the items. Also, you can remove one or clear all the items.
You can customize the tool strip using the provided APIs. For example:
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet :autoGenerateColumns="autoGenerateColumns" />
</gc-spread-sheets>
<div class="options-container">
<div class="option-row">
<span>Select a cell using a touch enabled device.Select that cell again to view the customizable touch
toolstrip.</span>
</div>
<div class="option-row">
<span>Customize Toolstrip</span>
</div>
<div class="option-row">
<span>Add new menu item:</span>
</div>
<div class="option-row">
<label for="name">Name:</label>
<input id="name" value="demo_clear" />
</div>
<div class="option-row">
<label for="text">Text:</label>
<input id="text" value="clear" />
</div>
<div class="option-row">
<input type="button" value="Add Item" id="addItem" class="toolbar-setting" @click="addItem($event)" />
<input type="button" value="Add Separator" id="addSeparator" class="toolbar-setting"
@click="addSeparator($event)" />
</div>
<span>Toolstrip Item Style:</span>
<div class="option-row">
<input id="font" value="18px Arial" />
<input type="button" id="setFont" value="Set Font" title="Set font for toolstrip item with specified name"
@click="setFont($event)" />
</div>
<div class="option-row">
<input id="color" value="red" />
<input type="button" id="setForeColor" value="Set Fore Color"
title="Set fore color for toolstrip item with specified name" @click="setForeColor($event)" />
</div>
<div class="option-row">
<input type="button" value="Remove Toolstrip Item" id="removeItem" @click="removeItem($event)" />
<input type="button" value="Clear All Toolstrip Items" id="clear" @click="clear($event)" />
</div>
</div>
</div>
</template>
<script setup>
import GC from "@mescius/spread-sheets";
import { ref } from "vue";
import "@mescius/spread-sheets-vue";
function _getElementById(id) {
return document.getElementById(id);
}
const spreadRef = ref(null);
const autoGenerateColumnsRef = ref(true);
const initSpread = (spread) => {
spreadRef.value = spread;
}
const addItem = (e) => {
let name = _getElementById('name').value;
if (!name) {
alert("Please input a name for toolbar item.")
}
let text = _getElementById('text').value;
let image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8' +
'YQUAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAABMklEQVRIS7XSMUpDQRDG8YCt' +
'FxDsbb1H4lW8wnt38BA2VmIfC0mhhYVVIJXybC0U0gibbx47w+zm290nPIsfbDY7/4GQRQjhX9HLOdHL' +
'OdHLOdFL5ut243UQMnI3fu/nkg81OhxDeVyNS/xc8qFGBmOAhb3OzyWRGhnMQkV+LonU/Dxt1yzG+Dk7' +
'bJ5fSrrtbrfGm7B/e6fBnDZFa0EHQXwMA55NWyI9VVtgcTVxSa9NUVpwFFeNJT1YU7AFxbgqLBnjrQXN' +
'uNIl+Hc9+nhtwVkeaYn/riSYswMGVnmg4ReufYyxAx5P/nngG64giTF2wOP7ONwywCXITBJj7IDHn8CC' +
'3iucwxgXPsbYAY97YFH1AKdgceFjjB3iQGnJDZxAEhc+xtDL3MXyLvyVzh7F5hUWB34T0LLVazuTAAAA' +
'AElFTkSuQmCC';
let item = new GC.Spread.Sheets.Touch.TouchToolStripItem(name, text, image, function () {
spreadRef.value.touchToolStrip.close();
alert("Runing clearing...");
});
spreadRef.value.touchToolStrip.add(item);
}
const removeItem = (e) => {
let name = _getElementById('name').value;
if (!name) {
alert("Please input the name which item to be removed.");
}
spreadRef.value.touchToolStrip.remove(name);
}
const clear = (e) => {
spreadRef.value.touchToolStrip.clear();
}
const addSeparator = (e) => {
spreadRef.value.touchToolStrip.add(new GC.Spread.Sheets.Touch.TouchToolStripSeparator());
}
const setFont = (e) => {
let font = _getElementById('font').value;
if (!font) {
alert("Please input a font for item text.");
}
let name = _getElementById('name').value;
let item = spreadRef.value.touchToolStrip.getItem(name);
if (item) {
item.font(font);
}
}
const setForeColor = (e) => {
let foreColor = _getElementById('color').value;
if (!foreColor) {
alert("Please input a color for item text.");
}
let name = _getElementById('name').value;
let item = spreadRef.value.touchToolStrip.getItem(name);
if (item) {
item.foreColor(foreColor);
}
}
</script>
<style scoped>
.sample {
position: relative;
height: 100%;
overflow: auto;
}
.sample::after {
display: block;
content: "";
clear: both;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
label {
display: inline-block;
min-width: 80px;
}
input,
select {
padding: 4px 8px;
margin-top: 6px;
width: 100%;
box-sizing: border-box;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#app {
height: 100%;
}
</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-resources-en': 'npm:@mescius/spread-sheets-resources-en/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);
