kylinca-CSDN博客

原创 tinymce的使用

tinymce的使用随着版本的更新许多路径会发生变化所以记录一下特定版本的使用方法"@tinymce/tinymce-vue":"^2.0.0","tinymce":"^5.0.3",直接安装这两个版本在public文件夹下面创建一个名为tinymce的文件夹然后把node_modules>tinymce下的skins文件复制到该文件夹下面如果需要语言包就在tinymce文件夹下创建一个langs文件把语言包放在该文件夹下然后创建一个组件...

2021-04-16 08:25:54 1699

原创多层封装vue组件时的传参问题

v-bind="$attrs" v-on="$listeners" 父组件>子组件>孙子组件父组件中的值要传递到孙子组件，孙子组件中的事件要传递到父组件子组件设置属性inheritAttrs:false,inheritAttrs：默认值为 true。默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另...

2021-03-16 15:17:59 657

原创 vue的axios封装实现无感刷新token

import axios from 'axios'import router from '../router'import store from '@/store'import { succeed, failed, warning } from "@/utils"import { getToken, setToken} from './auth'import { MessageBox, Message} from 'element-ui'import { .

2021-03-03 15:14:06 884 1

原创 postcsss的使用

postcss的功能还挺多的，目前只用到了一个编译css时候的兼容浏览器还有做px转rem的功能。npm install postcss-pxtorem --save-dev 用于px转换为remnpm i postcss-loader autoprefixer -D PostCSS 插件 autoprefixer 自动补齐 CSS3 前缀安装autoprefixer可能会出现版本问题降低一下版本就行module.exports = { plugins: { 'au...

2021-02-02 16:45:47 275

原创 vue一键复制插件封装

首先npminstallclipboard --save然后进行封装import Vue from 'vue'import Clipboard from 'clipboard'function clipboardSuccess () { Vue.prototype.$notify({ title: 'Tips', message: 'Copy succeeded', type: 'success' });}function clipboardEr..

2020-12-10 13:35:42 297

原创 vuex学习笔记

这里写一下模块化之后使用vuex的一些变化每个模块export default{ namespaced: true, //加了这句话每个模块才会自己的命名空间 state, mutations, actions}在vue组件调用的时候computed: { ...mapState({ name: state => state.admin.name, username: state => state.user

2020-12-08 14:11:31 154

原创 vue插槽的使用心得

vue插槽的使用心得匿名插槽子组件<template> <div> <slot></slot> </div></template>父组件<child> <template> </template></child> //直接在子组件内插入html具名插槽子组件<template>

2020-11-26 15:31:16 77

原创 vue中高德地图的使用心得

最近项目中要使用到高德地图写一篇文档记录下首先在适当位置创建一个AMap.js文件AMap.js文件内容exportdefaultfunctionMapLoader(){returnnewPromise((resolve,reject)=>{if(window.AMap){resolve(window.AMap);}else{varscript=document.cre...

2020-11-19 14:31:14 825 1

原创 vue-cli实现中英文切换，i18n插件使用

1.npm安装：npm install vue-i18n --save2.在mian.js 引入impori18n from './i18n/i18n'Vue.use(i18n)new Vue({ i18n,})3.在src目录下，创建一下目录结构：i18n.jscn.jsen.jsindex.js在组件中改变切换语言this.$i18n.locale=e //e是en或者cnlocalStorage.s...

2020-11-13 17:10:38 737

原创 vue element admin的权限管理心得

呼~~作为一名前端菜鸟在两三天的时间里总算是把vue element admin这一块的路由控制看的差不多了也在自己公司的项目实现了虽然不是动态路由也只有两个角色（因为我司后端很忙天天半夜爬起来修服务器，前段时间公司服务器被黑，最近更是没时间搭理我，以至于前端很多数据都没有后端支持。。。），但还是照虎画猫搞了一下，以后总能用到的。首先你要有两个路由表一个是不管什么角色都能访问的路由表，还有一个是需要控制判断权限才能访问的路由表公共路由表：exportconstro...

2020-11-12 17:02:38 639

原创 ES6 新增的Map数据结构

ES6 新增的Map数据结构虽然网上很多讲解还是打算自己整理一下来加深印象Map可以接受数组作为参数，数组成员还是一个数组，其中有两个元素，一个表示键一个表示值。const map2 = new Map([ ['name', 'Aissen'], ['age', 12]])map2 // {"name" =>Aissen, "age" =>12}map2.size // 2map2.set('sex','man')如果一个键重复设置后面的...

2020-11-10 10:23:42 100

原创 css移动旋转

transform: translateX(-60px); transition: all .5s;往X轴方向平移transform: translateY(-60px); transition: all .5s;往Y轴方向旋转transform: rotate(0deg); transition: all .5s;沿着中心旋转...

2020-09-01 15:06:22 380

原创手机号证件号正则

var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;myreg.test(this.input)手机号正则 var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/ reg.test(str);证件号

2020-08-22 08:51:50 655

原创子div超出父div部分横向滚动，不换行

子div超出父div部分横向滚动，不换行父div：.rootBar{overflow-y: hidden;overflow-x: auto;white-space: nowrap;}子div：.childrenBar{position: relative;display: inline-block;}

2020-08-22 08:49:03 1015

原创时间戳转换为普通时间格式

function getLocalTime(nS) { return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " "); } alert(getLocalTime(1177824835)); 2007/4/29 下午1:33:55function formatDate(now) { var year=now....

2020-08-22 08:45:09 1552

原创将vuex里的方法变量映射为当前组件的变量方法

vuexthis.$store.commit('changecontactInformation',obj) 调用mutations方法传参{{$store.state.contactInformation}}直接在标签中显示vuex中的数据import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'mapStatecomputed:{...mapState([...

2020-08-19 21:38:19 547

原创小程序页面tab切换

WXML：<view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">产品</view> <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="s

2020-07-13 10:05:37 509

kylinca的博客