以下为完整代码，可在控件商城导入

    1. /* eslint-disable no-undef */
    2. /* eslint-disable react/react-in-jsx-scope */
    3. const types = {
    4.   type: 'SAMPLE_BLINK_BUTTON_WIDGET',
    5.   icon: 'https://static.codemao.cn/appcraft/extension-widgets/production/blink-button.svg',
    6.   title: '闪烁按钮',
    7.   platforms: ['web', 'android', 'ios'],
    8.   isInvisibleWidget: false,
    9.   isGlobalWidget: false,
    10.   properties: [
    11.     {
    12.       key: '__width',
    13.       label: '宽度',
    14.       valueType: 'number',
    15.       defaultValue: 68,
    16.     },
    17.     {
    18.       key: '__height',
    19.       label: '高度',
    20.       valueType: 'number',
    21.       defaultValue: 40,
    22.     },
    23.     {
    24.       key: 'content',
    25.       label: '按钮文案',
    26.       valueType: 'string',
    27.       defaultValue: '按钮',
    28.     },
    29.     {
    30.       key: 'backgroundColor',
    31.       label: '按钮颜色',
    32.       valueType: 'color',
    33.       defaultValue: '#1495ef',
    34.     },
    35.     {
    36.       key: 'textColor',
    37.       label: '文本颜色',
    38.       valueType: 'color',
    39.       defaultValue: '#ffffff',
    40.     },
    41.     {
    42.       key: 'fontSize',
    43.       label: '字体大小',
    44.       valueType: 'number',
    45.       defaultValue: 16,
    46.     },
    47.     {
    48.       key: 'borderRadius',
    49.       label: '圆角',
    50.       valueType: 'number',
    51.       defaultValue: 5,
    52.     },
    53.   ],
    54.   methods: [
    55.     {
    56.       key: 'blink',
    57.       label: '开始闪烁',
    58.       params: [],
    59.     },
    60.   ],
    61.   events: [
    62.     {
    63.       key: 'onClick',
    64.       label: '被点击',
    65.       params: [
    66.         {
    67.           key: 'content',
    68.           label: '按钮文字',
    69.           valueType: 'string',
    70.         },
    71.       ],
    72.     },
    73.   ],
    74. };
    76. class BlinkButtonWidget extends VisibleWidget {
    77.   constructor(props) {
    78.     super(props);
    79.     this.content = props.content;
    80.     this.backgroundColor = props.backgroundColor;
    81.     this.borderRadius = props.borderRadius;
    82.     this.fontSize = props.fontSize;
    83.     this.textColor = props.textColor;
    84.   }
    86.   // dom 绑定的事件方法必须使用箭头函数，或者添加 bind
    87.   onClick = () => {
    88.     this.emit('onClick', this.content);
    89.   };
    91.   blink = () => {
    92.     const startColor = this.backgroundColor;
    93.     setTimeout(() => {
    94.       this.setProps({
    95.         backgroundColor: this.getRandomColor(),
    96.       });
    97.     }, 100);
    98.     setTimeout(() => {
    99.       this.setProps({
    100.         backgroundColor: this.getRandomColor(),
    101.       });
    102.     }, 200);
    103.     setTimeout(() => {
    104.       this.setProps({
    105.         backgroundColor: this.getRandomColor(),
    106.       });
    107.     }, 300);
    108.     setTimeout(() => {
    109.       this.setProps({
    110.         backgroundColor: this.getRandomColor(),
    111.       });
    112.     }, 400);
    113.     setTimeout(() => {
    114.       this.setProps({
    115.         backgroundColor: this.getRandomColor(),
    116.       });
    117.     }, 500);
    118.     setTimeout(() => {
    119.       this.setProps({
    120.         backgroundColor: this.getRandomColor(),
    121.       });
    122.     }, 600);
    123.     setTimeout(() => {
    124.       this.setProps({
    125.         backgroundColor: startColor,
    126.       });
    127.     }, 700);
    128.   };
    130.   getRandomColor() {
    131.     const r = Math.floor(Math.random() * 255);
    132.     const g = Math.floor(Math.random() * 255);
    133.     const b = Math.floor(Math.random() * 255);
    134.     const color = 'rgb(' + r + ',' + g + ',' + b + ')';
    135.     return color;
    136.   }
    138.   render() {
    139.     return (
    140.       <button
    141.         onClick={this.onClick}
    142.         style={{
    143.           background: this.backgroundColor,
    144.           minWidth: 30,
    145.           minHeight: 20,
    146.           width: '100%',
    147.           height: '100%',
    148.           border: 'none',
    149.           borderRadius: this.borderRadius,
    150.           color: this.textColor,
    151.           fontSize: this.fontSize,
    152.         }}>
    153.         {this.content}
    154.       </button>
    155.     );
    156.   }
    157. }
    159. exports.types = types;
    160. exports.widget = BlinkButtonWidget;