Lv.1
丙未子丁甲戌子戌己戊
签名:你猜
在 请教一下关于COCO多选项的随机位置问题 中回复
再送你这个
// 控件类型定义
const types = {
type: 'SAMPLE_BLINK_BUTTON_WIDGET',
icon: 'https://static.codemao.cn/appcraft/extension-widgets/production/blink-button.svg',
title: '闪烁按钮',
isInvisibleWidget: false,
isGlobalWidget: false,
properties: [
// ...
],
methods: [
// ...
],
events: [
// ...
],
};
const types = {
properties: [
{
key: '__width', // 内置属性
label: '宽度',
valueType: 'number', // 数字类型
defaultValue: 68,
},
{
key: '__height', // 内置属性
label: '高度',
valueType: 'number', // 数字类型
defaultValue: 36,
},
{
key: 'content',
label: '按钮文案',
valueType: 'string', // 字符串类型
defaultValue: '按钮',
},
{
key: 'disabled',
label: '是否禁用',
valueType: 'boolean', // 布尔类型
defaultValue: false,
},
{
key: 'mode',
label: '模式',
valueType: 'string',
defaultValue: 'mode1',
dropdown: [ // 下拉属性
{ label: '模式一', value: 'mode1' },
{ label: '模式二', value: 'mode2' }
],
},
{
key: 'backgroundColor',
label: '按钮颜色',
valueType: 'color', // 颜色类型
defaultValue: '#1495ef',
},
],
};
const types = {
methods: [
{
key: 'blink',
label: '开始闪烁',
params: [
{
key: 'times',
label: '次数',
valueType: 'number',
defaultValue: 5,
},
],
},
{
key: 'getClickCount',
label: '获取点击次数',
params: [],
valueType: 'number', // 方法有返回值
},
],
};
const types = {
events: [
{
key: 'onClick',
label: '被点击',
params: [
{
key: 'content',
label: '按钮文案',
valueType: 'string',
},
]
}
]
};
class BlinkButtonWidget extends VisibleWidget {
// 初始化
constructor(props) {
super(props);
this.content = props.content;
this.disabled = props.disabled;
this.mode = props.mode;
this.backgroundColor = props.backgroundColor;
this.clickCount = 0;
}
// 方法定义,用于事件处理
onClick = () => {
this.emit('onClick', this.content);
this.clickCount++;
};
// 方法定义
blink = (times) => {
// 开始闪烁
for (let i = 0; i < times; i++) {
setTimeout(() => {
this.setProps({
backgroundColor: getRandomColor(),
});
}, i * 100);
}
};
getClickCount = () => {
return this.clickCount;
};
// 渲染函数
render() {
return (
<button
onClick={this.onClick}
disabled={this.disabled}
style={{
background: this.disabled ? '#ccc' : this.backgroundColor,
borderRadius: this.mode === 'mode1' ? 5 : 0,
fontWeight: this.mode === 'mode1' ? 'bold' : 'normal',
width: '100%',
height: '100%',
border: 'none',
color: '#fff',
}}>
{this.content}
</button>
);
}
}
class BlinkButtonWidget extends VisibleWidget {
constructor(props) {
super(props);
this.content = props.content;
this.disabled = props.disabled;
this.mode = props.mode;
this.backgroundColor = props.backgroundColor;
this.clickCount = 0;
}
}
class BlinkButtonWidget extends VisibleWidget {
// 方法定义
blink = (times) => {
// 开始闪烁
for (let i = 0; i < times; i++) {
setTimeout(() => {
this.setProps({
backgroundColor: getRandomColor(),
});
}, i * 100);
}
};
// 获取按钮点击次数
getClickCount = () => {
return this.clickCount;
};
}
this.emit('onClick', content);
this.emit('onGetApiSuccess', code, data);
this.emit('onInputBlur');
class BlinkButtonWidget extends VisibleWidget {
// 渲染方法
render() {
return (
<button
onClick={this.onClick}
disabled={this.disabled}
style={{
background: this.disabled ? '#ccc' : this.backgroundColor,
borderRadius: this.mode === 'mode1' ? 5 : 0,
fontWeight: this.mode === 'mode1' ? 'bold' : 'normal',
width: '100%',
height: '100%',
border: 'none',
color: '#fff',
}}>
{this.content}
</button>
);
}
}2023-04-13T21:19:52 点赞:0
在 求屑王心里阴影面积 中回复
喵0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000平方公里
2023-04-22T18:06:30 点赞:0