组件使用
bug丸
写文章主要是想记录下自己的学习,帮助自己梳理知识,可以如果有错误的地方欢迎指出。如果觉得有收获,可以让我满足下我的的虚荣心,点个赞
展开
-
echart简单组件封装
遇到的问题:封装的echart组件复用时,会警告:上述代码如果我将this.$ref 改为 document.querySelector;那么浏览器会出来一条警告,而且只会渲染出一个图警告内容: There is a chart instance already initialized on the dom.解决方式:方式1:this.$refs如同开始部分的代码方式2:传入一个唯一的className或id,用来区分...原创 2022-07-05 22:50:14 · 334 阅读 · 0 评论 -
日期控件的使用
日期控件a-date-picker和a-range-picker的使用,怎么设置时间格式,怎么设置不可选择的时间,怎么设置快捷的时间选择范围及常见参数说明参数说明值补充locale语言类型默认是英文valueFormat设置日期值的格式默认是一个moment对象showToday是否显示今天的按钮Boolean默认为true显示今天按钮value(v-model)默认值为moment对象renderExtraFooter底部添加自.原创 2022-06-03 17:11:32 · 1215 阅读 · 0 评论 -
手动a-tooltip的显示与隐藏
a-tooltip显示与隐藏场景:有很多弹框,但是弹框相互间可能存在遮挡,第一个弹框是点击出现提示,第二个和第三个是获得焦点就出现提示a-tooltip自带了一个属性,trigger可以控制弹框的显示与隐藏,但是我们有时想自己设置触发弹框的时机,visibleChange可以监听到弹框的显示变化初始方案**:display,利用display:none来实现弹框1的隐藏问题:存在多个获得焦点显示自己的弹框,隐藏点击的弹框1时,(比如显示弹框3,隐藏1和2)弹框1后面需要点击两次,才会显示解决方法原创 2022-02-15 21:35:58 · 4949 阅读 · 0 评论 -
a-popover的使用
a-popover的使用<template> <div id="popoverUsing"> <a-popover autoAdjustOverflow overlayClassName="myPopClass" v-model="visible" trigger="click" placement="bottomLeft" @visibleChange="afterCloseDo"原创 2021-08-21 16:38:39 · 5357 阅读 · 0 评论 -
自己封装一个简单的组件
组件封装封装<template> <div class="box"> <button class="btn">{{ des }}</button> </div></template><script>export default { props: { des: { type: String } }, methods: {}}</script>原创 2021-08-09 22:27:03 · 304 阅读 · 0 评论 -
选择框的使用
选择框的基本使用checkbox多选框1. 基本使用 <a-checkbox-group @change="checkChange"> <a-checkbox v-for="(item, index) in list" :key="index" :value="item"> {{ item }} </a-checkbox> </a-checkbox-group> methods: {原创 2021-08-08 21:49:16 · 1315 阅读 · 0 评论 -
a-modal
a-modal的样式调整a-modal宽和高的设置主要是通过a-modal自带的width和bodyStyle来设置注意:a-modal的父盒子是body// 现在我要点击按钮,弹出对话框,对话框展示的是文本信息,我们也可以添加下载文本功能<template> <div id="hello"> <div style="margin-top:50px"> <button @click="openDialog">打开对话框<原创 2021-06-09 22:18:01 · 7168 阅读 · 0 评论 -
a-table及相关组件的使用
a-table及相关组件的使用基础的渲染 <a-table :dataSource="tableList" :columns="tableColumns"></a-table>参数名类型说明dataSource数组数据来源,数组中的每一个对象都是一行的数据columns数组用来指定每一列的标题(表头)bordered布尔值是否显示表格边框,默认为竖向的边框pagination布尔值默认采用他的分页,如果觉得不好用可以自己原创 2021-06-08 23:39:02 · 16744 阅读 · 3 评论 -
echarts的使用
echart使用使用的基本步骤1 引入echart`import * as echarts from 'echarts'`2 准备盒子并初始化 echarts.init()`const myBar = echarts.init(document.querySelector('.bar1'))`3 设置配置项option所有的使用步骤都差不多,只是第三步不一样,显示出来的图形就不一样4 将配置项配置给我们的目标myBar myBar.setOption(opti...原创 2021-05-18 23:00:57 · 526 阅读 · 0 评论