图标错误提示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>

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在Vue.js 3中,我们可以通过在VSCode编辑器中安装相应的插件来获得@目录提示的功能。以下是具体的步骤: 1. 打开VSCode编辑器,点击左侧的扩展图标(或者按下Ctrl + Shift + X)。 2. 在搜索栏中输入"vetur",并点击安装Vue.js插件(通常是第一个结果)。 3. 安装完毕后,点击左侧的文件资源管理器图标(或者按下Ctrl + Shift + E),打开你的Vue.js项目文件夹。 4. 在项目文件夹中找到一个名为"jsconfig.json"的文件(如果没有,请创建一个)。 5. 在"jsconfig.json"文件中添加以下内容: ```json { "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] } }, "exclude": ["node_modules", ".vscode"] } ``` 这里假设你的源代码文件夹是"src",如果不是,请根据实际情况进行调整。 6. 保存"jsconfig.json"文件,并重启VSCode编辑器。 7. 现在,当你在代码中使用"@/"引入其他模块时,VSCode会自动为你提供目录提示。 请注意,在完成上述步骤后,如果你添加了新的文件或文件夹,请重新启动VSCode,以便插件正确更新目录提示。 希望以上步骤对你有帮助,享受Vue.js 3和VSCode带来的愉快开发体验! ### 回答2: 在Vue3中,可以通过配置Vue的语言服务插件提供对VS Code的@目录的提示支持。 第一步是在VS Code中安装所需的插件。打开Extensions视图(ctrl+shift+x),搜索并安装Vetur插件。安装完成后,重启VS Code。 然后,在Vue项目的根目录下创建一个`jsconfig.json`文件。这个文件是用来配置项目的JavaScript语言服务的。在该文件中,我们需要指定`@`目录的别名和路径。例如,如果我们的`@`目录指向`src`文件夹,那么我们可以将`jsconfig.json`的内容设为: ```json { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } }, "exclude": ["node_modules", "dist"] } ``` 配置完成后,VS Code会根据`jsconfig.json`的配置提供对`@`目录的智能提示。在Vue组件中,可以使用`import`或者`require`语法来引入模块或文件。例如,我们可以这样引入`@/components/Example.vue`组件: ```javascript import Example from '@/components/Example.vue'; ``` 这样,VS Code会根据配置提示`@/components/Example.vue`的路径和文件存在与否。 总结,使用Vue3和VS Code的Vetur插件,配合正确的`jsconfig.json`配置文件,可以实现对`@`目录的智能提示和路径错误提示,提高开发效率。 ### 回答3: 在Vue3中,VS Code可以通过安装相关的插件来实现目录提示功能。 首先,在VS Code的插件商店中搜索并安装"Vetur"插件。Vetur是一个针对Vue项目的扩展,可以为Vue文件提供更好的语法高亮、代码提示错误检查等功能。 安装完毕后,打开Vue项目的根目录,找到项目的vue.config.js文件(如果没有则新建一个),在其中添加以下配置: ``` module.exports = { configureWebpack: { resolve: { alias: { '@': require('path').resolve(__dirname, 'src') } } } }; ``` 上述配置中的resolve.alias部分将@符号映射为项目的src路径。这样,在项目中使用@来代表src路径时,VS Code就可以正确地进行目录提示。 保存vue.config.js文件后,重启VS Code。现在,当你在Vue单文件组件中输入@符号时,VS Code将自动为你提示src目录下的文件和文件夹。 需要注意的是,以上步骤仅适用于Vue项目,并且要求使用Vue CLI创建的项目结构。如果你是在其他框架或项目结构下使用Vue,可能需要进行一些自定义的配置才能实现目录提示
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值