Vue常用的代码

一、HTML代码

1、分成四个区：过滤区(filterArea)、数据区(displayArea)、输入区(inputArea)、操作区(controlArea)、组件区(componentArea)

故其固定代码为：

<div class="filterArea"></div>
<div class="displayArea"></div>
<div class="inputArea"></div>
<div class="controlArea"></div>
<div class="componentArea"></div>

整页渲染遮挡层

<div id="rootEle" style="padding: 20px" v-loading.fullscreen.lock="loading">

二、Vue代码

props

在prop参数中，加入 type 和 required (如有需要，则加入 default)

特别注意，在路由传值的时候，Number 类型的 ID 默认会转换成 String ，那么需要使用 parseInt进行强转，然后使用isNaN 进行判断（因为带有字母的数字，如’abc123’ 会转换成 NaN，如果是 ‘123abc’，则会得到123的值）

data

异步数据渲染页面：在遇到页面需要先加载异步请求的数据后再渲染的情况，可将渲染的数据设成默认格式空数据，比如[] 或 {} ，就能规避这个问题，

// 遮挡层
loading: false,
// 关键数据
isLeader: false,
userInfo: {},
scene: {},
sandTable: {},
totalGroup: {},
// 过滤器
filterParams: {},
searchParams: {},
// 组件可视化
visible: {},
// 功能默认值
active: {},
// 常量值
constant: {},
// 校验规则
rules: {}

更新传值

​ 以后如若组件功能是更新操作，则直接传入元数据ID，组件内部自行请求一次完整的数据，这样做的好处是：规避了恶意修改原始数据再进行二次污染；降低组件间数据的耦合度；

关闭组件, 提供二次确认

特别是在有输入的时候关闭可能导致输入的数据丢失

    // 关闭新增沙盘组件
    closeDialog() {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.$emit("success", false);
        })
        .catch((_) => {});
    },

删除数据，二次确认

// 删除当前专项工作
    deleteDailyWork() {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "警告", {
        confirmButtonText: "我再想想",
        cancelButtonText: "确认删除",
        showClose: false,
        closeOnClickModal: false,
        closeOnPressEscape: false,
        type: "warning",
      })
        .then(() => {})
        .catch(() => {
          deleteDailyWorks(this.dailyWork.id)
            .then((response) => {
              this.$message.success("数据删除成功~");
              this.$emit("success", true);
            })
            .catch((error) => {
              console.log(error);
            });
        });
    },

去除字符串空格

specialWork.name = isEmpty(specialWork.name)
        ? null
        : specialWork.name.replace(/\s*/g, "");

str.replace(/\s+/g,"")  这个可以将所有的中/英文的空格删除
.replace(/<[^>]+>/g, "")  清洗富文本的内容，有待考察
// 注意事项：
var test = null
test.replace(/\s*/g, "") // 会报错，因为null没有replace方法

排序

__sortGroupStatus(groupList) {
    return groupList.sort((obj1, obj2) => {
        var group_1 = obj1.group;
        var group_2 = obj2.group;
        if (group_1.status > group_2.status) {
            return -1;
        } else if (group_1.status < group_2.status) {
            return 1;
        } else {
            return 0;
        }
    });
},

三、路由传值

1、发送请求

this.$router.push({
        path: `/dzsp/mySandTable/${sceneId}/${sandTableId}`,
});

2、路由器写法：

{
      path: 'mySandTable/:sceneId/:sandTableId',
      name: 'MySandTable',
      component: () => import('@/views/train/sand_table'),
      hidden: true,
      meta: {
        title: '主界面',
        icon: 'table',
        roles: ['ROLE_STUDENT']
      },
      props: true
},

3、接收值路由传参：

var sceneId = parseInt(this.sceneId);
var sandTableId = parseInt(this.sandTableId);
if (!isNaN(sceneId) && !isNaN(sandTableId)) {
	// ...
}