图标错误提示vue版，组件方式

**--- 组件的编写**
文件名：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>