真真的博客

原创 小程序获取input的值

// 获取输入的字段 <input placeholder='请输入医生、医院、科室' auto-focus bindinput="getTitle" class='ser'></input> getTitle: function (e) { var that = this var val = e.

原创 vue element-table分页回显选中与再次更改保留状态，前端手动过滤多条件查询

element分页table回显与更改

原创 vue3+ts vuex的使用

【代码】vue3+ts vuex的使用。

原创 vite2创建项目

【代码】vite2创建项目。

原创 新建路由的过程vue-router4

【代码】新建路由的过程vue-router4。

原创 获取日期 年月日 时分秒

获取日期

原创 普通数组转树形数组

普通数组转树形数组

转载 vue的环境配置 生产环境和开发环境配置

vue的环境配置 生产环境和开发环境配置

原创 TS 类型推论

1.定义字段imgs是由ImgsData类型组成的数组2.定义字段imgobj是由ImgsData类型组成的对象import { PropType } from 'vue'import { ImgsData } from '@/interface'export default defineComponent({ props: { imgs: { type: Array as PropType<ImgsData[]>, default: () =>

原创 vue 抽离出公共的js文件

目录结构：api>>indiex.ts如下export * from './common'export * from './site-survey'export * from './engine-progress'export * from './project'其余内部文件里面ts为：import { getApi, postApi } from '@/composables/useApi'export const getDetail = async ({ id, nod

原创 vue3学习

原创 vuerouter 404配置

router文件下面的index.js:

原创 vue插槽详解

作用：父组件向子组件传递内容，slot更像是一个出口类型：默认插槽 具名插槽 作用域插槽1.父组件向子组件传递内容index.vue父组件如下：: <children> <p>我是传递的内容</p> </children >children.vue:子组件接收 如下：： <template> <div> <h1>{{msg}}</h1> <slot>&

原创 node fs模块（文件）

`文件夹修改名字，参数：源-目标``13.4.3`fs.rename('./logs','./log',()=>{ })

原创 node相关process

console.log(process.argv[2]);如果运行npm run dev 则打印出dev 指的是运行的第三项npm i jquery@1 -S 安装1开头的最高版本script:{ 'dev':'gulp -v'}dependenices:{ 生产环境}，devDependencies{ "vconsole": "^3.9.5",}，//开发环境npm版本符号理解如下()：更新使用npm update例如13.4.3说明：major:12(

原创 node创建文件

###新建index.js执行：node index.js==index.js如下:==const fs= require('fs')// 1.文件位置 2. 文件内容 3.返回信息，第一个是errorfs.writeFile('./log.txt','hello',(err,data)=>{// 例子1-创建后生成log.txt if(err){ }else{ console.log('hello'); }})// 例子2--创建后生成de

原创 vue引入高德地图，逆地址解析，点标记

##再index.html中引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key值&plugin=AMap.MouseTool&plugin=AMap.Geocoder""></script> ##vue.config.js文件内：module.exports = { configureWebpack: (config) =

转载 es6扩展运算符（...)

对象的扩展运算符let bar={a:1,b:2}let baz={...bar}上述方法实际等价于：let bar={a:1,b:2}let baz=Object.assign({},bar)Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。(如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性)。同样，如果

原创 查询数组重复项的下标和内容

searchKeys(arr) { var str = ""; var list = []; for (var i = 0; i < arr.length; i++) { var hasRead = false; for (var k = 0; k < list.length; k++) { if (list[k] == arr[i]) { hasRead = true; ...

原创 普通数组转树形数组

/** * 普通数组转树形数组 * @param {Array} data 需要转化的数组 * @param {String} topid 顶级的id值，一般为null 或'' * @param {String} pidKey 父节点的key值 * @param {String} idKey 子节点的key值 */export function arrayToTree(data, topid, pidKey, idKey) { let res = []; let pId = pidKe

原创 具名插槽slot

element-UI中card卡片的使用：示例：可以通过template定义slot名称传入对应的dom结构

原创 vue 多页应用

1.首先在src下面创建pages文件夹，里面新建page1和page2文件夹，page1和page2内新建对应的page1.vue,page1.jspage1.jsimport Vue from 'vue'import App from './page1.vue'// import router from './router'// import store from './store'Vue.config.productionTip = falsenew Vue({ // rout

原创 安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

转载 vue中常用的数组方法

Vue中常用的数组方法.filter()、.map()、.forEach()、.find()、.findIndex()、.some()、.every().filter().map().forEach().find().findIndex().some().every().filter() filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 是否改变原数组：否 是否对空数组进行检测：否 语法： const arr= [32, 33

原创 vue定义时间过滤器

main.js文件import Moment from 'moment'Vue.filter('formatDate', function(value) { return Moment(value).format('YYYY-MM-DD HH:mm:ss')})vue使用<span>{{timer|formateDate}}</span>

原创 vue使用bus兄弟组件中的传值

新建bus.jsimport Vue from 'vue';// 使用 Event Busconst bus = new Vue();export default bus;main.js中引入bus.jsimport bus from '../../utils/bus'Vue.prototype.$bus=bus;a.vue页面使用 this.$bus.$emit('updateOrders')//触发b.vue页面使用 this.$bus.$on('updateOrder

原创 定义路由文件，按需加载

router文件新建router.js index.jsindex.js如下 import Vue from 'vue' import VueRouter from 'vue-router' import {router1,router2} from './routes' Vue.use(VueRouter) export const personCenterRouter = new VueRouter({ routes:router1 }) export const pers

原创 endsWith() 方法

JavaScript String endsWith() 方法endsWith()方法确定字符串是否以指定字符串的字符结尾。true如果字符串以字符结尾，则返回此方法，否则返回false。注意：endsWith()方法区分大小写。实例：检查字符串是否以“universe”结尾：var str = "Hello world, welcome to the universe.";var n = str.endsWith("universe.");...

原创 获取当前时间封装

export function getTimeObj(sj){ var now = new Date(sj); var year=now.getFullYear(); var month=now.getMonth()+1; var date=now.getDate(); var hour=now.getHours(); var minute=now.getMinutes(); var second=now.getSeconds();

原创 vue动态设置每个li的样式

页面： <i :style="{color: getColor(item.status)}" ></i>数据：data(){ return{ colors: { complated: '#268cf0', danger: '#FEAA00', delay: '#FD4443', undo: '#E4E9EF' },}}方法：methods: getColor(

原创 export default和export的区别

export default一个js文件只能有一个引用方式：import sevice from seviceexport在js文件可以有多个引用方式：import {getUser,getPro} from project

原创 promise封装axios请求

封装一个axios新建文件serve.jsimport axios from 'axios'import qs from 'qs'const instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: { Authorization:'', Content-Type:'application/x-www-form-urlencoded' }});

原创 vue 普通input监听回车事件

vue 普通input监听回车事件<input @keyup.enter="submit">

转载 vuex中 this.$store.dispatch() 与 this.$store.commit()方法的区别

this.$store.dispatch() 与 this.$store.commit()方法的区别总的来说他们只是存取方式的不同,两个方法都是传值给vuex的mutation改变statethis.$store.dispatch() ：含有异步操作，例如向后台提交数据，写法：this.$store.dispatch(‘action方法名’,值)this.$store.commit()：同步操作，，写法：this.$store.commit(‘mutations方法名’,值)commit: 同步操作

原创 vue 水位球使用

第一步安装npm install echartsLiquidfill --save第二步引入对应的vue文件：import echartsLiquidfill from 'echarts-liquidfill'<template> <div id='waveEchart' style="width:200px;height:200px;"></div></template><script>import echartsLiquidf

原创 vue 倒计时效果，两个日期差计算

<template> <div style=""> <div> <p class="p1" v-if="chkValue!='0-0'">投产倒计时</p> </div> <ul class="ul1" v-if="chkValue!='0-0'"> <li> <span class="count"> <im

原创 vue 获取当前时间

<template> <div>{{nowDate}}</div></template><script>export default {data() { return { nowDate: "", // 当前日期 }; }, mounted() { this.currentTime(); },methods: { currentTime() { setInterval(th

原创 js获取当前时间

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title></title></head><body><div class="header-time"> <sp

原创 vue实现无限旋转效果

<template> <div> <i :class="{'rotate360':showAnimate}" @animationend="reset" class="icon-iconfontshuaxin"></i> </div></template><script>export default { data() { return { showAnimate:

原创 object标签上悬浮div标签，可拖拽,播放rtsp视频

object上方悬浮div并实现拖拽，云台控制等操作<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=10"/> <meta name="viewport" content="width=device-width,initial-scale=1"> <title&g