c_reshape-CSDN博客

Element.classListElement.classList.remove()Element.classList.add()业务场景：封装了ant-cascader的组件，增加样式类，修改了默认的样式。现在在其他页面使用封装好的这个组件，为了符合页面色系，需要在该页面去除该样式类，沿用默认的样式。setup () { nextTick(() => { /** remove AreaSelect component class ( use default ) */

2022-05-31 17:32:51 89

原创 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 975

原创 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 991

原创 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 1479

原创 vue3之vue-quill插件回显问题：空格、有序列表

<template> <QuillEditor theme="snow" toolbar="full" v-model:content="textContent" contentType="html" />  <span v-html="textContent" :class="['quill', 'ql-editor']"></span></template>.

2021-12-27 10:04:51 955 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 829

原创模糊检索的新思路

参考文章：Creating Your First Vue 3 Project - A Vue Tutorial - LearnVue

2021-12-13 10:32:34 87

原创 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 4941

原创 vue3之watch多个源

watchAPI 与选项式 APIthis.$watch(以及相应的watch选项) 完全等效。watch需要侦听特定的数据源，并在单独的回调函数中执行副作用。默认情况下，它也是惰性的——即回调仅在侦听源发生变化时被调用。与watchEffect相比，watch允许我们：惰性地执行副作用；更具体地说明应触发侦听器重新运行的状态；访问被侦听状态的先前值和当前值。 api：watch(WatcherSource, Callback, [WatchOptio...

2021-12-07 10:50:50 5449

原创 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 190

原创 vue3，webpack打包后，swiper样式丢失

解决方案：

2021-12-02 13:40:25 812 1

原创 antd vue Carousel自适应浏览器

<template> <section class="part1"> <a-carousel dotPosition="right">  <img src="@/assets/images/Home/bg_1.png" :style="bannerWH" /> <img src="@/assets/images/Home/bg_1.png.

2021-10-28 13:32:08 945

原创 vue2和vue3安装的devtools版本不同

参考文章：Why is Vue.js Chrome Devtools not detecting Vue.js? - Stack Overflow

2021-10-27 17:48:19 451

原创 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 375

原创 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 10698 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 1098

原创 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 77

原创 Js之 || 和 &&, == 和 ===

它们的返回值是两个操作数中的一个（且仅一个）。即选择两个操作数中的一个，然后返回它的值。之所以说大致相当，是因为它们返回结果虽然相同但是却有一个细微的差别。在 a ? a : b 中，如果 a 是一个复杂一些的表达式（比如有副作用的函数调用等），它有可能被执行两次（如果第一次结果为真）。而在 a || b 中 a 只执行一次，其结果用于条件判断和返回结果（如果适用的话）。...

2021-08-05 15:39:05 430

原创 Js之分析模仿类

概述：JavaScript 中只有对象。面向类的语言：类可以被复制（或者说实例化）多次，就像用模具制作东西一样。实例化（或者继承）一个类意味着“把类的行为复制到物理对象中”，对于每一个新实例来说都会重复这个过程。Js：没有类似的复制机制。不能创建一个类的多个实例，只能创建多个对象。它们[[Prototype]]关联的是同一个对象。这些对象之间并不会完全失去联系，它们是互相关联的。例如： function Per...

2021-08-01 08:27:21 99

原创 Js之async await和promise写法

写法一：async function asyncFunc() { await this.getFeatureInfoByPoint(0); attribute.isFirstData = this.featureInfo.isFirstData; attribute.isLastData = this.featureInfo.isLastData; this.updataFeatureInfo(attribute);}asyncFunc.apply(this); // 或者asyn

2021-07-28 17:24:47 156

空空如也

空空如也