动画选择组件改为函数式

vue/src/views/app/components/SetAnimation.vue

@@ -1,43 +1,45 @@
-<template>
-    <el-dropdown size="medium" trigger="click" @command="$emit('select',$event)">
-        <el-button type="text" title="选择背景动画">
-            <svg-icon icon="show"/>
-        </el-button>
-        <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item
-                    v-for="p in animations"
-                    :key="p.value"
-                    :disabled="p.value===value"
-                    :command="p.value"
-            >
-                {{p.name}}
-            </el-dropdown-item>
-        </el-dropdown-menu>
-    </el-dropdown>
-</template>
-
-<script>
+<script type="text/jsx">
+    const animations = [
+        {name: '无', value: ''},
+        {name: '烟花', value: 'firework'},
+        {name: '上帝之光', value: 'godrays'},
+        {name: '简单粒子', value: 'moveFollowMouse'},
+        {name: '球', value: 'particleBall'},
+        {name: '网络', value: 'particleNetwork'},
+        {name: '波浪', value: 'particleWave'},
+        {name: '雨', value: 'reflectRain'},
+        {name: '流星雨', value: 'sparkRain'},
+        {name: '阳光', value: 'sunlight'},
+    ]
     export default {
         name: "SetAnimation",
+        functional: true,
         props: {
-            value: String
+            value: String,
+            customClass: String
         },
-        data() {
-            return {
-                animations: [
-                    {name: '无', value: ''},
-                    {name: '烟花', value: 'firework'},
-                    {name: '上帝之光', value: 'godrays'},
-                    {name: '简单粒子', value: 'moveFollowMouse'},
-                    {name: '球', value: 'particleBall'},
-                    {name: '网络', value: 'particleNetwork'},
-                    {name: '波浪', value: 'particleWave'},
-                    {name: '雨', value: 'reflectRain'},
-                    {name: '流星雨', value: 'sparkRain'},
-                    {name: '阳光', value: 'sunlight'},
-                ]
-            }
-        },
-        methods: {}
+        render(h, context) {
+            const {value, customClass} = context.props
+            return (
+                <el-dropdown class={customClass} size="medium" trigger="click" onCommand={context.listeners.select}>
+                    <el-button type="text" title="选择背景动画">
+                        <svg-icon icon="show"/>
+                    </el-button>
+                    <el-dropdown-menu slot="dropdown">
+                        {
+                            animations.map(animation => (
+                                <el-dropdown-item
+                                    key={animation.value}
+                                    disabled={animation.value === value}
+                                    command={animation.value}
+                                >
+                                    {animation.name}
+                                </el-dropdown-item>
+                            ))
+                        }
+                    </el-dropdown-menu>
+                </el-dropdown>
+            )
+        }
     }
 </script>

vue/src/views/app/login.vue

@@ -1,10 +1,14 @@
 <template>
     <div class="login-page">
         <canvas id="login-background"/>
-        <div class="login-container">
+        <div class="login-container" @click.stop>
             <div class="title">
                 进销存管理系统
-                <set-animation :value="loginPageBackgroundAnimation" class="set-animation" @select="setAnimation"/>
+                <set-animation
+                        :value="loginPageBackgroundAnimation"
+                        custom-class="set-animation"
+                        @select="setAnimation"
+                />
             </div>
             <el-form ref="form" :model="form" :rules="rules" autocomplete="on" label-position="left">
                 <el-form-item prop="username">

vue/src/views/app/register.vue

@@ -1,10 +1,14 @@
 <template>
     <div class="login-page">
         <canvas id="login-background"/>
-        <div class="login-container">
+        <div class="login-container" @click.stop>
             <div class="title">
                 用户注册
-                <set-animation :value="registerPageBackgroundAnimation" class="set-animation" @select="setAnimation"/>
+                <set-animation
+                        :value="registerPageBackgroundAnimation"
+                        custom-class="set-animation"
+                        @select="setAnimation"
+                />
             </div>
             <el-form ref="form" :model="form" :rules="rules" label-position="left">
                 <el-form-item prop="username">