vue 常见的问题处理

表格 某一内容 格式化

// 使用
 <el-table-column
     prop="sex"
     label="性别"
     width="100"
     :formatter="(row) => columnFormatter(row.sex, sourceData)"
   >
  // 数据
  sourceData: [
 	{
      label: "女",
      value: 0,
    },
    {
       label: "男",
       value: 1,
    },
    {
       label: "未知",
       value: "",
    },
  ],
  // 方法
 columnFormatter(target = "", sourceData) {
   return sourceData.find((i) => i.value === target).label;
 },

el-input 输入框 输入校验

 <el-input
     v-model="form.phone"   // 值
     placeholder="请输入"   // 提醒
     :disabled="isDisabled"  // 是否禁用
      clearable  // 清空
      maxlength="11"  // 长度
      @input="v => form.phone = v.replace(/[^\d]/g,'')"  // 输入内容的校验规则
      ></el-input>
 </el-form-item>

手机号校验规则

const checkPhone = (rule, value, callback) => {
   if (!/^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/.test(value)) {
      callback(new Error("请输入正确的手机号或者固话号"));
   } else {
     callback();
   }
};

组件的全局注册

 // components 文件下新建 install.js 文件
 // 组件的引入
 import componentName from './componentsPath/path'
 // 组件的导出
 export default {
 	install(Vue){
 		Vue.component(componentName.name,componentName )
 	}
 }
// 在 main.js 中注册
// 引入
import components from '@/components/install'
// 注册
Vue.use(components)

阻止浏览器回退

history.pushState(null, null, document.URL);
   window.addEventListener("popstate", function () {
   history.pushState(null, null, document.URL);
});

vue中 keep-alive 会缓存页面的上一次状态

超出显示省略号 (单行、多行

.oneline {
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    -webkit-box-orient: horizontal;
    -webkit-line-clamp: 1; // 3 变多行
    line-clamp: 1;  // 3 变多行
    display: -webkit-box;
}

vue2 scss 安装

npm install sass-loader@7.1.0 node-sass@4.9.0 --save-dev //安装对应的版本
npm install sass-loader@7.3.1 node-sass@4.14.1 --save-dev //安装对应的版本

vue3 scss 安装

cnpm install node-sass@8.0.0 sass@1.57.1 sass-loader@13.2.0 --save-dev

浅拷贝

var clone = Object.create(Object.getPrototypeOf(obj),Object.getOwnPropertyDescriptors(obj))