Vue零散整理

1. 修改placeholder颜色

::v-deep input::-webkit-input-placeholder

2. 修改element UI中原生CSS样式

.point_name_item {
  ::v-deep .el-input__inner {
    text-align: center;
    color: #2699fb;
    border: 2px solid #8bc4f7;
    width: 170px;
    height: 24px;
    border-radius: 20px;
  }
}

注：
2.1 .point_name_item 类属性定义在el-form-item中
2.2 不可以直接使用::v-deep .el-input__inner，会影穿透响子组件CSS样式

3. 封装组件，需要基于element UI的标签进行
   如封装按钮需要使用el-button，封装input框需要使用el-input标签
4. v-model.number指令
   使用此命令可以格式化input框中数字，若以0开头会去除开头0
5. filters使用Data()中数据
   filters中无法使用this对象，若需要在过滤器内部使用data中数据，需要在参数中传递

// 使用过滤器代码，this.tenantList写法错误
   {{ item | fromatTenantName(tenantList) }}

// 过滤器定义,传入参数从第二个开始，
fromatTenantName(val, tenantList) {
      let itemName = "";
      tenantList.forEach((item) => {
        if (val == item.id) {
          itemName = item.name;
        }
      });
      return itemName;
    }

6. checkbox(indeterminate 状态)
   el-checkbox遍历数组只能为一维数组，二维数组无法实现关联选择
7. 父组件接受子组件传值方法中添加参数
   $event标识子组件传入值，

<number-input
  v-model="scope.row.amount"
  @in_put="getAmount($event, scope.$index)"/>

8. 表单必须项表示问题
   去掉原生必须项标识hide-required-asterisk(el-form标签中)
   定制自定义：

::v-deep .asterisk {
  .el-form-item__label::after{
    content: "*";
    color: #F56C6C;
    margin-right: 4px;
  }
}

在fromIten中添加class即可

9. 获取动态配置所有路由

let routes = this.$router.options.routes[0].children

10. 密码input框展示密码处理逻辑
    实现逻辑对input框type值实行动态绑定

<el-input
  :type="newPwdType"
   size="small"
   minlength="8"
   maxlength="20"
   v-model="form.newPassword"
   class="new-input-style">
     <i slot="suffix" class="el-icon-view" @click="showNewPassword"></i>
   </el-input>

showNewPassword函数中逻辑

showNewPassword() {
      this.newPwdType = this.newPwdType == "password" ? "text" : "password"
    },

11. 动态添加class样式

:class='["card-list", { "hidden": !isPatInfoVisible }, cardListSize]'

12. 父组件操作子组件
    12.1 子组件引入

<visit-hst-card
   id="visit-hst-card-content"
   ref="visitHstCard"
   class="item"
   :pat-record="visitHstCardData"
   :is-creation-pat="isCreationPat"
   @trigger-show="updateMasonry"
 />

12.2 子组件data数据

// 获取数据
let hstList = this.$refs.visitHstCard.historyList;
// 修改子组件数据
this.$refs.visitHstCard.historyList = listData;

12.3 子组件方法

this.$refs.visitHstCard.historyList.getHstList();

13. 设配不同分辨率大小CSS写法

    @media screen and (max-width: 768px) {
  /* .pref-map {
    overflow: auto;
  } */
}

14. EventBus使用
    14.1 eventBus.js文件

import Vue from "vue";
export const EventBus = new Vue();

14.2 引用EventBus

import { EventBus } from "@/eventBus.js";

14.3 提交数据

selectAddress() {
  EventBus.$emit("selectPatInfoAddress", this.addressComputed);
 },

14.3 接受数据
接受需要定义到created钩子函数中，若多个地方接受子同一数据可以通过Vue内部变量控制

<v-ons-button
          class="common-style-select-button btn3-normal"
          :disabled = "this.editFlag"
          @click="
            showAddressSearchModal(setAddressValues);
            mapVisible = true;
          "
        >
          地址
        </v-ons-button>

EventBus.$on("selectPatInfoAddress", event => {
  // 控制是否是本组件接受数据
  if (!this.mapVisible) return;
  this.setPatDataJson("pat_contact_info", "address", event.address);
  this.setPatDataJson("pat_contact_info", "zip_cd", event.zipCd);
  this.mapVisible = false;
});

14.4 EventBus关闭
组件销毁前关闭EventBus,在接受数据Vue关闭

beforeDestroy() {
    EventBus.$off("selectPatInfoAddress");
  },

15. params方式路由参数传递
    15.1 传递(传递:$router)

this.$router.push({
  name: "system-area-detail",
  params: {
    areaId: this.areaId,
  },
});

15.2 参数接受(接受:$route)

this.paramAreaId = this.$route.params.areaId;

16. query方式传递路由参数
    16.1 传递

 this.$router.push({
          name: "device-acequipmentSettings",
          query: {
            reservateId: this.query.rezId,
            actionType: this.query.actionType,
            temperature: this.query.temperature,
            mode: this.query.transport,
            windSpeed: this.query.windSpeed,
            dayOfWeeks: this.query.dayOfWeeks,
            acId: this.acId,
          },
        });

16.2 接受参数

this.reservationList.dayOfWeeks== this.$route.query.dayOfWeeks;

17. 路由编写
    17.1 分支js

export default {
  name: "system-times-setting",
  path: "/system/times/setting",
  component: () => import('@/views/setting/TimeSetting'),
}

17.2 index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import TimeSettingRouter from './route-time-setting'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta:{title:'label.router.home'}
  },
  TimeSettingRouter
]
const router = new VueRouter({
  routes,
  mode: 'hash'
})

// const originalPush = VueRouter.prototype.push
// VueRouter.prototype.push = function push(location) {
//   return originalPush.call(this, location).catch(err => err)
// }

export default router