Knowledge project encountered ten

A, Dialog box

1, click Cancel Dialog box black background Close popup

• Whether close-on-click-modal Dialog can be closed by clicking on modal

:show-close="true"
:close-on-click-modal="false"

<el-dialog
    :visible.sync="dialogVisible"
    :before-close="cancel"
    center
    :show-close="true"
    :close-on-click-modal="false"
    >

</el-dialog>

2, Dialog box assembly bomb

Knowledge Point

• Dialog to change the style ---> custom-class

index.vue

<template>
    <div class="home>
     <div @click="onOpen">这里是首页信息</div>
     
     <!-- 子组件 -->
     <add-dialog
      :visible.sync="showDialog"
      @success="InitLoad"
     ></add-dialog>
    </div>
</template>
<script lang="ts">
  import { Watch, Component, Vue, Emit } from "vue-class-decorator";
  import AddDialog from "./components/AddDialog.vue";
  @Component({
    components: {
      AddDialog
    }
  })
  export default class HomePage extends Vue {
    showDialog = false; // 是否显示子组件
    // 初始化数据
    InitLoad() {}
    // 打开子组件
    onOpen(){
        this.showDialog = true;
    }
  }

</script>

子组件

<template>
  <el-dialog
    title="门店信息"
    :visible.sync="visible"
    @close="onClose(false)"
    @open="changeDetail"
    custom-class="AddDialog"
  >
    <div class="AddDialog-box"></div>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        @click="onClose(false)"
        class="add-mask add-btn-back"
      >取 消</el-button>
      <el-button
        type="primary"
        class="add-mask add-btn-sure"
        @click="submit"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>
<script lang="ts">
  import { Watch, Component, Vue, Emit, Prop } from "vue-class-decorator";

  @Component
  export default class PowerRole extends Vue {
    @Prop({ type: Boolean, default: false })
    visible: boolean;
    @Emit("update:visible")
    onClose(visible) {}

    @Emit("success")
    onSuccess() {
      this.onClose(false);
    }
    // 打开组件触发的事件
    changeDetail(){}

    submit() {
        this.onSuccess();
    }
}
</script>
<style lang="less" scoped>
 
  /deep/ .AddDialog.el-dialog {
   // 这里处理弹框样式
  }
</style>

Second, upload attachments

• But also can upload pictures and other files to upload world

html

<div>
  <p>上传附件：</p>
  <div
    class="add-img"
    style="width: 380px;"
  >
    <div
      class="add-img-box"
      style="width: 380px;"
      v-if="fileList.length !== 0"
    >
      <div
        style="width: 380px;min-height:35px;"
        class="box-item"
        v-for="(item,index) in fileList"
        :key="index"
      >
        <span
          class="de-box fr"
          @click="handleDetele(index)"
        ></span>
        <span
          v-if="item.name"
          @click="jumpUrl(item)"
          style="display: inline-block;color: #1b4c80;"
          class="f12 fl add-name"
        >{{item.name}}</span>
        <img
          v-else
          @click="jumpUrl(item)"
          class="add-img-item"
          :src="item.url"
          style="width:45px;height:45px;"
        >
      </div>

    </div>
    <label
      for="upload"
      style="width:45px;height:45px;display: block;vertical-align: top;cursor:pointer"
    >
      <img
        src="../assets/image/attachment.png"
        alt=""
        style="width:45px;height:45px;"
      >
    </label>
    <form
      name="imgForm"
      id="imgForm"
    >
      <input
        @change='selectFile($event)'
        type="file"
        id="upload"
        name="file"
        multiple
        style="display:none"
      >
    </form>

  </div>

</div>

js

fileList = []; // 附件列表
// 删除
handleDetele(index) {
  this.fileList.splice(index, 1);
}
// 下载
jumpUrl(item) {
  window.open(item.url, "_blank");
}
selectFile(event) {
  const files = event.target.files;
  const fileLength = files.length;
  const reader = new FileReader();
  for (let i = 0; i < fileLength; i++) {
    const addImg = {
      url: "",
      fileData: {},
      name: ""
    };
    // 判断是否是图片
    if (
      files[i].type === "image/gif" ||
      files[i].type === "image/jpeg" ||
      files[i].type === "image/jpg" ||
      files[i].type === "image/png" ||
      files[i].type === "image/svg"
    ) {
      addImg.url = URL.createObjectURL(files[i]);
      addImg.fileData = files[i];
    } else {
      addImg.name = files[i].name;
      addImg.url = URL.createObjectURL(files[i]);
      addImg.fileData = files[i];
    }
    this.fileList.push(addImg);
  }
}

less

.add-img {
    display: inline-block;
    vertical-align: top;
    .add-img-box {
      display: inline-block;
      vertical-align: top;
      .box-item {
        vertical-align: top;
        position: relative;
        margin-bottom: 5px;
        .add-name {
          width: auto;
          color: #1b4c80;
          cursor: pointer;
        }
        .add-img-item {
          object-fit: cover;
          object-position: center;
          cursor: pointer;
          width: 45px;
          height: 45px;
        }
        .de-box {
          cursor: pointer;
          width: 10px;
          height: 11px;
          background: url("../assets/image/close.png") no-repeat top 0 right 0;
          background-size: 100% 100%;
        }
      }
    }
  }

Three, DatePicker date picker

1, only select time starts tomorrow

<el-date-picker
  v-model="value1"
  type="date"
  :picker-options="pickerOptions"
  value-format="yyyy-MM-dd"
  placeholder="选今天之后的日期"
  >
</el-date-picker>

// 选今天之后的日期（从明天开始）
pickerOptions = {
  disabledDate(time) {
    return time.getTime() < Date.now() - 8.64e6;
  }
};
value1 = "";

2, only select time starts today

<el-date-picker
    v-model="dates"
    type="date"
    :picker-options="pickerOptions"
    value-format="yyyy-MM-dd"
    placeholder="今天开始的日期"
  >
  </el-date-picker>
// 选今天开始的日期
  pickerOptions = {
      disabledDate(time) {
        return time.getTime() < Date.now() - 8.64e7;
      }
  };
 value1 = "";

ElementUI change text size table

<el-table :header-cell-style='styleObj' style="width: 100%;font-size:12px;"></el-table>

ts

 export default class Page extends Vue {
    styleObj = {
       "font-size": "14px"
     };
 }
    

• Head font 14px. 12px font table of contents
• style of header-cell-style header cell callback method, may be used as a fixed Object of all header cell disposed Style