Use native controls

This commit is contained in:
Pig Fang 2019-11-27 17:21:48 +08:00
parent 2b538685ff
commit c75f4429ac
3 changed files with 41 additions and 22 deletions

View File

@ -37,7 +37,10 @@
<div class="d-flex justify-content-between mb-3">
<div>
<el-switch v-model="remember" :active-text="$t('auth.keep')" />
<label>
<input v-model="remember" type="checkbox">
{{ $t('auth.keep') }}
</label>
</div>
<a v-t="'auth.forgot-link'" :href="`${baseUrl}auth/forgot`" />
</div>
@ -56,13 +59,9 @@
</template>
<script>
import Vue from 'vue'
import { Switch } from 'element-ui'
import Captcha from '../../components/Captcha.vue'
import emitMounted from '../../components/mixins/emitMounted'
Vue.use(Switch)
export default {
name: 'Login',
components: {

View File

@ -17,9 +17,33 @@
<div class="form-group">
<label v-t="'skinlib.upload.texture-type'" />
<br>
<el-radio v-model="type" label="steve">Steve</el-radio>
<el-radio v-model="type" label="alex">Alex</el-radio>
<el-radio v-model="type" label="cape">{{ $t('general.cape') }}</el-radio>
<label class="mr-2">
<input
v-model="type"
type="radio"
name="type"
value="steve"
>
Steve
</label>
<label class="mr-2">
<input
v-model="type"
type="radio"
name="type"
value="alex"
>
Alex
</label>
<label class="mr-2">
<input
v-model="type"
type="radio"
name="type"
value="cape"
>
{{ $t('general.cape') }}
</label>
</div>
<div class="form-group">
@ -57,12 +81,14 @@
<div class="card-footer">
<div class="container pl-0 pr-0 d-flex justify-content-between">
<el-switch
v-model="isPrivate"
<label
class="mt-2"
:active-text="$t('skinlib.upload.set-as-private')"
:title="$t('skinlib.upload.privacy-notice')"
/>
data-toggle="tooltip"
>
<input v-model="isPrivate" type="checkbox">
{{ $t('skinlib.upload.set-as-private') }}
</label>
<button v-if="uploading" class="btn btn-success" disabled>
<i class="fa fa-spinner fa-spin" /> {{ $t('skinlib.uploading') }}
</button>
@ -84,7 +110,7 @@
</div>
<div class="col-md-6">
<previewer
:skin="type !== 'cape' && texture"
:skin="type !== 'cape' ? texture : ''"
:cape="type === 'cape' ? texture : ''"
:model="type"
/>
@ -94,15 +120,10 @@
</template>
<script>
import Vue from 'vue'
import FileUpload from 'vue-upload-component'
import { isSlimSkin } from 'skinview3d'
import { Radio, Switch } from 'element-ui'
import emitMounted from '../../components/mixins/emitMounted'
Vue.use(Radio)
Vue.use(Switch)
export default {
name: 'Upload',
components: {

View File

@ -1,7 +1,6 @@
/* eslint-disable accessor-pairs */
import Vue from 'vue'
import { mount } from '@vue/test-utils'
import { Radio } from 'element-ui'
import * as skinview3d from 'skinview3d'
import Upload from '@/views/skinlib/Upload.vue'
import { flushPromises } from '../../utils'
@ -96,23 +95,23 @@ test('process input file', () => {
type Component = Vue & {
name: string
texture: string
type: string
inputFile(attrs?: { file: Blob, name: string }): void
}
const wrapper = mount<Component>(Upload, {
stubs: ['file-upload'],
})
const radioes = wrapper.findAll(Radio)
wrapper.vm.inputFile()
expect(wrapper.vm.name).toBe('')
wrapper.vm.inputFile({ file: blob, name: '123.png' })
expect(wrapper.vm.name).toBe('123')
expect(radioes.at(1).classes()).toContain('is-checked')
expect(wrapper.vm.type).toBe('alex')
wrapper.vm.inputFile({ file: blob, name: '456.png' })
expect(wrapper.vm.name).toBe('123')
expect(radioes.at(0).classes()).toContain('is-checked')
expect(wrapper.vm.type).toBe('steve')
wrapper.setData({ name: '' })
wrapper.vm.inputFile({ file: blob, name: '789' })