![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
浪在前端
一个前端小菜鸟
展开
-
Vue中插槽的使用
插槽内容// 子组件 HomeChild<template> <div> <slot></slot> </div></template>// 父组件 Home<template> <div> <HomeChild> // 插槽内可以包含任何模板代码(包括 HTML、其它的组件) // <About /> 我是父组件原创 2021-11-18 10:06:21 · 268 阅读 · 0 评论 -
vue中Class 与 Style 绑定
一、绑定class1、对象语法<template> <div> // 1、给 v-bind:class 传入一个对象,以动态地切换 class <div v-bind:class="{ active: isActive }">123</div> // 2、在对象中传入更多字段来动态切换多个 class <div class="static" v-bind:class="{ active:原创 2021-11-03 15:35:14 · 453 阅读 · 2 评论 -
vue中使用TinyMce富文本之第二弹
废话不多说,直接上代码1、封装Tin<!-- tinyMce富文本编辑器 --><template> <div class="editor-wrapper"> <Editors id="tinymce" v-model="currentValue" :init="tinymceInit" @onChange="handleChange()" @onBlur="handleChange()"原创 2021-09-03 11:35:32 · 429 阅读 · 0 评论 -
vue中使用keep-alive对组件进行缓存,关闭tag时清除缓存
1、对需要缓存的组件添加keepAlive{ path: "/policy", name: "Policy", component: () => import("../views/pages/policy/index.vue"), meta: { keepAlive: true } // true缓存 false不缓存 }2、App.vue<template> <div id="app">原创 2021-08-08 17:31:06 · 6759 阅读 · 2 评论 -
vue中使用TinyMce富文本之第一弹
一、下载cnpm i @tinymce/tinymce-vue -S我的版本"@tinymce/tinymce-vue": "^3.2.8",@vue/cli 4.5.13"vue": "2.6.10",二、完整代码<template> <div> <Editor :id="tinymceId" apiKey="你自己在官网申请的key" :init="init" :disabled="disab原创 2021-07-20 15:40:32 · 393 阅读 · 0 评论 -
文本溢出显示省略号,鼠标悬浮显示全部信息(兼容IE)
组件<!-- * @Descripttion: el-tooltip重新封装 * @version: 1.0 * @Author: keyu * @Date: 2020-07-05 10:28:45 * @LastEditTime: 2020-07-05 11:46:56--><template> <div class="tooltip-wrap"> <el-tooltip ref="tlp" :content=原创 2020-12-11 10:40:57 · 1317 阅读 · 0 评论 -
AES加密解密
1、cnpm i crypto-js --save2、在utils下新建aes.js文件var CryptoJS = require("crypto-js");/*** 加密*/export const encrypt = (word) => { var key = CryptoJS.enc.Utf8.parse("46cc793c53dc451b");//秘钥 var srcs = CryptoJS.enc.Utf8.parse(word); var encrypted =原创 2020-05-22 13:57:28 · 177 阅读 · 0 评论 -
Vue组件间通信
Vue组件间传值一、父组件调用子组件的数据和方法1、$children通过this.$children.search()访问子组件中定义的属性或方法2、ref// 父组件通过ref给子组件做一个标记<outSide ref="test"> </outSide >通过this.$refs.test.search()访问子组件的属性或方法3、$emit// 子组件this.$emit("test",data) //data是需要传递的数据// 父组件原创 2020-09-18 15:56:18 · 2260 阅读 · 0 评论