Browse Source

radio、select组件增加必输标识;loading组件修改

pull/49/head
zq 2 weeks ago
parent
commit
8c33b2b2f3
  1. 106
      src/components/GlobalLoading1.vue
  2. 166
      src/components/GuipRadio.vue
  3. 3
      src/components/GuipSelect.vue

106
src/components/GlobalLoading1.vue

@ -1,67 +1,69 @@
<template>
<div class="content-loading-overlay" v-if="isLoading">
<div class="loading-content">
<div ref="animationContainer" class="animation-container"></div>
<div>
<div class="content-loading-overlay" v-show="isLoading">
<div class="loading-content">
<div ref="animationContainer" class="animation-container"></div>
</div>
</div>
<div v-show="!isLoading">
<slot></slot>
</div>
</div>
<div v-else style="height: 100%;">
<slot></slot>
</div>
</template>
<script>
import lottie from 'lottie-web'
import { mapState } from 'vuex'
import defaultAnimation from '@/assets/loadingAni.json' // JSON
import defaultAnimation from '@/assets/loadingAni.json'
export default {
name: 'Loading',
data() {
return {
anim: null
}
},
computed: {
...mapState(['isLoading', 'loadingText'])
},
watch: {
isLoading(newVal) {
if (newVal) {
this.$nextTick(()=>{
this.playAnimation()
})
} else {
this.stopAnimation()
}
}
},
mounted() {
if (this.isLoading) {
this.playAnimation()
name: 'Loading',
data() {
return {
anim: null
}
},
computed: {
...mapState(['isLoading', 'loadingText'])
},
watch: {
isLoading(newVal) {
this.$nextTick(() => {
if (newVal) {
this.playAnimation()
} else {
this.stopAnimation()
}
})
}
},
methods: {
playAnimation() {
//
if (this.anim) {
this.anim.destroy()
this.anim = null
}
console.log('执行动画')
this.anim = lottie.loadAnimation({
container: this.$refs.animationContainer,
renderer: 'svg',
loop: true,
autoplay: true,
animationData: defaultAnimation
})
},
beforeDestroy() {
this.stopAnimation()
},
methods: {
playAnimation() {
this.anim = lottie.loadAnimation({
container: this.$refs.animationContainer,
renderer: 'svg',
loop: true,
autoplay: true,
animationData: defaultAnimation // JSON
})
if (this.anim) {
this.anim.play()
}
},
stopAnimation() {
if (this.anim) {
this.anim.stop()
}
}
stopAnimation() {
if (this.anim) {
this.anim.stop()
}
}
},
beforeDestroy() {
if (this.anim) {
this.anim.destroy() //
}
}
}
</script>

166
src/components/GuipRadio.vue

@ -1,88 +1,88 @@
<template>
<el-form-item
:class="[{'column':column},'form-item']"
:label="label" :prop="prop" :rules="rules">
<el-radio-group
v-model="selectedValue"
v-bind="$attrs"
@change="handleChange"
<template>
<el-form-item
:class="[{'column':column},'form-item']"
:label="label" :prop="prop" :rules="rules" :required="required">
<el-radio-group
v-model="selectedValue"
v-bind="$attrs"
@change="handleChange"
>
<el-radio
v-for="option in options"
:key="option.value"
:label="option.value"
:disabled="option.disabled"
>
<el-radio
v-for="option in options"
:key="option.value"
:label="option.value"
:disabled="option.disabled"
>
<!-- 默认展示和选中显示 不同文案 -->
{{ selectedValue === option.value ? option.selectedLabel : option.label }}
<!-- 自定义 选中图标 -->
<!-- <template #label>
<span><img src="../assets/radio_checked.svg" alt="custom icon" style="width: 16px; height: 16px;"> {{ text }}</span>
</template> -->
</el-radio>
</el-radio-group>
</el-form-item>
</template>
<script>
export default {
name: 'MyRadioGroup',
props: {
//
column:{
type:Boolean,
default:false
},
// [{ label: '', value: '', disabled: false }]
options: {
type: Array,
required: true,
},
// 使 v-model
value: {
type: [String, Number, Boolean],
default: '',
},
// label
label: {
type: String,
default: '',
},
// prop
prop: {
type: String,
default: '',
},
//
rules: {
type: Array,
default: () => [],
},
<!-- 默认展示和选中显示 不同文案 -->
{{( selectedValue === option.value ) ? (option.selectedLabel ? option.selectedLabel : option.label) :option.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</template>
<script>
export default {
name: 'MyRadioGroup',
props: {
//
column:{
type:String,
default:''
},
data() {
return {
selectedValue: this.value, //
};
required:{
type:Boolean,
default:false
},
watch: {
// value selectedValue
value(newVal) {
this.selectedValue = newVal;
},
// [{ label: '', value: '', disabled: false }]
options: {
type: Array,
required: true,
},
methods: {
//
handleChange(value) {
this.$emit('input', value); // v-model
this.$emit('change', value); // change
},
// 使 v-model
value: {
type: [String, Number, Boolean],
default: '',
},
};
</script>
<style scoped>
/* 自定义样式 */
.el-radio-group {
margin: 10px 0;
}
</style>
// label
label: {
type: String,
default: '',
},
// prop
prop: {
type: String,
default: '',
},
//
rules: {
type: Array,
default: () => [],
},
},
data() {
return {
selectedValue: this.value, //
};
},
watch: {
// value selectedValue
value(newVal) {
this.selectedValue = newVal;
},
},
methods: {
//
handleChange(value) {
this.$emit('input', value); // v-model
this.$emit('change', value); // change
},
},
};
</script>
<style scoped>
/* 自定义样式 */
.el-radio-group {
margin: 10px 0;
}
</style>

3
src/components/GuipSelect.vue

@ -1,5 +1,5 @@
<template>
<el-form-item :style="{ ...style, height: height, ...styleObject }"
<el-form-item :style="{ ...style, height: height, ...styleObject }" :required="required"
:class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, 'form-item']"
:label="label" :prop="prop" :rules="rules">
<p v-if="desc" class="desc_right">{{ desc }}</p>
@ -32,6 +32,7 @@ export default {
},
styleObject: Object,
disabled: Boolean,
required: Boolean,
defaultValue: [String, Number, Array],
placeholder: String,
width: String,

Loading…
Cancel
Save