- 博客(149)
- 收藏
- 关注
原创 h5中echarts图表,增加双指缩放功能,支持区域缩放
起因:在h5的echarts中,数据量过多,增加了dataZoom,但是折线图依然不美观。产品希望通过双指移动事件,显示折线图的数据。1、echarts保留dataZoom,但是将height设置为0,start是0,end是100。3、监听手势,获得双指移动的缩放比例,更新echarts 的 dataZoom 范围。2、使用检测触摸手势的js库:hammer.js,检测手势。
2024-04-30 11:43:42 526 2
原创 element-plus中input记住之前输入的值
参考文章:关于input输入框记住之前保存的输入值及autocomplete和name属性 - IT小猿人 - 博客园 (cnblogs.com)
2024-04-08 09:10:10 242
原创 element-plus中table多选实现
b. 通过从所有列表中找到需要选中的项来帮助选中,直接使用选中列表来设置会出错。a. 需要在下次DOM更新循环结束之后执行。2、在封装的table组件中,
2024-04-07 13:32:52 277
原创 解决uniapp小程序webiview套h5页面,ios设备的橡皮筋效果
3、iOS设备上下滑动就不会出现webview的‘此网页由xxx提供’。1、h5安装inobounce。
2024-03-18 11:57:30 402
原创 vue使用Web Speech API实现语音播报
SpeechSynthesisUtterance对象用于表示要播放的语音内容,SpeechSynthesis对象则用于控制语音的播放、暂停、停止等操作。先调用下window.speechSynthesis.cancel()方法。不兼容chrome。
2023-11-03 16:50:52 734
原创 vue-element-plus-admin中的表单,验证非必填项以及多个必填项
【代码】vue-element-plus-admin中的表单,验证非必填项以及多个必填项。
2023-05-08 15:35:04 627 1
原创 Css之El-tree(已设置show-checkbox属性) 第一层节点不显示checkobox勾选框
El-tree 第一层节点不显示checkobox
2022-12-21 09:35:37 1053
原创 Why it occurs this error [The JSON value could not be converted to System.Nullable]
The JSON value could not be converted to System.Nullable
2022-10-18 15:44:08 567
原创 Js之判断数据类型的通用方法
最新的数据类型:String、Number、Object、Boolean、null、undefined、Symbol、BigInt
2022-07-10 19:16:26 123
原创 Js之操作元素当前的样式类
Element.classListElement.classList.remove()Element.classList.add()业务场景:封装了ant-cascader的组件,增加样式类,修改了默认的样式。现在在其他页面使用封装好的这个组件,为了符合页面色系,需要在该页面去除该样式类,沿用默认的样式。setup () { nextTick(() => { /** remove AreaSelect component class ( use default ) */
2022-05-31 17:32:51 91
原创 Css之设置光标颜色
示例:input { border: none; background-color: transparent; caret-color: #fff; // 设置光标颜色}.input-select { width: 7.2rem; caret-color: #fff; // 设置光标颜色 :deep(.ant-select-selection-search-input) { color: #fff; }}...
2022-05-31 10:40:28 982
原创 Vue3之setup()使用vuex module中的getters
示例:<script>import { useStore } from 'vuex';import { computed } from 'vue';export default { name: 'WmsTitle', setup() { const store = useStore(); /** focal point */ const useWmsTime = computed(() => store.getters['basemap/use
2022-05-11 11:27:02 995
原创 Git之commit后,如何撤销commit,保存工作区的修改
解决方法:git reset --soft HEAD^命令详解:HEAD^ 表示上一个版本,即上一次的commit,也可以写成HEAD~1如果进行两次的commit,想要都撤回,可以使用HEAD~2--soft不删除工作空间的改动代码 ,撤销commit,不撤销git add file--hard删除工作空间的改动代码,撤销commit且撤销add
2022-03-24 11:27:51 1493
原创 vue3之vue-quill插件回显问题:空格、有序列表
<template> <QuillEditor theme="snow" toolbar="full" v-model:content="textContent" contentType="html" /> <!-- 预览 加上ql-editor类选择器 --> <span v-html="textContent" :class="['quill', 'ql-editor']"></span></template>.
2021-12-27 10:04:51 962 1
原创 Js之echarts图片下载
1、使用canvas的toDataURL方法const canvas = document.getElementsByTagName('canvas');const dom = Array.from(canvas)[6];const baseUrl = dom.toDataURL('image/png'); // 获取base64const link = document.createElement('a');link.href = baseUrl;link.setAttribute('do
2021-12-17 17:25:15 833
原创 模糊检索的新思路
参考文章:Creating Your First Vue 3 Project - A Vue Tutorial - LearnVue
2021-12-13 10:32:34 89
原创 vue3之生命周期钩子
Vue 3中,Options API (选项型)和 Composition API (组合型)生命周期钩子的图表:1、使用 Options API,生命周期钩子作为选项暴露在Vue 实例上。 不需要引入任何东西, 例如:<script> export default { mounted() { console.log('mounted!') }, updated() { console.log('updated!')
2021-12-08 14:23:23 830
原创 vue3之fix: [Vue warn]: Write operation failed: computed value is readonly.
<template> <div class="transparency tool-kit" @click.stop> <section class="contain"> <span>透明度</span> <a-slider v-model:value="slideVal" :tooltipVisible="false" @change="changeSlider" /> <span.
2021-12-07 17:54:54 4988
原创 vue3之watch多个源
watchAPI 与选项式 APIthis.$watch(以及相应的watch选项) 完全等效。watch需要侦听特定的数据源,并在单独的回调函数中执行副作用。默认情况下,它也是惰性的——即回调仅在侦听源发生变化时被调用。 与watchEffect相比,watch允许我们: 惰性地执行副作用; 更具体地说明应触发侦听器重新运行的状态; 访问被侦听状态的先前值和当前值。 api:watch(WatcherSource, Callback, [WatchOptio...
2021-12-07 10:50:50 5471
原创 js之dom event onload
Definition and UsageThe onload event occurs when an object has been loaded.onload is most often used within the <body> element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.)
2021-12-02 18:01:20 191
原创 antd vue Carousel自适应浏览器
<template> <section class="part1"> <a-carousel dotPosition="right"> <!-- img初始像素是1920*1018px --> <img src="@/assets/images/Home/bg_1.png" :style="bannerWH" /> <img src="@/assets/images/Home/bg_1.png.
2021-10-28 13:32:08 959
原创 vue2和vue3安装的devtools版本不同
参考文章:Why is Vue.js Chrome Devtools not detecting Vue.js? - Stack Overflow
2021-10-27 17:48:19 458
原创 Css之字体渐变 (包括iconfont font class)
.iconfont { background: linear-gradient(-45deg, #0096ff, #00dcd2); // iconfont图标渐变 background-clip: text; font-size: 0.41rem; -webkit-text-fill-color: transparent;}.title { display: flex; flex-direction: column; margin-top: 0.48rem;.
2021-10-27 17:43:58 376
原创 antd ConfigProvider 全局化配置 (vue2 和 vue3)
在vue3中:// main.jsimport { ConfigProvider } from 'ant-design-vue';import { createApp } from 'vue';import App from './App.vue';const app = createApp(App);app.use(ConfigProvider);app.mount('#app');// App.vue<template> <a-config-pro
2021-10-27 10:35:10 10748 1
原创 Css之推荐自动排序插件CSScomb(css排序)
vscode配置1、安装CSScomb插件。2、settings.json中,增加以下配置{ "csscomb.formatOnSave": true, "csscomb.preset" : "yandex", // 官方推荐选项csscomb, zen, yandex}参考文章:推荐css自动排序插件csscomb - 简书
2021-09-23 14:12:21 1105
原创 Attach Authorization header for all axios requests (为所有 axios 请求附加授权头)
axios.interceptors.request.use((config) => { // Set the AUTH token for any request const token = window.localStorage.getItem('token'); if (token) { config.headers.Authorization = token; } return config;});参考链接:https://stackoverflow.com.
2021-08-05 17:18:10 78
原创 Js之 || 和 &&, == 和 ===
它们的返回值是两个操作数中的一个(且仅一个)。即选择两个操作数中的一个,然后返回它的值。之所以说大致相当,是因为它们返回结果虽然相同但是却有一个细微的差别。在 a ? a : b 中,如果 a 是一个复杂一些的表达式(比如有副作用的函数调用等),它有可能被执行两次(如果第一次结果为真)。而在 a || b 中 a 只执行一次,其结果用于条件判断 和返回结果(如果适用的话)。...
2021-08-05 15:39:05 433
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人