动画选择组件改为函数式

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

@@ -1,30 +1,5 @@
-<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>
-    export default {
-        name: "SetAnimation",
-        props: {
-            value: String
-        },
-        data() {
-            return {
-                animations: [
+<script type="text/jsx">
+    const animations = [
         {name: '无', value: ''},
         {name: '烟花', value: 'firework'},
         {name: '上帝之光', value: 'godrays'},
@@ -36,8 +11,35 @@
         {name: '流星雨', value: 'sparkRain'},
         {name: '阳光', value: 'sunlight'},
     ]
-            }
+    export default {
+        name: "SetAnimation",
+        functional: true,
+        props: {
+            value: String,
+            customClass: String
         },
-        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">