bab-icon/resources/assets/js/components/admin/captcha.vue

<template>
    <el-row class="form-group">
        <el-col :span="3" style="min-height:50px;padding-top:10px;">
            <label style="margin-left:10px;vertical-align: middle;" class="control-label">{{label ? label : 'Text'}}</label>
        </el-col>
        <el-col :span="10">
            <el-input
                type="text"
                v-model="text"
                :placeholder="placeholder ? placeholder : ''"
                :disabled="disabled ? true : false"
                :name="name ? name : 'captcha'"
                :minlength="minlength ? parseInt(minlength) : 0"
                :maxlength="maxlength ? parseInt(maxlength) : 200"
                :auto-complete="autoComplete ? 'on' : 'off'"
                :readonly="readonly ? true : false"
                :autofocus="autofocus ? true : false"
                :show-password="showPassword ? true : false"
                :id="name"
                :size="size ? size : 'large'">
            </el-input>
        </el-col>
        <el-col :span="11">
            <div class="classJs">
                <div>
                    <img style="cursor: pointer" v-bind:src="captchaBindSrc" v-on:click="captchaChangeSrc" title="点击切换" alt="">
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        props: ['label','value','placeholder','disabled','name','minlength','maxlength','readonly','autofocus','autoComplete','size','src','showPassword'],
        data() {
            return {
                text: this.value ? this.value : '',
                captchaBindSrc: this.src
            };
        },
        mounted() {},
        methods: {
            captchaChangeSrc: function () {
                this.captchaBindSrc = this.captchaBindSrc.split('&')[0] + '&random=' + Math.random();
            }
        }
    }
</script>

<style scoped>
    .classJs {
        margin-left: 10px;
        vertical-align: middle;
        height:42px;
        line-height:42px;
    }
    .red{
        color: red;
    }
</style>