【Vue】补充一些需要注意的小点

目录

一、vue中引入图片无效

二、输入框使用@change 事件，值改变或者按回车触发

三、编辑时没有点击提交修改，关掉编辑弹框后，页面会跟着变化

四、树状的label是返回数据的两个字段的拼接 

五、获取当前页的title

六、反向代理

七、post提交数据按json格式提交（添加请求头）

八、vue中css使用data中的数据

---

一、vue中引入图片无效

在script中引入图片无效：本地图片需要使用require引入。例如 imgUrl: require("../assets/images/img.png")

二、输入框使用@change 事件，值改变或者按回车触发

如果是用from 表单包裹的input输入框 按回车会触发表单的提交事件，所以只需要在from 处添加 @submit.native.prevent 阻止默认提交

三、编辑时没有点击提交修改，关掉编辑弹框后，页面会跟着变化

一般都是直接赋值，属于浅拷贝，这时就需要深拷贝

// 编辑
    handleEdit (row) {
      this.form = JSON.parse(JSON.stringify(row)) // 深拷贝
      this.dialogVisible = true
    },

四、树状的label是返回数据的两个字段的拼接 

 // 树状
      defaultProps: {
        children: 'children',
        label (a, b) {
          return a.orderindex + '.' + a.task
        }
      },

五、获取当前页的title

1、在router.js中，每一个页面的meta的title必须填写 

2、在路由拦截器中获取title

router.beforeEach((to, from, next) => {
    /* 路由发生变化修改页面title */
    if (to.meta.title) {
        document.title = to.meta.title;
    }
})

3、使用

<div>{{$route.meta.title}}</div>

六、反向代理

在vue.config.js中加入proxy

注意：反向代理可以不止一个，依次添加即可

module.exports = {
 devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/api': {
        target: 'https://dexon.damai-tech.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      },
     //'/Upload': {
        //
      //}
    },
  },
}

七、post提交数据按json格式提交（添加请求头）

第一步：设置局部还是全局

方法一：局部设置在api中

headers:{
  'Content-Type':'application/json;charset-UIF-8',
}

方法二：全局设置在utils的request.js中的请求拦截器中

如果post请求的数据为json字符串，则可以在请求拦截器中统一添加（判断qs.stringify(config.params)，这就是转换为json字符串————或JSON.stringify(config.data)，data是post请求的参数，params是get请求的参数），

如果不是json字符串，就只是json格式就不要判断，只要添加请求头即可

其中qs需要下载npm install qs --save-dev

  

import axios from 'axios'
import qs from 'qs'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

// create an axios instance
// 全局的headers，post数据提交格式为json,然后在请求拦截器里面添加判断config.method === "post"
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
//axios.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8';
// axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';

const service = axios.create({
   baseURL: process.env.VUE_APP_BASE_API, 
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 500000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent
    if(config.method==='post'||config.method==='get'){
       //序列比
       config.data=qs.stringify(config.data)//这里转义
    }
    return config
  },
)

第二步：在对应的vue文件中使用数据（注意：数据要使用JSON.stringify() 转换为json字符串）

<script>
export default {
  data () {
    return {
      //添加弹窗数据
      form: {
        'ProjectName': '',
        'ProjectType': '',
        'ReceiptNum': '',
        'DateTime': '',
        'OutputMoney': '',
        'PayAccount': '',
        'Operator': ''
      },   
    }
  },
  methods: {
    // 提交
    Submit () {
      this.$refs.form.validate(async (isok) => {
        if (isok) {
          // 数据转换为json格式           
          await addList(JSON.stringify(this.form))
          }
          // 关闭弹层
          this.dialog = false
          this.$refs.form.resetFields()
        }
      })
    },
  }
}
</script>

八、vue中css使用data中的数据

1、标签绑定style

<div class="bottombox" 
     ：style="
         {
          '--paddingTop':paddingtop
        }
      "></div>

2、定义变量

data () {
    return {
      paddingTop: '110px',
    }
  },

3、css中使用变量

 .bottombox {
    padding-top: var(--paddingTop);
  }

九、下拉框的值是id,显示的是name

value是字符串的id，下拉框回显的时候应该是label，但是却是value，

方法就是把value字符串转换成数字的形式 

 <el-select v-model="StandardFrom.state" placeholder="请选择状态">
              <el-option
                v-for="item in stateData"
                :key="item.value"
                :label="item.label"
                :value="Number(item.value)"
              >
              </el-option>
            </el-select>