vue
c_reshape
I went from zero
展开
-
实现vant的年月日时分秒组件
方法:van-datetime-picker(type:datetime)和 van-picker结合实现。原创 2024-05-07 10:44:44 · 866 阅读 · 0 评论 -
Vue3之全局引入Element UI的ElMessage
ElMessage原创 2022-08-08 14:24:53 · 7711 阅读 · 3 评论 -
vue.config.js中的devServer proxy配置(本地开发环境代理后端接口)
vue.config.js原创 2022-06-22 10:25:50 · 1799 阅读 · 0 评论 -
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 · 1067 阅读 · 0 评论 -
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 · 1094 阅读 · 1 评论 -
模糊检索的新思路
参考文章:Creating Your First Vue 3 Project - A Vue Tutorial - LearnVue原创 2021-12-13 10:32:34 · 108 阅读 · 0 评论 -
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 · 869 阅读 · 0 评论 -
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 · 5146 阅读 · 0 评论 -
vue3之watch多个源
watchAPI 与选项式 APIthis.$watch(以及相应的watch选项) 完全等效。watch需要侦听特定的数据源,并在单独的回调函数中执行副作用。默认情况下,它也是惰性的——即回调仅在侦听源发生变化时被调用。 与watchEffect相比,watch允许我们: 惰性地执行副作用; 更具体地说明应触发侦听器重新运行的状态; 访问被侦听状态的先前值和当前值。 api:watch(WatcherSource, Callback, [WatchOptio...原创 2021-12-07 10:50:50 · 5586 阅读 · 0 评论 -
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 · 1115 阅读 · 0 评论 -
vue2和vue3安装的devtools版本不同
参考文章:Why is Vue.js Chrome Devtools not detecting Vue.js? - Stack Overflow原创 2021-10-27 17:48:19 · 551 阅读 · 0 评论 -
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 · 11573 阅读 · 1 评论 -
antd vue table的fix height
<a-table class="table" :columns="columns :data-source="tableData" :rowKey="(record, index) => index" :pagination="{ total: tableData.length, pageSize: 10 }" style="height: 3.87rem" :scroll="{ y: '3.3rem' }"></a-table>/dee.原创 2021-06-25 13:59:51 · 590 阅读 · 0 评论 -
vue-awesome-swiper之点击事件
当 swiper 开启 loop 属性实现循环轮播,同时用 vue 的事件绑定语法为每个轮播页绑定事件,当轮播到特定的页面时绑定的事件无法被正常监听。原因:Swiper 是通过在实际轮播页前后复制若干个页面来实现 loop(首尾相连循环滚动)效果的,因为虽然复制了轮播页元素但 vue 所绑定的事件处理器却没有被复制。解决方案:Swiper.js本身提供了一套事件绑定机制,只需要把原代码里 vue 指定绑定的事件监听器通过 Swiper 初始选项中绑定就好了。调整后的代码如下:data() {.原创 2021-05-07 15:23:04 · 3383 阅读 · 0 评论 -
vue之this.$nextTick()的用法
his.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它,然后等待DOM更新。this.$nextTick 跟全局方法 vue.nextTick 一样,不同的是,回调的 this 自动绑定到调用它的实例上。总的来说,假设我们更改了某个 dom 元素内部的文本,而这时候我们想直接打印这个更改之后的文本是需要 dom 更新之后才会实现的,就像我们把将要打印输出的代码放在 setTimeout(fn, 0) 中一样。this.$nextTick这个方法作用是当数据被原创 2021-05-06 12:29:12 · 614 阅读 · 0 评论 -
antd-vue中,点击列表行高亮效果实现
<a-table class="table" :columns="columns" :data-source="tableData" :scroll="{ x: '13.5rem', y: tableSize === 'normal' ? '2.3rem' : null }" :pagination="{ pageSize: tableSize === 'norm...原创 2021-04-16 08:45:48 · 1443 阅读 · 1 评论 -
Vue之轮播图自动播放
<template> <section class="carousel-body"> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide v-for="(slide, index) in swiperList" :key="index"> <section align="center"><img :src="slide" alt=.原创 2021-04-13 11:51:55 · 1086 阅读 · 0 评论 -
Vue之抽象节点VNode
抽象Dom树在刀耕火种的年代,我们需要在各个事件方法中直接操作Dom来达到修改视图的目的。但是当应用一大就会变得难以维护。那我们是不是可以把真实Dom树抽象成一棵以javascript对象构成的抽象树,在修改抽象树数据后将抽象树转化成真实Dom重绘到页面上呢?于是虚拟Dom出现了,它是真实Dom的一层抽象,用属性描述真实Dom的各个特性。当它发生变化的时候,就会去修改视图。但是这样的javascript操作Dom进行重绘整个视图层是相当消耗性能的,我们是不是可以每次只更新它的修改呢?所以Vue.转载 2021-03-10 10:49:56 · 812 阅读 · 0 评论 -
antd vue table本地排序(汉字,数字,字符串)
const columns = [ { title: '汉字', dataIndex: 'name', sorter:(a,b) => a.name.localeCompare(b.name) }, { title: '数字', dataIndex: 'amount',.原创 2021-03-09 09:48:53 · 1637 阅读 · 0 评论 -
Vue.js is detected on this page. Open DevTools and look for the Vue panel.
1、closed and re-open Chrome.2、Hard refresh the browser.3、re-open the developer tools window and look for the Vue tab.4、add before new vue instantiation:Vue.config.devtools = true;原创 2021-03-02 14:54:12 · 814 阅读 · 0 评论 -
Vue 组件间通信有哪几种方式?
Vue 组件间通信只要指以下 3 类通信:父子组件通信、隔代组件通信、兄弟组件通信,下面我们分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信。(1)props / $emit 适用 父子组件通信这种方法是 Vue 组件的基础,相信大部分同学耳闻能详,所以此处就不举例展开介绍。(2)ref 与 $parent / $children 适用 父子组件通信ref:如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例 $parent / $转载 2021-03-01 17:00:31 · 1040 阅读 · 0 评论 -
vuex页面刷新数据丢失的解决办法
在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失。原因:因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值初始化解决思路:将state的数据保存在localstorage、sessionstorage或cookie中(三者的区别),这样即可保证页面刷新数据不丢失且易于读取。https://juejin.cn/post/6844903791838363655...原创 2021-02-25 13:58:08 · 220 阅读 · 0 评论 -
Axios之cancelling previous api requests with axios in vuex
let source = null;getData({ commit,state,dispatch }, id){ if(source){ source.cancel(); } const CancelToken = axios.CancelToken; source = CancelToken.source(); axios .get("http://15.100.100.100:9999/getData/" + id, { cancelToken:source.原创 2021-02-08 11:24:27 · 83 阅读 · 0 评论 -
antd vue select 下拉菜单不和选择器同宽
<a-select class="subscribe-select" dropdownClassName="drop-down-Style" // 下拉菜单的 className 属性 :dropdownMatchSelectWidth="false" // 下拉菜单不和选择器同宽 :value="userId" @change="handleUserChange" :defau..原创 2021-02-05 09:18:50 · 4372 阅读 · 1 评论 -
antd vue input 密码以密文展示
<a-form-item label="设置密码"> <a-input autocomplete="off" type="password" v-decorator="['password', { rules: [{ required: true, message: '建议使用数字、字母、特殊字符组合' }] }]" /> </a-form-item>type..原创 2021-02-03 16:09:10 · 1520 阅读 · 0 评论 -
antd vue input去除自动记忆功能
autocomplete="off"原创 2021-02-03 11:45:54 · 2242 阅读 · 0 评论 -
antd vue table hover的颜色修改
又get了一个技能点.ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td { background: #fff; }参考博客:https://blog.csdn.net/weixin_41554281/article/details/103574156原创 2021-02-02 10:24:11 · 1294 阅读 · 1 评论 -
antd vue之select组件placeholder属性不起作用
初始值不赋空字符串,赋undefined原创 2021-01-22 16:33:00 · 546 阅读 · 0 评论 -
antd vue 可搜索树
<template> <div class="person"> <a-input-search v-model="searchStr" placeholder="输入搜选项" style="width:200px;" @search="onSearch"></a-input-search> <!-- selectedKeys是选中项key的集合,expandedKeys是展开项key的集合 --> <a-tree.原创 2021-01-13 11:51:23 · 1973 阅读 · 1 评论 -
vue antd table假分页回调
要求:重新发请求确定查询,数据源变化后,将之间的分页页码重置为1methods: { // 页码改变的回调 onPageChange(page, pageSize) { this.current = page; },} watch: { datalist() { // 监听数据源 this.current = 1; // 数据源变化后,重置页码为1,初始值 }, },...原创 2021-01-12 12:38:46 · 628 阅读 · 0 评论 -
Vue : Computed property “name” was assigned to but it has no setter
控制台报错:解决方案:原创 2021-01-12 09:58:53 · 244 阅读 · 0 评论 -
vue之插槽slot使用
原创 2021-01-06 12:36:15 · 140 阅读 · 0 评论 -
Js之遍历树
let namesMap;/** * @author: aa * @description: 遍历树 * @param {*} arr * @param {*} node * @return {*} */export const traverseTree = (arr, node) => { arr.forEach((i) => { if (i.name === node) { namesMap = { area: i.area, .原创 2020-12-22 20:20:16 · 455 阅读 · 0 评论 -
按钮或者文字页面居中
left: 50%; // the CSS left property is based on the size of the parent elementtransform: translateX(-50%); // the transform property is based on the size of the target element, translateX()函数表示在二维平面上水平方向移动元素。 其结果的数据类型是<transform-function>...原创 2020-12-09 15:55:32 · 132 阅读 · 0 评论 -
vue video player 怎么禁止单击暂停播放的功能
.vjs-tech { pointer-events: none;}原创 2020-12-09 15:49:12 · 2614 阅读 · 1 评论 -
vue unexpected require()解决报错
解决方法:.eslintrc.js中加入配置:module.exports = { rules: { "global-require": 0 },};原创 2020-11-24 14:38:47 · 7746 阅读 · 0 评论 -
vue-cli4中axios获取本地json文件,v-for使用
1.axios获取本地json文件 本地json放在public文件夹中,axios直接使用,export default { name: 'Product', components: { AButton: Button, }, data() { return { productList: [], }; }, mounted() { axios.get('/data/home.json').then((res) =>...原创 2020-11-24 14:03:02 · 580 阅读 · 0 评论 -
vue热更新
https://juejin.cn/post/68626646599852687491.npm install --save-dev webpack-dev-server2.touch vue.config.js module.exports = { // 热更新 devServer: { open: true, hot: true, compress: true, disableHostCheck: true, },}3. p...原创 2020-11-23 09:46:55 · 616 阅读 · 0 评论 -
vue项目搭建及基本配置
https://cloud.tencent.com/developer/article/1485228转载 2020-11-05 15:06:53 · 145 阅读 · 0 评论 -
新增位置授权功能
onLoad(option) { this.queryLocation()}queryLocation() { var that = this; uni.getSetting({ success(res) { if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) { uni.sho.原创 2020-08-20 21:19:11 · 132 阅读 · 0 评论