动画选择组件改为函数式

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

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