vue
vue
尘寰ya
这个作者很懒,什么都没留下…
展开
-
ant-design-vue 自定义日期下拉框
项目场景:使用ant-design-vue实现一个自定义日期选择的下拉框,下拉框选项中包含近一周、近一个月、最近一年和自定义日期(如下图)。问题描述这里使用 a-select 组件的 dropdownRender 对下拉菜单进行扩展。当鼠标移入到自定义选项时,展示组件 a-range-picker ,当聚焦在 a-range-picker 时,下方的日期选择出现在左上方!(由图一到图二)原因分析:提示:这里填写问题的分析:a-range-picker 组件定义浮层的容器默认为bod原创 2022-04-22 15:24:53 · 3421 阅读 · 0 评论 -
vue组件通信之$attrs与$listeners的使用
组件关系parent组件<template> <div> <!-- <child @method1="handleClick" @input="handleInput" msg="home组件传来的数据msg" a="另一个数据" /> --> <child data1="数据1" data2="数据2" @event="handleEvent" /> </div></template>&原创 2021-08-31 17:30:54 · 112 阅读 · 0 评论 -
v-bind.sync的使用
v-bind.sync在子组件中我们不能直接修改父组件传过来的prop值,一般情况下通过$emit传递事件,然后在父组件中监听这个事件,再在事件中修改这个prop值。v-bind.sync可以理解为是这种方式的语法糖。在父组件v-bind.sync可以实现props的双向绑定v-bind.sync与v-model的区别?一个组件可以多个属性用.sync修饰符,可以同时"双向绑定多个“prop”,而并不像v-model那样,一个组件只能有一个。v-model针对更多的是最终操作结果,是双原创 2021-08-31 16:19:43 · 3600 阅读 · 0 评论 -
VueX使用
VueX五个核心概念:state, getters, mutations, actions, modules。1. state:vuex的基本数据,用来存储变量2. geeter:从基本数据(state)派生的数据,相当于state的计算属性3. mutation:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方,并且它会接受 state原创 2020-11-17 01:14:42 · 80 阅读 · 0 评论 -
vue使用install函数把组件做成插件方便全局调用
1.首先新建一个Cmponent.vue文件<template> <div class="toast" v-show="isShow"> <div>{{ message }}</div> </div></template><script>export default { name: "", data() { return { message: "", isSh原创 2020-11-13 16:42:48 · 863 阅读 · 1 评论 -
Vue通信(子传父)
子组件向父组件传递数据简单理解:子组件通过触发事件生成自定义函数,父组件通过调用自定义函数去实现相应的方法。第一步子组件模板有触发事件,本例中<button v-for=‘item in categories’ @click=‘btnClick(item)’>;@click='btnClick(item)调用 methods: {btnClick(item){//自定义函数item-click(用于发送)this.$emit(‘item-click’,item)}}第二步原创 2020-09-26 09:26:26 · 168 阅读 · 0 评论 -
supermall-tabbar切换保留原来位置
tabbar切换保留原来位置一、让home保持原来的状态1.取消路由切换自动销毁(给router-view加keep-alive标签)//App.vue<template><div id="app"> <keep-alive> <router-view/> </keep-alive> <main-tab-bar/></div>2.让Home保持原来的位置离开时,保存一个位置原创 2020-10-15 15:27:43 · 94 阅读 · 0 评论 -
vue cli2简单配置
vue cli2脚手架的简单配置代码如下(示例):在项目文件夹下输入命令 vue init webpack vuecli2text(vuecli2text是自己命名的)test> vue init webpack vuecli2text? Project name vuecli2text? Project description test vue cli2? Author ? Vue build standalone ? Install vue-router? No? Us原创 2020-10-03 21:44:48 · 678 阅读 · 0 评论 -
使用vscode在项目里本地安装webpack进度条不动
项目场景:在学习使用webpack时,发现在vscode当中无法使用npm install 安装相应的东西,并且没有任何错误提示,仅能看到进度条不动的情况。问题描述:vscode执行npm install webpack 进度条不动PS C:\Users\尘寰\Desktop\test> npm install webpack --save-dev[..................] / rollbackFailedOptional: verb npm-session c3a9fa7cd原创 2020-09-29 16:26:49 · 834 阅读 · 0 评论 -
slot插槽、具名插槽,作用域插槽的使用
文章目录前言一、slot的基本使用1.使用步骤2.图片分析3.运行效果4.代码二、具名插槽的使用1.使用步骤2.图片分析3.对比效果4.相应代码三、作用域插槽的使用1.使用步骤2.图片分析3.对比效果4.相应代码总结前言slot插槽使组件具有扩展性。这部分我们要学习slot的基本使用、具名插槽的使用以及作用域插槽的使用一、slot的基本使用<slot> 元素作为组件模板之中的内容分发插槽。<slot> 元素自身将被替换。详细用法,请参考下面教程的链接。slot插槽使原创 2020-09-28 11:49:47 · 1097 阅读 · 0 评论