Ant design结合es7语法

最新推荐文章于 2024-05-08 17:20:13 发布
最新推荐文章于 2024-05-08 17:20:13 发布
阅读量883 收藏
点赞数
文章标签： anti-design-vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lf811/article/details/130810199
版权

a-table

 <a-table
          :columns="columns"
          :dataSource="rows"
          :pagination="pagination"
          rowKey="id"
          @change="getList"
          :scroll="{ x: '100%' }"
          :loading="loading"
          size="middle"
        >
          <template #name="record">
            {{ record.name }}
          </template>
          <template #action="record">
              <a-dropdown>
              <a class="ant-dropdown-link">
                更多
                <a-icon type="down" />
              </a>
              <template #overlay>
                <a-menu @click="menuHandler($event, record)">
                  <a-menu-item key="auth" v-if="record.isCanSetUser">
                    授权其他用户
                  </a-menu-item>
                  <a-menu-item key="detail">
                    详情
                  </a-menu-item>
                  <a-menu-item key="update">
                    编辑
                  </a-menu-item>
                  <a-menu-item v-if="record.id !== 1" key="delete">
                    删除
                  </a-menu-item>
                  <a-menu-item key="copy">
                    复制
                  </a-menu-item>
                  <a-menu-item key="ping" v-if="record.status === 1">
                    ping
                  </a-menu-item>
                  <a-menu-item key="connect" v-if="record.status === 1">
                    测试连接
                  </a-menu-item>
                  <a-menu-item
                    key="bindKey"
                    v-if="
                      record.authType === MACHINE_AUTH_TYPE.SECRET_KEY.value
                    "
                  >
                    绑定秘钥
                  </a-menu-item>
                  <!-- <a-menu-item key="openEnv">
                    <a @click="$router.push(`/machine/env/${record.id}`)"
                      >环境变量</a
                    >
                  </a-menu-item> -->
                  <a-menu-item key="openMonitor">
                    <a
                      @click="
                        $router.push(`/machine/monitor/metrics/${record.id}`)
                      "
                      >机器监控</a
                    >
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </template>
        </a-table>

const columns = [

 {

    title: "序号",

    key: "seq",

    width: 65,

    align: "center",

    customRender: (text, record, index) => `${index + 1}`

  },

  {

    title: "机器信息",

    key: "name",

    ellipsis: true,

    scopedSlots: { customRender: "info" }

  },

  {

    title: "操作",

    key: "operation",

    fixed: "right",

    align: "center",

    width: 240,

    scopedSlots: { customRender: "action" }

  }

];

操作栏中对应的

 menuHandler({ key }, record) {

      const handler = moreMenuHandler[key];

      handler && handler.call(this, record);

    },

const moreMenuHandler = {

  detail(record) {

    this.$refs.detailModal.open(record.id);

  },

  update(record) {

    this.$router.push(`/machine/update/${record.id}`);

  },

  delete(record) {

    this.$confirm({

      title: "确认删除",

      content: "是否删除当前机器? 将会删除机器相关联的所有数据!",

      okText: "确认",

      okType: "danger",

      cancelText: "取消",

      onOk: () => {

        this.$api

          .deleteMachine({

            idList: [record.id]

          })

          .then(() => {

            this.$message.success("删除成功");

            this.getList({});

          });

      }

    });

  },

  copy(record) {

    this.$confirm({

      title: "确认复制",

      content: `是否复制机器 ${record.name}?`,

      okText: "复制",

      cancelText: "取消",

      onOk: () => {

        this.$api

          .copyMachine({

            id: record.id

          })

          .then(() => {

            this.$message.success("复制成功");

            this.getList();

          });

      }

    });

  },

  bindKey(record) {

    this.$refs.keyBindModal.open(record.id, record.keyId, record.name);

  }

};

表格带有勾选

computed: {

    rowSelection() {

      return {

        selectedRowKeys: this.selectedRowKeys,

        onChange: e => {

          this.selectedRowKeys = e;

        },

        getCheckboxProps: record => ({

          props: {

            disabled: record.id === 1

          }

        })

      };

    }

  },

表格tree(展开/折叠)

<a-table
          v-if="rows.length"
          :columns="columns"
          :data-source="rows"
          :pagination="false"
          rowKey="id"         :defaultExpandAllRows="defaultExpandAllRows"
          :key="defaultExpandAllRows ? rows.length : 0"
          @change="getList"
          :scoll="{ x: '100%' }"
          :loading="loading"
          size="middle"
          childrenColumnName="childs"
        >    
1.使用v-if的原因,初始化给defaultExpandAllRows赋值true,不起效;
2.动态点击按钮,进行树的展开/折叠,切换defaultExpandAllRows不起效;(文档上说明只在初始化起效);异步加载重置rows也不起效;
3.解决方式:通过defaultExpandAllRows的值更改列表数据的length;即可实现展开,折叠
4.childrenColumnName自定义tree识别的子数组;

a-form

结合的是es7语法糖v-decorator

<template>
  <a-modal
    v-model="visible"
    :title="title"
    :width="650"
    :okButtonProps="{ props: { disabled: loading } }"
    :maskClosable="false"
    :destroyOnClose="true"
    @ok="check"
    @cancel="close"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="layout">
        <a-form-item
          label="上级菜单"
          v-show="form.getFieldValue('powerType') == '1'"
        >
          <a-tree-select
            v-decorator="[
              decorators.parentId,
              {
                initialValue: 0,
                rules: [
                  {
                    required:
                      form.getFieldValue('powerType') == '1' ? true : false,
                    message: '请选择上级菜单'
                  }
                ]
              }
            ]"
            class="machine-input"
            tree-data-simple-mode
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="treeList"
            placeholder="请选择上级菜单"
            :replaceFields="replaceFields"
            allowClear
            @select="onSelect"
          />
        </a-form-item>
        <a-form-item label="菜单类型">
          <a-radio-group
            name="radioGroup"
            :disabled="!!this.id"
            v-decorator="decorators.powerType"
          >
            <a-radio value="0">目录</a-radio>
            <a-radio value="1">菜单</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          :label="
            form.getFieldValue('powerType') == '0' ? '目录名称' : '菜单名称'
          "
          hasFeedback
          name="name"
        >
          <a-input
            v-decorator="decorators.name"
            :placeholder="
              `请输入${
                form.getFieldValue('powerType') == '0' ? '目录' : '菜单'
              }名称`
            "
            showCount
            allowClear
          />
        </a-form-item>
        <a-form-item label="排序">
          <a-input-number
            style="width:100%"
            id="inputNumber"
            :placeholder="
              `请指定${
                form.getFieldValue('powerType') == '0' ? '目录' : '菜单'
              }位置`
            "
            v-decorator="decorators.order"
            :max="1000"
          />
          <!-- <p>数值越大则显示顺序在前</p> -->
        </a-form-item>
        <a-form-item
          :label="
            form.getFieldValue('powerType') == '0' ? '目录地址' : '菜单地址'
          "
          hasFeedback
        >
          <a-input
            v-decorator="[
              decorators.path,
              {
                rules: [
                  {
                    required:
                      form.getFieldValue('powerType') == '1' ? true : false,
                    message: `请输入${
                      form.getFieldValue('powerType') == '0' ? '目录' : '菜单'
                    }地址`
                  },
                  {
                    max: 100,
                    message: '长度不能大于100位'
                  }
                ]
              }
            ]"
            :placeholder="
              `请输入${
                form.getFieldValue('powerType') == '0' ? '目录' : '菜单'
              }地址`
            "
            allowClear
          />
          <p>访问的路由地址，如：`/user`</p>
        </a-form-item>
        <a-form-item
          label="重定向地址"
          v-if="isTwoMenu && form.getFieldValue('powerType') == '0'"
        >
          <a-input
            v-decorator="decorators.redirect"
            placeholder="请输入重定向地址"
            allowClear
          />
          <p>面包屑重定向路由地址，如：`/test/user`</p>
        </a-form-item>
        <a-form-item label="组件路径">
          <a-input
            v-decorator="[
              decorators.component,
              {
                initialValue:
                  form.getFieldValue('powerType') == '0' ? 'Layout' : ''
              }
            ]"
            placeholder="请输入组件路径"
            allowClear
          />
          <p v-if="form.getFieldValue('powerType') == '1'">
            访问的组件路径，如：`system/user/index`，默认在`views`目录下
          </p>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { pick } from "lodash";
import { md5 } from "@/lib/utils";
import { ROLE_TYPE } from "@/lib/enum";

const layout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 17 }
};
function getDecorators() {
  return {
    powerType: [
      "powerType",
      {
        initialValue: "0"
      }
    ],
    name: [
      "name",
      {
        rules: [
          {
            required: true,
            message: "请输入名称"
          },
          {
            max: 32,
            message: "用户名长度不能大于32位"
          }
        ]
      }
    ],
    path: ["path"],
    order: ["order"],
    parentId: ["parentId"],
    redirect: ["redirect"],
    component: ["component"]
  };
}

export default {
  name: "AddMenuModal",
  props: {
    treeList: {
      required: true,
      default: () => {}
    }
  },
  data: function() {
    return {
      ROLE_TYPE,
      id: null,
      visible: false,
      title: null,
      loading: false,
      record: null,
      layout,
      decorators: getDecorators.call(this),
      form: this.$form.createForm(this),
      isRoot: false,
      isTwoMenu: false,
      replaceFields: {
        children: "children",
        title: "name",
        key: "id",
        value: "id"
      }
    };
  },
  watch: {},
  mounted() {},
  methods: {
    add() {
      this.title = "新增菜单";
      this.initRecord({});
    },
    update(id) {
      this.title = "修改菜单";
      this.$api.getMenuDetail({ id }).then(({ data }) => {
        this.initRecord(data);
      });
    },
    addChildren(id) {
      this.title = "新增菜单";
      this.$api.getMenuDetail({ id }).then(({ data }) => {
        this.initRecord(data, "son");
      });
    },
    onSelect(value, node, extray) {
      console.log(extray.selectedNodes[0].data.props);
      let extraNode = extray.selectedNodes[0].data.props;
      this.treeHandleSelect(extraNode);
    },
    treeHandleSelect(node) {
      if (node.component == "Layout") {
        this.isTwoMenu = true;
      } else {
        this.isTwoMenu = false;
      }
      //   if (node.id == "0" || node.id == undefined) {
      //     this.isRoot = false;
      //     this.isTwoMenu = false;
      //   } else {
      //     this.isRoot = true;
      //   }
      //
      this.$nextTick(() => {
        this.form.setFieldsValue({
          parentId: node.id
        });
      });
    },
    async initRecord(row, val) {
      this.form.resetFields();
      this.visible = true;
      this.id = row.id;
      await this.treeHandleSelect(row);
      this.record = pick(
        Object.assign({}, row),
        "powerType",
        "name",
        "order",
        "path",
        "parentId",
        "component",
        "redirect"
      );
      if (val) {
        this.record = pick(Object.assign({}, row), "id");
      }
      this.$nextTick(() => {
        this.form.setFieldsValue(this.record);
      });
    },
    check() {
      this.loading = true;
      this.form.validateFields((err, values) => {
        if (err) {
          this.loading = false;
          return;
        }
        this.submit(values);
      });
    },
    async submit(values) {
      let res;
      try {
        if (!this.id) {
          // 添加
          let obj = {
            name: values.name,
            powerType: values.powerType,
            order: values.order || "",
            parentId: values.powerType == "0" ? 0 : values.parentId,
            path: values.path || "",
            component: values.component || "",
            redirect: values.redirect || ""
          };
          //   console.log(obj);
          //   values.password = md5(values.password);
          res = await this.$api.addMenu(obj);
        } else {
          // 修改
          res = await this.$api.updateMenu({
            ...values,
            id: this.id
          });
        }
        if (!this.id) {
          this.$message.success("添加成功");
          this.$emit("added", res.data);
          this.$root.updateFlag = true;
        } else {
          this.$message.success("修改成功");
          this.$emit("updated", res.data);
          this.$root.updateFlag = true;
        }
        this.close();
      } catch (e) {
        this.$root.updateFlag = false;
        // ignore
      }
      this.loading = false;
    },
    close() {
      this.visible = false;
      this.loading = false;
    }
  }
};
</script>

<style scoped>
p {
  padding: 0;
  margin: 0;
  line-height: 12px;
  font-size: 12px;
  color: #cacdd4;
}
</style>

  1. 给form表单设定值的时候,不能直接赋值,需要结合

    this.form.setFieldsValue({ username: '设置值' })

  2. 判断条件为false时,dom不渲染(改用v-show,赋值的时候结合  this.$nextTick(() => {
            this.form.setFieldsValue({
              id: node.id
            });
          });
    //才能不出现warning如下
    需要注意的是:使用v-decorator声明的域数据;在表单上面必须使用(使用的时候不在页面显示即可),否则会报错
  3. 检索栏菜单绑定,用:model的形式,使用v-model会报错
  4. 结合a-radio的场景,不同值下对应的表单项以及校验规则不同;用行内式实现
  5. 使用form中的某一项作为显隐条件时;form.getFieldValue('powerType')的形式获取;
  6. 使用a-radio通常要给予初始值;再初始化form的getDecorators()方法中和校验规则同级的initialValue实现;
  7. form中v-decorator声明的表单项,必须在表单中使用(v-show='false');否则点击确定时会产生告警

 a-tree-select

<a-tree-select
            v-decorator="[
              decorators.parentId,
              {
                initialValue: 0,
                rules: [
                  {
                    required:
                      form.getFieldValue('menuType') == '1' ? true : false,
                    message: '请选择上级菜单'
                  }
                ]
              }
            ]"
            class="machine-input"
            tree-data-simple-mode
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="treeList"
            placeholder="请选择上级菜单"
            :replaceFields="replaceFields"
            allowClear
            @select="onSelect"
          />
 1. replaceFields: {
        children: "childs",
        title: "menuName",
        key: "id",
        value: "id"
      }
每一项都必须声明;
2.由于是以id作为节点标识,选择节点只能拿到节点id
 onSelect(value, node, extray) {
//选择节点本身的全部props    console.log(extray.selectedNodes[0].data.props);
      let extraNode = extray.selectedNodes[0].data.props;
      this.treeHandleSelect(extraNode);
    },

sql语句输入时的在线editor

插件:vue2-ace-editor

组件封装

<template>
  <ace ref="editor"
       :value="value"
       :lang="lang"
       :width="width === 0 ? '100%' : width"
       :height="height === 0 ? '100%' : height"
       :theme="theme"
       :options="options"
       @init="initEditor"
       v-bind="config">
  </ace>
</template>

<script>

import ace from 'vue2-ace-editor'

export default {
  name: 'Editor',
  components: {
    ace
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    width: {
      type: Number,
      default: 0
    },
    height: {
      type: Number,
      default: 0
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    theme: {
      type: String,
      default: 'iplastic'
    },
    lang: {
      type: String,
      default: 'sh'
    },
    config: {
      type: Object,
      default: () => {
        return {
          enableLiveAutocompletion: true,
          fontSize: 16
        }
      }
    }
  },
  computed: {
    options() {
      return {
        enableBasicAutocompletion: true,
        enableSnippets: true,
        showPrintMargin: false,
        fontSize: this.config.fontSize,
        enableLiveAutocompletion: this.config.enableLiveAutocompletion,
        readOnly: this.readOnly
      }
    }
  },
  methods: {
    initEditor(editor) {
      require('brace/ext/language_tools')
      // 设置语言
      require('brace/mode/sh')
      require('brace/mode/json')
      require('brace/mode/xml')
      require('brace/mode/yaml')
      require('brace/mode/properties')
      require('brace/snippets/sh')
      require('brace/snippets/json')
      require('brace/snippets/xml')
      require('brace/snippets/yaml')
      require('brace/snippets/properties')
      // 设置主题
      // 浅色 iplastic sqlserver tomorrow xcode
      // 深色 dracula gruvbox idle_fingers merbivore terminal tomorrow_night_bright
      require('brace/theme/iplastic')
      // 监听值的变化
      editor.getSession().on('change', () => {
        this.$emit('change', editor.getValue())
      })
    },
    getValue() {
      return this.$refs.editor.editor.getValue()
    },
    setValue(value) {
      this.$refs.editor.editor.session.setValue(value)
    },
    clear() {
      this.$refs.editor.editor.session.setValue('')
    }
  }
}
</script>

<style scoped>

</style>

 组件引用-实现预览

<template>
  <a-modal v-model="visible"
           :width="650"
           :footer="null"
           :destroyOnClose="true"
           @close="close">
    <!-- 编辑器 -->
    <Editor v-bind="editorConfig" :value="value" :height="350" :readOnly="true"/>
    <!-- 标题 -->
    <template #title>
      <span>{{ title }}</span>
      <a @click="$copy(value)" title="复制">
        <a-icon class="copy-icon-right" type="copy"/>
      </a>
    </template>
  </a-modal>
</template>

<script>
import Editor from '@/components/editor/Editor'

export default {
  name: 'EditorPreview',
  components: {
    Editor
  },
  props: {
    editorConfig: {
      type: Object,
      default: () => {
        return {}
      }
    },
    title: {
      type: String,
      default: '预览'
    }
  },
  data() {
    return {
      visible: false,
      value: null
    }
  },
  methods: {
    preview(value) {
      this.visible = true
      this.value = value
    },
    close() {
      this.visible = false
      this.value = null
    }
  }
}
</script>

<style scoped>

</style>

 表单中使用时,要给予初始值undefined

 <a-form-item label="采集语句" hasFeedback>

          <Editor :height="200" v-decorator="decorators.collectSql" />

        </a-form-item>

 

lf811
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
es7 语法学习
01-07
#创建索引 PUT /employee {  “settings”: {  “number_of_shards”: 1,  “number_of_replicas”: 1  } } #分布式节点建设（更新replicas状态） PUT /employee/_settings ... “settings”: { ...
es7查询总结
01-20
PUT nba {  “settings”:{  “number_of_shards”: 1,  “number_of_replicas”: 1  },  “mappings”:{  “properties”:{  “name_cn”:{   “type”:”text”  },  “name_en”:{ ... 
Ant Design Pro 基本语法使用(JavaScript版)
シ❤゛甜虾的个人博客
11-02 2099
组件的定义 const FirmwareList = () => { //整个页面所有的代码 }; export default FirmwareList; 组件的引入 import { Upload, Form, message, Button, Row, Col } from 'antd'; import { UploadOutlined } from '@ant-design/icons'; import { useState, useRef, useEffect } from 'r
使用 Ant Design 组件 你需要了解的 ES6 语法
忘川
11-10 539
ES6 是下一代 JavaScript 语法标准，比起 ES5 有很大的变化。标准委员会每年发布一次当年度的新标准，目前最新的标准是《ES2018 标准》，因此 ES6 是一个动态的标准，每年都会发生一些变化。 React 大量使用 ES6 语法，本文介绍其中一些最重要的语法点。完整的 ES6 介绍请参考 http://es6.ruanyifeng.com/ 。 let 和 const let和const命令用于声明变量。 let声明的变量是可变的，const声明的变量是...
vue-ant design示例大全——icon与分隔符本地css js资源_a-icon type
最新发布
2401_84617681的博客
05-08 427
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。并祝愿大家在新的一年找工作面试中胆大心细，发挥出最好的水平，找到一份理想的工作。
Vue antdv dropdown 自定义下拉内容 overlay 禁止点击事件下传导致收起
卡尔特斯
02-10 3029
<!-- 自定义列 --> <a-dropdown :trigger="['click']"> <!-- 自定义下拉菜单 --> <div slot="overlay"> <!-- 禁止事件下传，这样点击自定义的下拉菜单就不会收起了，注意宽高完全覆盖好 --> <div @click.stop> <!-- 菜单内容 --> </div> </div>
vue使用ant-design-vue实现搜索下拉框并进行跳转
u014104653的博客
11-27 2061
main.js配置 ：基本配置，引入ant-design-vue和对应的css样式 // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './r...
antdesign和react的使用dropDown定位问题
weixin_43760969的博客
05-10 2571
Select基于rc-select，rc-select的下拉框基于rc-trigger，rc-trigger的下拉框定位基于第三方库dom-align，dom-align的overflow参数的adjustX、adjustY可以计算可视区域，在下拉框溢出可视区域的时候添加偏移量将位置放到可视区域中。 依赖链路dependency chain： Select.dropdownAlign => rc-select.dropdownAlign => rc-trigger.popupAlign =&g.
详解小程序原生使用ES7 async/await语法
10-18
主要介绍了详解小程序原生使用ES7 async/await语法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-es7:React+流类型+路由+具有实验性ES7语法+回流+语义UI的ES6
05-12
react-es7 +类型++++ 示例 使用启用的通过库转译所有JavaScript文件。 项目支持类型注释 在测试中使用实验性ES7代码 组件之间的工作流和通信是使用建立的， 是稍微Flux范例。 单元测试由提供。 将Semantic-UI...
详解ES7 Decorator 入门解析
10-17
Decorator 是 JavaScript ES7（ECMAScript 2016）引入的一种实验性语法特性，它允许程序员在不修改原代码的基础上向现有对象添加新的行为或属性。Decorator 可以理解为一种元编程技术，它通过定义函数来创建一个新的...
antd vue dropdown随着页面滚动的定位问题解决
Bruce_wjh的博客
02-27 3001
<a-dropdown class="user-management-filter-btn-first" labelInValue :getTooltipContainer="trigger => trigger.parentNode" :defaultValue="{ key: uploadKey }" style="width: 130px...
修改antd里dropdown的样式
qf_20191006的博客
10-13 5468
直接修改默认样式，但为了避免全局修改，需要在外面包裹一层className做限制。可以在overlayClassName里设置。 <Dropdown overlayClassName={styles.dropdown} overlay={ <Menu> <Menu.Item key="logout" onClick={logout}> 退出登录 </Menu.Item> <Men.
[Vue2]AntDesignVue基于Select封装「多选 + 二级级联+ 可自定义添加item 组件」
SCUhzs
05-17 7368
[Vue2]AntDesignVue基于Select封装「多选 + 二级级联+ 可自定义添加item 组件」
Ant Design Dropdown下拉选项被弹窗遮盖
梁诗傑的博客
06-03 1821
<a-dropdown :getPopupContainer="triggerNode => {return triggerNode.parentNode || document.body;}"> <a-menu slot="overlay"> <a-menu-item key="1">1111</a-menu-item> <a.
antd a-select下拉框样式修改 vue3 亲测有效
stella_stella123的博客
06-01 2118
antd a-select下拉框样式修改 vue3 亲测有效，使用到Vue3 + Ant Design of Vue 3.2.20
antd+vue实现递归（实例）
qq_43437571的博客
09-24 828
实现的效果： 代码： 父组件 <template> <a-row :gutter="24"> <a-col :md="24"> <a-card title="递归实验"> <a-steps :current="current"> <a-step v-for="(item, index) in dataSteps" :key="index" :title="item.name"&gt
vue 一个组件中一个或者多个动态echarts图表切换渲染问题
agua001的博客
04-20 4058
vue 一个组件中一个或者多个动态echarts图表切换渲染问题； echarts.js:2286 Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload.
antd-vue中使用a-icon标签
小龙狗的博客
07-13 4099
ant-vue中使用a-icon标签
async await是ES7语法嘛
09-03
是的，async和await是ES7中新增的语法。它们用来改进异步代码的编写方式，是Promise的升级版。 async函数中可以包含await表达式，当执行到await表达式时，函数会暂停执行，直到触发的异步操作完成。注意，await只能在async函数中使用，否则会导致语法错误。 使用async修饰的函数会返回一个Promise对象，可以通过.then()方法获取异步操作的结果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [async-await语法](https://blog.csdn.net/m0_57262819/article/details/124545456)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [ES7之async，await](https://blog.csdn.net/qq_39682399/article/details/108649138)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值