hash 优化

src/components/inputBlock.vue

+<template>
+    <div style="position: relative;">
+        <slot></slot>
+        <div class="right-bottom">
+            <slot name="extra">
+                <Button v-if="text" type="primary" size="small" @click="buttonClick">{{ text }}</Button>
+            </slot>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: 'inputBlock',
+    props: {
+        text: {
+            type: String,
+            default: ""
+        }
+    },
+    methods: {
+        buttonClick() {
+            this.$emit('on-default-right-bottom-click');
+        }
+    }
+};
+</script>
+
+<style scoped>
+.right-bottom {
+    position: absolute;
+    bottom: 4px;
+    right: 4px;
+}
+</style>

src/tool.js

@@ -3,6 +3,7 @@ import ViewUI from 'view-design'
 import './statics/theme.less'
 import router from './tool.router'
 import optionBlock from './components/optionBlock'
+import inputBlock from './components/inputBlock'
 import {plugin as modelPlugin} from './tool/model'
 import cache from './tool/cache'
 import setting from './tool/setting'
@@ -21,6 +22,7 @@ const run = () => {
     Vue.use(ViewUI)
     Vue.use(modelPlugin)
     Vue.component('option-block', optionBlock);
+    Vue.component('input-block', inputBlock);
 
     new Vue({
         i18n,

src/tool/clipboard.js

@@ -12,12 +12,10 @@ export const copy = (data,successCallback)=>{
 }
 
 export const paste = ()=>{
-    document.querySelector(
-        '#clipboard').innerHTML = '<textarea id="clipboard-text"></textarea>'
+    document.querySelector('#clipboard').innerHTML = '<textarea id="clipboard-text"></textarea>'
     document.querySelector('#clipboard-text').select()
     document.execCommand('paste')
-    let r = document.querySelector('#clipboard-text').value ||
-        document.querySelector('#clipboard-text').innerHTML
+    let r = document.querySelector('#clipboard-text').value || document.querySelector('#clipboard-text').innerHTML
     document.querySelector('#clipboard').innerHTML = ''
     return r ? r : ''
 }

src/views/tool/hash.vue

 <template>
-    <div>
-        <Input v-model="current.input" :rows="7" type="textarea" placeholder="内容"></Input>
-        <option-block>
-            <FormItem>
-                <ButtonGroup>
-                    <Button type="primary" @click="handle(v)" v-for="v in type" :key="v">{{ v }}</Button>
-                </ButtonGroup>
-            </FormItem>
-            <FormItem>
-                <Checkbox v-model="current.isUppercase">大写字母</Checkbox>
-            </FormItem>
-        </option-block>
-        <Input v-model="current.output" :rows="7" type="textarea" placeholder="结果"></Input>
+    <div id="tool-hash">
+        <Row :gutter="10">
+            <Col span="8">
+                <input-block text="内容">
+                    <Input v-model="current.input" :rows="18" type="textarea" placeholder="内容"></Input>
+                    <Checkbox slot="extra" v-model="current.isUppercase">大写字母</Checkbox>
+                </input-block>
+            </Col>
+            <Col span="16">
+                <input-block style="margin-bottom: 6px" :text="type" v-for="type in types" :key="type" @on-default-right-bottom-click="()=>copy(type)">
+                    <Input :value="result(type)" :placeholder="type" :rows="3" type="textarea"></Input>
+                </input-block>
+            </Col>
+        </Row>
     </div>
 </template>
 <script>
 import crypto from "crypto-js"
 
+const sm = require('sm-crypto');
 export default {
     created() {
         this.current = Object.assign(this.current, this.$getToolData("input"))
     },
-    methods: {
-        handle(v) {
-            if (this.current.input) {
-                switch (v) {
-                    case "md5":
-                        this.current.output = crypto.MD5(this.current.input).toString();
-                        break;
-                    case "sha1":
-                        this.current.output = crypto.SHA1(this.current.input).toString();
-                        break;
-                    case "sha256":
-                        this.current.output = crypto.SHA256(this.current.input).toString();
-                        break;
-                    case "sha512":
-                        this.current.output = crypto.SHA512(this.current.input).toString();
-                        break;
-                    case "sm3":
-                        this.current.output = require('sm-crypto').sm3(this.current.input);
-                        break;
-                    default:
-                        return;
-                }
-                if (this.current.isUppercase) {
-                    this.current.output = this.current.output.toUpperCase()
-                }
-                this.current.operation = v;
-                this.$clipboardCopy(this.current.output);
+    computed: {
+        md5() {
+            if (!this.current.input) {
+                return "";
+            }
+            let result = crypto.MD5(this.current.input).toString();
+            return this.current.isUppercase ? result.toUpperCase() : result;
+        },
+        sha1() {
+            if (!this.current.input) {
+                return "";
+            }
+            let result = crypto.SHA1(this.current.input).toString();
+            return this.current.isUppercase ? result.toUpperCase() : result;
+        },
+        sha256() {
+            if (!this.current.input) {
+                return "";
+            }
+            let result = crypto.SHA256(this.current.input).toString();
+            return this.current.isUppercase ? result.toUpperCase() : result;
+        },
+        sha512() {
+            if (!this.current.input) {
+                return "";
+            }
+            let result = crypto.SHA512(this.current.input).toString();
+            return this.current.isUppercase ? result.toUpperCase() : result;
+        },
+        sm3() {
+            if (!this.current.input) {
+                return "";
+            }
+            let result = sm.sm3(this.current.input);
+            return this.current.isUppercase ? result.toUpperCase() : result;
+        },
+    },
+    watch: {
+        current: {
+            handler() {
                 this.$saveToolData(this.current);
+            },
+            deep: true
+        }
+    },
+    methods:{
+        result(type){
+            return this[type]
+        },
+        copy(type){
+            if (this[type]){
+                this.$clipboardCopy(this[type])
             }
         }
     },
@@ -57,11 +83,9 @@ export default {
             current: {
                 input: "",
                 isUppercase: false,
-                output: "",
-                operation: ""
             },
-            type: ['md5', 'sha1', 'sha256', 'sha512', "sm3"]
+            types: ['md5', 'sha1', 'sha256', 'sha512', "sm3"]
         }
     },
 }
-</script>
\ No newline at end of file
+</script>