- 博客(243)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 Vue3报错 Vue: Cannot find module @/views/demoItem.vue or its corresponding type decla
这是因为ts只能解析 .ts 文件，无法解析 .vue文件，在env.d.ts中增加如下代码就可以了。
2024-04-17 09:29:58
53
原创 TailwindCss在vue3项目中的使用
如果你介意 tailwind.config.js 的文件是 js，那么直接改为 ts 之后换成以下代码。注意postcss.config.js 不能改成 ts。4 在src 目录下创建目录styles，并在该目录下创建Tailwind.css，用 @tailwind 指令添加 Tailwind功能。3 在tailwind.config.js添加对vue文件的识别，其他配置可以在。6 在main.ts 中引入Tailwind.css。1 安装 tailwindcss和postcss。
2024-04-16 17:05:02
125
原创 Python 入门基础
Python 中的 input 语句，获取键盘的输入信息。continue 结束本次循环，继续执行下一次循环。字符串定义的三种方式，type 用了检测数据类型。语法：[元素，元素，…if elif else 多条件判断语句的使用。Python中的range()语句的基本使用。Python for循环临时变量的作用域。函数使用的时候，定义的变量作用域。tuple 元祖的常用方法演示。Python 中的各类运算符。if else的组合判断语句。while语句的基本格式应用。tuple元组的定义和操作。
2022-11-15 11:23:51
646
原创 Vue Element 表格实现拖拽排序
1、安装sortablejs2、在需要的页面引入3、具体使用，注意的是element table务必指定row-key，且row-key必须是唯一的，如 id，不然会出现排序不对的情况
2022-06-28 16:09:43
4645
原创 Element Tree 点击节点获取所有的父节点
基础布局，添加 @node-click=“handleNodeClick”<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>handleNodeClick(node) { // 最终的数据 this.breadList = [] // 获取点击当节点的dom的信息 let selectNode = this.$refs.tree.getNode
2022-05-12 16:31:50
3270
2
原创 Element 表格内的 Popover 弹出框可以任意拖动位置
在Element 表格内的 Popover 弹出框，实现可以任意拖动位置，主要参数 trigger=“manual” 为了实现点击空白处不能隐藏，popper-class 动态添加 calss，ref 定义 ref 控制 Popover 显示隐藏<el-table-column prop="pageName" label="来源" header-align="center" align="left" show-overflow-tooltip width="160"> <tem
2022-03-21 12:05:02
1979
原创 Vue 如何继承一个组件
以 Element UI 中的 el-table-column 举例，创建 js 文件，引入 Element，使用 extends 继承import { TableColumn } from 'element-ui';export default { name: 'TableColumn', extends: TableColumn};
2022-03-11 15:51:52
2451
原创 Element 树表格有无子节点内容都对齐
添加 :cell-style=“cellStyle” 方法<el-table :cell-style="cellStyle" v-sticky="{top:56}" :indent='indents' :key="Math.random()" row-key="LAND_LIST_ID" :expand-row-keys="expand" :tree-props="{children: 'children'}" :data="tableData" border stripe size="small"
2022-03-09 15:52:39
597
原创 Vue 把Llist 数据转化为 Tree 数据
创建 js 文件treeList，添加以下方法/** * 将 list 数组转化为 treeList * @param {Array} dataList list数据 * @param {string} id 节点key值 * @param {string} pId 父节点key值 * @returns {Array} treeList */export const listToTree = (dataList, id, pId) => { const data = JSON.
2022-03-07 10:18:49
1037
原创 vue 中使用海康威视视频插件
创建容器<template> <div class="right" ref="playWndBox"> <!-- 视频数据站位 --> <div id="playWnd" class="playWnd" :style="{height: playWndHeight + 'px',width: playWndWidth + 'px'}"></div> </div></template>插件所需
2022-02-24 11:10:34
7120
8
原创 List 数据处理为 Tree 数据（动态表单）
第一步把 Tree 数据的顶级数据先找出来，参数 data 就是 List 数据inputTree1(data) { data.forEach((item,index) => { if (item.fields.SUPER_ID === '-1') { item.fields.children = [] // this.data 就是tree数据，初始为空数组 this.data.push(item.fields) this.inputTr
2022-02-22 14:02:00
241
原创 vue 和风天气
在和风天气插件注册自己的插件，复制以下代码，更改 key 为自己的 key，更改 script 的 src 为自己的script<template> <div class="nav-header-wrapper"> <div id="he-plugin-simple"></div> </div></template><script>export default { name: "weather"
2022-02-15 11:48:21
862
原创 Echarts name 位置调整
yAxis: { type: 'value', name:'数量', nameTextStyle:{ fontSize: 12, color:'#999999', // name 位置 padding: [0, 0, 0, 0] },},
2022-02-15 11:45:04
1605
原创 Element 标签页样式修改
/deep/ .el-tabs__nav-wrap::after { height: 1px;}/deep/ .el-tabs__item { height: 50px; font-size: 16px; font-family: PingFang SC; font-weight: 400; color: #727171;}/deep/ .el-tabs__item:hover{ color: #C8291C;}/deep/ .el-tabs__item.is-act
2022-01-13 17:15:59
627
原创 Html 实现倒计时
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title倒计时title> <style> input { width: 40px; height: 20px; } #remainTime{
2022-01-11 10:01:50
10058
2
原创 Vue实现下拉表格组件
<template> <div> <div class="select-table"> <el-form ref="verification" label-width="80px" :model="selectData" :rules="rules"> <el-form-item label="姓名" prop="userName"> <el-input @change="chang
2022-01-10 15:45:46
1784
原创 element-ui 解决 el-select 设置默认值后无法切换选项
原因：select已经绑定了值，render函数没有自动更新，数据刷新了但是视图没有刷新解决方法：使用this.$forceUpdate()重新render<el-select @change="selectChange" size="small" v-model="ruleForm.periods" placeholder="请选择评定期数"> <el-option v-for="item in options" :key="item.id" :label
2021-12-27 16:42:29
817
原创 Vue 日期运算（计算时间差）
// 计算时间差dateDiff(date1,date2) { let date1Str = date1.split("-");//将日期字符串分隔为数组,数组元素分别为年.月.日 //根据年 . 月 . 日的值创建Date对象 let date1Obj = new Date(date1Str[0],(date1Str[1]-1),date1Str[2]); let date2Str = date2.split("-"); let date2Obj = new Date(date2St
2021-12-22 11:21:44
5212
1
原创 Element 表头换行方法
添加 width 使表头达到换行的宽度<el-table-column width="80px" :label="'计划投资\n(万元)'" align="center" show-overflow-tooltip></el-table-column>
2021-12-14 15:48:50
1181
原创 Echarts 每个柱子设置不同的
<div ref="rightChart" style="width: 100%;height:260px;"></div>rightOptionBar() { // 通过id获取获取画布 const myChart = echarts.init(this.$refs.rightChart,null,{devicePixelRatio: 2}); // 指定图表的配置项和数据 let option = { grid.
2021-12-06 15:43:41
1103
原创 Vue 中使用 moment 转换日期和时间
安装npm install moment在 main.js 全局引入import moment from 'moment'Vue.prototype.$moment = moment常用时间格式 今天为 2021-12-1// 时间戳转时间 2021-12-01this.$moment(1638336553801).format('YYYY-MM-DD')// 时间转时间戳this.$moment(new Date()).valueOf()// 获取今天 2021-12-1th
2021-12-01 13:31:45
1885
原创 React 组件的生命周期
创建（挂载阶段）执行顺序：constructor() → render() → componentDidMount()钩子函数触发时机触发时机constructor创建组件时，最先执行1.初始化state；2.为事件处理程序绑定thisrender每次组件渲染都会触发渲染UI（注意：不能调用setState() ）componentDidMount组件挂载（完成DOM渲染后）1.发送网络请求；2.DOM操作更新（更新阶段）执行顺序：render() →
2021-11-29 13:32:22
147
原创 React props 校验
安装 prop-typesyarn add prop-types / npm i prop-types// 导入prop-types包import PropTypes from 'prop-types'// 添加props校验App.propTypes = { colors: PropTypes.string}// 添加props默认值App.defaultProps = { colors: 3}const App = (props) => { cons
2021-11-29 13:23:33
228
原创 React 中 props 的 children 属性
children属性：表示组件标签的子节点。当组件标签有子节点时，props就会有该属性children属性与普通的props一样，值可以是任意值（文本、React元素、组件，甚至是函数）// children为文本节点const App = (props) => { console.log(props) return ( <div> <h1>组件标签的子节点：</h1> {props.children} <
2021-11-29 13:15:29
1401
原创 React Context 跨组件传递数据
Context 可以实现跨组件传递数据，Context 提供了两个组件：Provider 和 Consumer，Provider 用来提供数据，Consumer 用了 获取数据import React from 'react'import ReactDOM from 'react-dom'// 1.创建context得到两个组件const {Provider, Consumer} = React.createContext()class App extends React.Component
2021-11-29 13:10:25
293
原创 React 组件通讯的三种方式
父传子，父组件在子组件 Child 标签上绑定一个属性，属性的值为需要传递的参数，子组件通过props获取父组件传递过来的值，如果子组件是类组件，那么，props 为 this.propsimport React from 'react'import ReactDOM from 'react-dom'// 父组件class Parent extends React.Component { state = { lastName: "wang" } rende
2021-11-29 13:03:23
387
原创 React 的受控组件和非受控组件
受控组件：受到 React 控制的表单元素import React from 'react'// 1.受控组件：受到'React'控制的表单元素// HTML中表单元素是可输入的，也就是有自己可变的状态，而 React 中可变状态通常保存在 state 中，并且只能通过 setState() 方法来修改；React 将 state 与表单元素值 value 绑定到一起，由 state 的值来控制表单元素的值// 使用步骤// 1.给表单元素添加name属性，名称与state相同// 2.根据
2021-11-29 12:51:09
97
原创 React 组件
React 组件创建方式方式有两种，使用函数创建，和使用类创建。函数组件又叫做无状态组件，类组件又叫做有状态组件。函数组件没有自己的状态，只负责数据展示（静），类组件有自己的状态，负责更新UI，让页面“动起来”class App extends React.Component { // constructor() { // super() // // 初始化状态 // this.state = { // count: 0
2021-11-29 12:41:54
59
原创 JSX 的基本使用
JSX是React的核心内容。是JavaScript XML简写。优势是声明式的语法，更加直观，与HTML结构相同，降低学习成本，提高开发效率。//使用JSX创建React元素const title = ( <h1 className="title"> hello JSX! <span>这是span</span> </h1>)// 渲染react元素const root = document.getElementById('r
2021-11-29 09:39:24
335
原创 创建 React 项目
基本安装与使用npm i react react-dom// 1.导入react和react-domimport React from 'react'import ReactDOM from 'react-dom'// 2.创建react元素const title = React.createElement('h1', null, 'hello world!')// 3.渲染react元素ReactDOM.render(title, document.getElementById('r
2021-11-29 09:26:19
62
原创 Echarts 根据窗口自适应宽高
只需添加以下代码即可myChart.setOption(option);window.addEventListener("resize", function () { myChart.resize();});
2021-11-26 14:13:51
427
原创 Echarts 双Y轴刻度线不对齐
刻度线在显示时，双Y轴的分隔段落不一致，导致不对齐问题，那么我们就要两个Y轴的分隔段是一样的option.yAxis[0].max=Math.ceil(Math.max.apply(null,option.series[0].data)/5)*5;option.yAxis[0].interval=Math.ceil(Math.max.apply(null,option.series[0].data)/5);option.yAxis[1].max=Math.ceil(Math.max.apply(nul
2021-11-26 14:12:49
1614
原创 Element table 表头吸顶效果（适用于表头无fixed属性使用）
在 main.js 自定义 sticky 指令Vue.directive('sticky', { // 指令的定义 inserted(el,binding) { // 获取表头 const dom = el.children[1] const dom2 = el.children[2] // 获取滚动元素 const scrollParent = document.querySelector(binding.value.parent) scrollP
2021-11-24 12:36:43
1972
3
原创 Vue 修改页面 title
router.js 添加 meta{ path: "/home", name: "首页", component: () => import("../views/home.vue"), meta:{title:"首页"}},main.js 添加一下代码// 页面titlerouter.beforeEach((to,from,next)=>{ if(to.meta.title){ document.title = to.meta.title } next()
2021-11-19 11:49:04
661
原创 Echarts 图例后面增加内容
效果如图只需添加以下代码即可，与 series 平级formatter: function(name) { let data = option.series[0].data; let total = 0; let tarValue; for (let i = 0; i < data.length; i++) { total += data[i].value; if (data[i].name === name) { tarValue = data[i]
2021-11-18 13:58:54
919
1
原创 Echates timeline实现每一个柱子都有图例
<div style="width:100%;height:300px" id="experChart2"></div>具体方法如下getLoadEchart(id){ let bar_data = [2,3]; let bar_data2 = [23,45]; let myChart = this.$echarts.init(document.getElementById(id)); // prettier-ignore let option = {
2021-11-15 09:56:35
1152
Navicat Premium_11.1.8_po
2020-10-19
react 学习记录
2020-09-13
vuex 使用步骤代码
2020-09-08
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人