**--- 组件的编写**
文件名:jRuleIcon.vue
<template>
<div>
<Icon
type="ios-checkmark-circle"
:color="currentType"
size="17"
style="position: absolute; right:-20px; top: 9px;z-index:99"
v-show="rule == 2 "
/>
<Tooltip
:content="tooltip"
placement="top"
style="position: absolute; right:-20px; top: 3px;z-index:99"
>
<Icon
type="ios-close-circle"
color="#ed4014"
size="17"
v-show="rule == 1"
style="cursor: pointer;"
/>
</Tooltip>
</div>
</template>
<script>
export default {
name: "jRuleIcon",
props: {
rule: { type: Number, default: 0 }, // 0没有校验 1校验失败 2校验成功
tooltip:{type:String,default:'必填项'} //校验失败鼠标悬浮弹出提示的内容
},
data() {
return {
currentType:"green" // 默认为绿色
};
},
created() {},
mounted() {
this.changeTypeTheme()
},
methods: {
changeTypeTheme(){
let themeType = localStorage.getItem('themeType') // 缓存的用户自选的颜色
if(themeType){
if(themeType === 'red'){
this.currentType = '#b30027'
}
if(themeType === 'azure'){
this.currentType = '#0E7F98'
}
if(themeType === 'green'){
this.currentType = '#007F61'
}
if(themeType === 'skyBlue') {
this.currentType = '#0074D2'
}
if(themeType === 'royalBlue') {
this.currentType = '#4E5FC3'
}
if(themeType === 'orange') {
this.currentType = '#F85900'
}
if(themeType === 'grey') {
this.currentType = '#848484'
}
}
}
},
components: {},
};
</script>
1. ios-checkmark-circle 、ios-close-circle 是vue对号和错号的图片
jRuleIcon.vue 要全局应用,所以要在main.js中进行引用。
import jRuleIcon from ‘./components/newComponents/jRuleIcon’;
Vue.component(jRuleIcon.name, jRuleIcon);
jRuleIcon应用
<Form
ref="registerForm"
:label-width="110"
:rules="ruleValidateRegister"
>
<FormItem label="账号" prop="actNum">
<Input v-model="addForm.actNum" v-focusNext
placeholder="限定32个字符"/>
<jRuleIcon :rule="actNumRule"></jRuleIcon>
</FormItem>
......
</Form>
<script>
export default {
name: "XXXX",
props: {
},
data() {
return {
actNumRule:"0" // 默认值0,不展示任何状态
addForm: {
actNum: "",
},
ruleValidateRegister: {
actNum: [
{
required: true,
message: " ",
trigger: "blur", // 输入框的type类型
validator: (rule, value, callback) => {
if (!value) {
this.actNumRule = 1;
callback(new Error(" ")); // 这里要是不提示,要传空格!!!
} else {
this.actNumRule = 2;
callback();
}
},
},
]
}
};
},
created() {},
mounted() {
},
methods: {
// 方法
....
....
},
components: {},
};
</script>