VUE
czx3387170
这个作者很懒,什么都没留下…
展开
-
vuex中的acitons的理解
1/首先vuex中的mutions相当于method,vuex中建议我们mutions中的方法名用大写,action中定义的方法是用来提交mutions中的方法,所以aciton中的方法也要有方法名,并且方法名有一个参数,这个参数就是vuex的一个实例,通过实例可以获取这个实例的属性和方法。vuex创建的一个实例context 包含以下属性和方法context = { dispatch: local.dispatch, commit: local.commit, g.原创 2021-09-07 15:26:05 · 281 阅读 · 0 评论 -
vue强制刷新
组件内刷新:this.$forceUpdate() 和v-if<template><button @click="reload()">刷新当前组件</button></template><script>export default { name: 'comp', methods: { reload() { this.$forceUpdate() } }}原创 2021-08-26 11:34:43 · 75 阅读 · 0 评论 -
ant-design-vue 如何使用内置的变量样式
1、在自定义的style.less里面引入@import'~ant-design-vue/lib/style/index.less';在shyle.less里面就可以直接用内置变量样式了这种方法只能在自定义的style.less里面用内置样式,无法全局使用内置样式原创 2021-08-11 11:14:25 · 2611 阅读 · 0 评论 -
ant 文件上传upload
<template> <a-upload list-type="picture-card" :customRequest="imgAdd" :remove="imgDel" :file-list="fileList" @preview="handlePreview" @change="handleChange"> <div v-if="fileList.length < 9"> <a-...转载 2021-08-05 20:11:45 · 919 阅读 · 0 评论 -
ant-design-vue table 表格跨页勾选+限制条件
<uto-table :columns="columns" :loadParams="loadParams" :url="queryUrl" :conditions="conditions" bordered :tableId="tableId" :rowSelection="{ onChange: onSelectChange, onSele...原创 2021-07-13 10:07:30 · 1848 阅读 · 1 评论 -
vue 如何设置localstoreage,及运用到项目中
先导出-存export const setStore = (name, content, maxAge = null) => { if (!global.window || !name) { return } if (typeof content !== 'string') { content = JSON.stringify(content) }// const storage = global.window.localStorage storage.原创 2021-07-08 17:25:36 · 2212 阅读 · 1 评论 -
手机端端文本内容超过一定高度时,下方的展开/收缩功能
<template> <div class="about"> <ul :class="{ active: !flag }"> <li v-for="(item, index) in todos" :key="index">{{ item.text }}</li> </ul> <p class="zhankai" v-if="todos.length > 6" @click="show.原创 2021-07-06 11:14:25 · 161 阅读 · 0 评论 -
ant vue from表单验证,用户名、密码、手机校验
<a-form class="user-layout-login" :form="form"> <a-form-item has-feedback> <a-input size="large" type="text" placeholder="用户名" v-decorator="['supplierid', checkRules.supplierid]"> <a-icon slot="prefix" type="us.原创 2021-07-01 11:40:01 · 969 阅读 · 0 评论 -
ant-design-vue table表头拖拽功能 踩坑
用官方的DEMO也可以,但是有几点必须要注意,否则拖拽不成功,1、vue-draggable-resizable的版本必须是2.1.0,其他版本有冲突。 npm installvue-draggable-resizable@2.1.02、必须在table-draggable-handle样式中加入:transform:none; position:absolute 否则不起效果ant-design-vue版本是1.7.2 vue版本是2.6.11import Vue from 'v...转载 2021-03-14 16:34:00 · 3637 阅读 · 1 评论 -
ant desing vue table 点击表格,实现背景行变色
直接利用rowClassName这个参数,直接上代码<a-table :rowClassName="(record,index)=>{ retrun index===selectIndex?'active':' '}":customRow="rowClick"></table>data(){ return{ selectIndex=null }},method:{rowClick(record,index){return{ props:原创 2020-12-14 15:17:05 · 2210 阅读 · 0 评论 -
vuex 学习笔记
1、store的commit和dispatch区别this.$store.commit('toShowLoginDialog', true);this.$store.dispatch('toShowLoginDialog',false);主要区别是:dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch('mutations方法名',值)commit:同步操作,写法:this.$store.commit('mutations方法名',值)原创 2020-06-23 13:44:58 · 475 阅读 · 0 评论 -
解构参数
一、为何要使用解构参数一个函数中有3个参数function(key,value,options){.....} 期中options是一个对象,使用者一开始是不知道这个options是对象,包含哪些属性,所以就用到了ES6的解构参数功能以上用解构参数来写=function test(key,value,{name,age,sex})test(width,200,{name:"czx",age:"18",sex:"famal"})二、解构参数必须要传参,如果不传 会报错,所以我们可以给它一个..原创 2020-06-23 13:27:57 · 616 阅读 · 0 评论 -
vue生命周期
vue生命周期说到vue的生命周期其实并不难理解,就是从一个vue项目创建,渲染,数据更新、销毁。vue提供了6个钩子函数,每进入一个周期时就会触发对应的钩子函数,例如当页面离开后你想销毁一个定时器,那么这时候就要在销毁前的钩子函数里执行。这就是它们的作用。beforeCreated每一个页面都是一个vue实例,这时实例还没有被创建,所以你无法知道data,也不能用watch监听created 实例这时实例已经创建,可以得到data,调用watch,但是页面还是空白的beforeMoun原创 2020-06-11 17:18:26 · 87 阅读 · 0 评论 -
ant design vue中from表单使用方法
1、如何使用form中的绑定?先在data中注册form:this.$form.createFrom(this);2、如何查看form绑定的表单数据?this.form.validateFieldes((err,value)=>{console.log(values)})3、如何改变v-decorator中的值呢?this.form.setFieldsValue({})nextTick()是在mounted() DOM更新之后立马执行,而不是在create候执行。这样.原创 2020-05-29 10:03:00 · 8093 阅读 · 1 评论 -
vue-router踩坑
1.vue3版本之后可以使用VUE add安装路由和vuex(因为他们不是插件)vue add routervue add vuex2.在属性里面要使用对象的表达式,必须要用在动态绑定值里面:( <router-linke :to="{name:about}">about</router-link>)...原创 2020-05-18 11:40:57 · 1073 阅读 · 0 评论 -
ant design vue datapick日期控件 记录
最近项目中引用了ant design vue库,以下是对日期控件的一些记录。可以使用moment()首先要记得引入importmomentfrom'moment'<a-range-picker :default-value="[moment().startOf('month'), moment()]" :format="dateFormat" />上面的默认值:moment().startOf('...原创 2020-05-08 20:16:02 · 899 阅读 · 0 评论 -
ant design for vue 关于table的一些问题
1、为table添加分页: :pagination="pagination"pagination: {defaultPageSize: 10,showTotal: (total) => `共${total} 条数据`,total: 0,showSizeChanger:true,pageSizeOptions: ['10...转载 2020-05-07 17:15:14 · 1797 阅读 · 0 评论 -
vuex中的action和mutaion的理解
1/Actions 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters期中dispach()实现异步提交,而commit()实现同步提交;dispach("方法名",值);comm...转载 2020-04-29 17:06:08 · 615 阅读 · 0 评论 -
router 传参
一个“路径参数”使用冒号 : 标记。当匹配到一个路由时,参数值会被设置到 this.$route.params,可以在每个组件内使用。于是,我们可以更新 User 的模板,输出当前用户的 ID:路由有3种传参方式:1.可以手写完整的path:this.$router.push({path:`/user/${userId}`})2、通过params:query传参是针对path的,p...原创 2020-04-28 10:30:10 · 460 阅读 · 0 评论 -
vue.js--计算属性&样式绑定
计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。例:反转字符串:<div id="app"> <p>原始字符串: {{ message }}</p> <p>计算后反转字符串: {{ reversedMessage }}</p></div> <script&a转载 2018-11-28 10:26:37 · 1065 阅读 · 0 评论 -
HTML5全屏(Fullscreen)API详细介绍
HTML5全屏(Fullscreen)API详细介绍// 整个页面 onclick= launchFullScreen(document.documentElement); // 某个元素 launchFullScreen(document.getElementById("videoElement"));// 找到支持的方法, 使用需要全屏的 element 调用 functi...转载 2018-10-31 17:07:29 · 568 阅读 · 0 评论 -
element-ui隐藏滚动条组件scrollbar 的使用
使用插件自带的滚动条样式1 <el-scrollbar></el-scrollbar>将会出现滚动的内容放到上述标签内就可以了。 这里要简单的设置一下,将标签的height设为100%,查看效果的时候,会出现一个横向的滚动条,如果你不想要横向的滚动条,使用下面css属性设置就可以只显示竖向滚动条。.el-scrollbar{height:100%;}ps:如果...原创 2018-09-30 17:07:29 · 10266 阅读 · 0 评论 -
vue实例中data使用return包裹
在简单的vue实例中看到的Vue实例中data属性是如下方式展示的:let app= newVue({ el:"#app", data:{ msg:'' }, methods:{ }})在使用组件化的项目中使用的是如下形式:export default{ data(){ return { ...转载 2018-04-24 14:24:39 · 235 阅读 · 0 评论