1. /* eslint-disable no-undef */
    2. /* eslint-disable react/react-in-jsx-scope */
    3. const types = {
    4. type: 'SAMPLE_RAINBOW_TEXT_WIDGET',
    5. icon: 'https://static.codemao.cn/appcraft/tmp-extension-widgets/development/rainbow-text.png',
    6. title: '彩虹文字',
    7. platforms: ['web', 'android', 'ios'],
    8. isInvisibleWidget: false,
    9. isGlobalWidget: false,
    10. builtIns: {
    11. size: {
    12. width: 100,
    13. height: 50,
    14. },
    15. },
    16. properties: [
    17. {
    18. key: 'startColor',
    19. label: '开始颜色',
    20. valueType: 'color',
    21. defaultValue: 'red',
    22. },
    23. {
    24. key: 'endColor',
    25. label: '结束颜色',
    26. valueType: 'color',
    27. defaultValue: 'blue',
    28. },
    29. ],
    30. methods: [
    31. {
    32. key: 'change',
    33. label: '变色',
    34. params: [],
    35. },
    36. ],
    37. events: [],
    38. };
    39. function Color() {
    40. this.r = Math.floor(Math.random() * 255);
    41. this.g = Math.floor(Math.random() * 255);
    42. this.b = Math.floor(Math.random() * 255);
    43. this.color = 'rgba(' + this.r + ',' + this.g + ',' + this.b + ',0.8)';
    44. }
    45. class RainbowTextWidget extends VisibleWidget {
    46. constructor(props) {
    47. super(props);
    48. this.startColor = props.startColor;
    49. this.endColor = props.endColor;
    50. }
    51. change = () => {
    52. const startColor = new Color().color;
    53. const endColor = new Color().color;
    54. this.setProps({
    55. startColor,
    56. endColor,
    57. });
    58. };
    59. render() {
    60. return (
    61. <div
    62. onClick={this.change}
    63. style={{
    64. backgroundImage: `linear-gradient(to right, ${this.startColor}, ${this.endColor})`,
    65. // backgroundImage: `linear-gradient(to right, yellow, red)`,
    66. backgroundClip: 'text',
    67. WebkitBackgroundClip: 'text',
    68. color: 'transparent',
    69. }}>
    70. 彩虹文字
    71. </div>
    72. );
    73. }
    74. }
    75. exports.types = types;
    76. exports.widget = RainbowTextWidget;